如何从chart.js中的JSON创建堆积条形图

Question

我想创建堆积的条形图，但我不知道该怎么做，我也不知道json放置在图表中的值，我有以下Json数据：

var setdata = [{
      "data": [{
              "month" : "January",
               "name" : "Alex",
               "count" : 10
      }]
    },
     {
      "data": [{
              "month" : "February",
               "name" : "Alex",
               "count" : 20
     },
     {  
      "data": [{
              "month" : "February",
               "name" : "John",
               "count" : 30
     },
     {  
      "data": [{
              "month" : "February",
               "name" : "Mark",
               "count" : 40
     }]
              },
    {
      "data": [{
              "month" : "March",
               "name" : "Alex",
               "count" : 10
     },
     {  
              "month" : "March",
               "name" : "John",
               "count" : 20
     }]
    }
    ]

我想创建堆积条形图为：

|                _
|               | | Mark
|               |_|
|               | |                   _
|               | | John             | |
|               |_|                  | | John
|               | |                  |_|
|  _            | |                  | |
| | |Alex       | | Alex             | | Alex
|_|_|___________|_|__________________|_|_______
 January      February              March
                Months

请帮帮我 。 谢谢。 chart.js中的条形图

Answer 1

您可以尝试使用FusionCharts，以使图表制作过程令人愉悦。 它使您可以立即创建图表，而无需广泛了解数据结构。 我是否提到图表看起来很漂亮？

使用FusionCharts Stacked Charts，我已经在JSFiddle中使用您的数据为您创建了一个示例。

FusionCharts.ready(function() {


 var revenueChart = new FusionCharts({
    type: 'stackedcolumn2d',
    renderAt: 'chart-container',
    width: '550',
    height: '450',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Alex-John-Mark",
        "subCaption": "",
        "xAxisname": "Month",
        "yAxisName": "Units",

    "paletteColors": "#4A148C,#004D40, #FF6F00",
    "bgColor": "#ffffff",
    "borderAlpha": "20",
    "showCanvasBorder": "0",
    "usePlotGradientColor": "0",
    "plotBorderAlpha": "10",
    "legendBorderAlpha": "0",
    "legendShadow": "0",
    "valueFontColor": "#ffffff",
    "showXAxisLine": "1",
    "xAxisLineColor": "#999999",
    "divlineColor": "#999999",
    "divLineIsDashed": "1",
    "showAlternateHGridColor": "0",
    "subcaptionFontBold": "0",
    "subcaptionFontSize": "14",
    "showHoverEffect": "1"
  },
  "categories": [{
    "category": [{
        "label": "January"
      }, {
        "label": "February"
      }, {
        "label": "March"
      }

    ]
  }],
  "dataset": [{
    "seriesname": "Alex",
    "data": [{
        "value": "10"
      }, {
        "value": "20"
      },

      {
        "value": "10"
      }
    ]
  }, {
    "seriesname": "John",
    "data": [{
        "value": "0"
      }, {
        "value": "30"
      },

      {
        "value": "20"
      }
    ]
  }, {
    "seriesname": "Mark",
    "data": [{
        "value": "0"
      }, {
        "value": "40"
      },

      {
        "value": "0"
      }
    ]
  }]


  }
  }).render();
});

让我知道这是否解决了您的目的。

Answer 2

为此，您可以使用我认为的chart.js，这可能会有所帮助