Question

我在仪表板排序页面中有这种图表（会有更多图表，但现在让我们将其保留为最简单的图表）。（摘自HC文档）。

因此，我首先为Highcharts定义一个带有空序列的配置对象；从数据中分离配置似乎是一种合理的方法，因为我计划在此过程中使用更多的AJAX调用来替换数据（并重新绘制图表）。

var config = {
  chart: {
    height:150,
    type: 'bar'
},
title: {
    text: null
},
xAxis: {
    categories: ['Sources']
},
yAxis: {
    min: 0,
    title: {
      text: 'Posts'
  }
},
legend: {
    enabled:false
},
plotOptions: {
    series: {
      stacking: 'normal'
  }
},
series: null
};

然后我将带有POST请求的AJAX数据加载到后端脚本，将系列数据添加到config对象中，最后创建一个新的Highcharts图表

$.ajax({
    method:'POST',
    url:'ajax/loadmydata.php',
    data:window.query_vars,
    dataType:'JSON',
    success:function(d){
        console.log(d.platform);
        config.series = d.platform;
        var sourcesChart = new Highcharts.chart('sources-chart', config);
    }
});

AJAX调用的原始输出是这样的（为清楚起见而格式化）

{
  "platform": [
    {
      "name": "Instagram",
      "data": 14133
    },
    {
      "name": "Twitter",
      "data": 4312
    },
    {
      "name": "Facebook",
      "data": 3685
    },
    {
      "name": "Blog",
      "data": 482
    },
    {
      "name": "Forums",
      "data": 671
    },
    {
      "name": "News",
      "data": 545
    }
  ]
}

但是，在测试很多批次时，Highchart会留下几乎为空的图表，其中绘制了轴，但没有数据。使用控制台，我可以确认config对象确实包含系列数据；有什么线索吗？我是否缺少数据格式的内容？

Answer 1

如果您查看JSON和链接的小提琴中的JSON，则有一个主要区别。 您的数据值未括在方括号中。 Highcharts.series.data是一个数组，因此即使只是一个数字，也需要用括号括起来。

将您的JSON更改为此即可：

{
  "platform": [
    {
      "name": "Instagram",
      "data": [14133]
    },
    {
      "name": "Twitter",
      "data": [4312]
    },
    {
      "name": "Facebook",
      "data": [3685]
    },
    {
      "name": "Blog",
      "data": [482]
    },
    {
      "name": "Forums",
      "data": [671]
    },
    {
      "name": "News",
      "data": [545]
    }
  ]
}

var config = {
  chart: {
    height:150,
    type: 'bar'
},
title: {
    text: null
},
xAxis: {
    categories: ['Sources']
},
yAxis: {
    min: 0,
    title: {
      text: 'Posts'
  }
},
legend: {
    enabled:false
},
plotOptions: {
    series: {
      stacking: 'normal'
  }
},
series: []
};

d = {
  "platform": [
    {
      "name": "Instagram",
      "data": [14133]
    },
    {
      "name": "Twitter",
      "data": [4312]
    },
    {
      "name": "Facebook",
      "data": [3685]
    },
    {
      "name": "Blog",
      "data": [482]
    },
    {
      "name": "Forums",
      "data": [671]
    },
    {
      "name": "News",
      "data": [545]
    }
  ]
}

config.series = d.platform;
var sourcesChart = new Highcharts.chart('sources-chart', config);

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="sources-chart"></div>

JSFiddle示例： Array#map()

Highcharts中的jQuery / AJAX数据加载和替换

1 个答案: