Question

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

注意：我已使用硬编码值对series的代码进行了评论。

data

添加json数据：

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);

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

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

控制台没有打印出来＆＃39;来到这里＆＃39;并在控制台上抛出以下错误： 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; });

请让我知道我哪里出错。

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()方法返回值。

Answer 2

指定ajax请求的回调函数。

$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?', function (csv) {

}

在你的网址附加＆＃34; callback =？＆＃34;请参阅 Example

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

2 个答案: