javascript - Highchart 不显示带有 Ajax 数据的饼图

Question

我正在尝试将 highcharts 图表与 rest API 集成。当我在 chartObj 的 series 属性中硬编码 data 的值时，我看到了图表，但是当我尝试与API 并将 data 值填充到 series，图表不显示。你能告诉我我哪里出错了吗？

注意:我已经用有效的硬编码值注释了 data 的代码。

var chartObj = {
            chart: {
              plotBackgroundColor: null,
              plotBorderWidth: null,
              plotShadow: false,
              backgroundColor:null
            },
            tooltip: {
              pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
              pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                  enabled: true,
                  color: '#000000',
                  connectorColor: '#000000',
                  format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
              }
            },
            navigation: {
              buttonOptions: {
                enabled: false
              }
            },
            title:{
              text: 'Storage Data'
                },
            series:[{
              type: 'pie',
              name: 'Storage Data',
              /*data: [
                ['HP',   80.0],
                ['DELL', 20.0]
                ]*/
                }]
            }

             var storageData = $.getJSON('http://hostname/resturl/data', 
               function(data) { 
              var result = new Array();
              for (i=0;i<data.content.length;i++) {
                  var alpha = new Array();
                          alpha.push(data.content[i].x);
                  alpha.push(data.content[i].y);
                      result.push(alpha);
              }
                storageobj.series.data=result;       
              });
          $('#pie-chart2').highcharts(storageobj);

添加json数据:

{
 "links": [],
 "content": [
  {
    "x": "POWEREDGE R610",
    "y": 238
  },
  {
    "x": "POWEREDGE R810",
    "y": 229
  }
],
"id": null
}

从控制台添加回调和相关错误的代码:

        var restUrl='http://hostname:port/url/of/rest?callback=?';

             var getData = $.getJSON(restUrl, 
          function(data) { 
            console.log('came her');
              var result = new Array();
              for (i=0;i<data.content.length;i++) {
                  var alpha = new Array();
                  alpha.push(data.content[i].x);
                  alpha.push(data.content[i].y);
                  result.push(alpha);
              }
                    storageobj.series.data=result;       


              });

控制台未打印“来到这里”并在控制台上抛出以下错误:未捕获的语法错误:意外的标记:{"links":[],"content":[{"x":"HP","y":238},{"x":"DELL","y":229}],"id":null

请让我知道哪里出错了。

Answer 1

问题是您在收到 AJAX 响应之前创建了图表。

在回调中创建图表，参见:

$.getJSON(
    'http://hostname/resturl/data',
    function (data) {
      var result = new Array();

      for (i = 0; i < data.content.length; i++) {
          var alpha = new Array();
          alpha.push(data.content[i].x);
          alpha.push(data.content[i].y);
          result.push(alpha);
      }

      chartObj.series[0].data = result;

      $('#pie-chart2').highcharts(chartObj);
  }
);

此外，使用 chartObj 创建图表，而不是从 getJSON() 方法返回值。