Highcharts Stacked中的嵌套json

Question

我在 Google 上搜索了有关 Highcharts stacked percentage column 的嵌套 json 的分配信息，但还是要把正确的拿出来。

这是我尝试过的代码，但得到了正确的输出。

谁能帮我解决我在做什么错误？

提前致谢。

$(function () {
  var processed_json = new Array();
  $.getJSON('javascripts/data.json', function(data) {
    // Populate series
    for (i = 0; i < data.length; i++){
      processed_json.push([data[i].key, data[i].value]);
    }
    // draw chart
    $('#container').highcharts({
      chart: {
        type: "bar"
      },
      title: {
        text: "Student data"
      },
      xAxis: {
        type: 'category',
        allowDecimals: false,
        title: {
          text: ""
        }
      },
      yAxis: {
        title: {
          text: "Scores"
        }
      },
      plotOptions: {
        column: {
          stacking: 'normal'
        }
      },
      series: [{
        name: 'Subjects',
        data: processed_json,
      }]
    });
  });
});

// this is how am displaying in data.json

[
  {"key":"john","value":[34,53,45,45,98]},
  {"key":"Rita","value":[98,34,43,54,66,66]},
  {"key":"james","value":[91,33,45,65,65,38]},
  {"key":"jade","value":[98,54,54,45,45,45]},
  {"key":"lara","value":[23,23,98,23,23,23]} 
]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

Answer 1

您的变量 processed_json 的格式不是 Highcharts API 可以处理的。

看看这里：http://jsfiddle.net/jo8foxtz/

代码如下：

$(function() {

  var processed_json = new Array();
  
  data = [{
    "key": "john",
    "value": [34, 53, 45, 45, 98]
  }, {
    "key": "Rita",
    "value": [98, 34, 43, 54, 66, 66]
  }, {
    "key": "james",
    "value": [91, 33, 45, 65, 65, 38]
  }, {
    "key": "jade",
    "value": [98, 54, 54, 45, 45, 45]
  }, {
    "key": "lara",
    "value": [23, 23, 98, 23, 23, 23]
  }];

  for (i = 0; i < data.length; i++) {
    var item = {};
    item["name"] = data[i].key;
    item["data"] = data[i].value;
    processed_json.push(item);
  }


  $('#container').highcharts({
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Student data'
    },
    xAxis: {
      type: 'category',
      allowDecimals: false,
      title: {
        text: ""
      }
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Scores'
      }
    },
    tooltip: {
      pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
      shared: true
    },
    plotOptions: {
      column: {
        stacking: 'percent'
      }
    },
    series: processed_json
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>