如何在 chart.js 中从 JSON 创建堆积条形图答案

【问题标题】：How to create Stacked bar chart from JSON in chart.js如何在 chart.js 中从 JSON 创建堆积条形图
【发布时间】：2017-08-31 04:40:45
【问题描述】：

我想创建堆积条形图，但我不知道怎么做我不知道通过 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

请帮帮我。谢谢。 bar chart in chart.js

【问题讨论】：

请参考此文档chartjs.org/docs/latest 并按照所述创建您的数据集
您发布的链接描述了如何操作的步骤？
如何将数据集创建为 chartjs.org/docs/latest 。我不知道该怎么做。
删除无用代码sn-p

标签： javascript json chart.js bar-chart

【解决方案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();
});

如果这能解决您的目的，请告诉我。

【讨论】：

【解决方案2】：

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

【讨论】：