如何從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，這可能會有所幫助