在 HighCharts 中从 JSON 动态添加类别和系列答案

【问题标题】：Add Categories and Series dynamically from JSON in HighCharts在 HighCharts 中从 JSON 动态添加类别和系列
【发布时间】：2018-04-18 07:38:13
【问题描述】：

请考虑JSON：

[
   {
      "Categories": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
   },
   {
      "SeiresName": "Ava",
      "Data": ["49.9", "71.5", "106.4", "129.2", "144.0", "176.0", "135.6", "148.5", "216.4", "194.1", "95.6", "54.4"]
   },
   {
      "SeiresName": "Nima",
      "Data": ["83.6", "78.8", "98.5", "93.4", "106.0", "84.5", "105.0", "104.3", "91.2", "83.5", "106.6", "92.3"]
   },
   {
      "SeiresName": "Arian",
      "Data": ["48.9", "38.8", "39.3", "41.4", "47.0", "48.3", "59.0", "59.6", "52.4", "65.2", "59.3", "51.2"]
   }
]

我想创建一个Column 图表并添加写代码：

   $(function () {
        $.getJSON('JSON Data/ColumnchartWithSeries.json', function (data) {
            console.log(data);
            $('#container').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Title'
                },
                xAxis: {
                    categories: [],
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Y-Axis Title'
                    }
                },
                legend: {
                    reversed: true
                },
                series: [{}]
            });
        });
    });

我不知道如何分配Categories 并动态添加系列。我该怎么做？

谢谢

【问题讨论】：

标签： javascript jquery json highcharts

【解决方案1】：

你必须处理JSON字符串

var categories = []; //categories array to highchart
var seriesData = []; //series object to highchart

for (var i = 0; i < jsondata.length; i++) {
  if (jsondata[i].Categories) {
    categories = jsondata[i].Categories.replace(/\[|]|'/g, '').split(',')
  }
  if (jsondata[i].SeiresName) {
    seriesData.push({
      name: jsondata[i].SeiresName,
      data: JSON.parse(jsondata[i].Data)
    })
  }
}

Fiddle工作演示

更新 JSON 发生变化，数据相应更新

for (var i = 0; i < jsondata.length; i++) {
  if (jsondata[i].Categories) {
    categories = jsondata[i].Categories
  }
  if (jsondata[i].SeiresName) {
    seriesData.push({
      name: jsondata[i].SeiresName,
      data: jsondata[i].Data.map(Number)
    })
  }
}

Updated Fiddle

【讨论】：