构建空图表，然后设置它's数据

Build empty chart and then set it's data

本文关键字：数据 设置 然后 构建      更新时间：2023-09-26

我已经开始在Highcharts上实现柱状图。(http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/combo/柱状图的一部分）

我把系列设置成这样：

...
series : []
...

我从服务器返回类似的东西：

[ {
  "name" : "4346",
  "data" : [ 3010840179 ],
  "type" : "column"
}, {
  "name" : "20232",
  "data" : [ 2135308977 ],
  "type" : "column"
} ]

当我复制该值并首先设置序列时，它会渲染图形。然而，我不知道服务器会返回什么（有多少元素等），我尝试了一下：

chart.series = data; //chart is my chart variable's name, data is the returning JSON String from server.

然而，图表上什么也没发生，我知道这不是一个有效的用法。我应该怎么做才能一次设置图表的序列变量？

PS1:我试图在$.getJSON（）的回调函数中设置数据

PS2:chart.series[n].setData（）；不适合我。我有来自服务器的每个元素的数据和名称。我想一次设置图表的整个系列变量。

第1版：http://jsfiddle.net/HD6CY/这就是我想要实现的。

编辑3:我想创建一个具有序列[]的图表，在从服务器获取数据（需要很长时间）后，我想将其设置为图表的序列变量。如果等待获取数据，我不想阻止我的图表创建，我想建立空的，然后我会设置它。我会在屏幕上显示一个加载文本，这样即使它一开始没有任何显示，也会有一些内容而不是空页面。

检查addSeries。

构建一个空图表后，请执行以下操作。

var  variable =   [{
    type: 'column',
    name: 'Jane',
    data: [3, 2, 1, 3, 4]
}, {
    type: 'column',
    name: 'John',
    data: [2, 3, 5, 7, 6]
}, {
    type: 'column',
    name: 'Joe',
    data: [4, 3, 3, 9, 0]
}]; 
for(var i in variable) {
    chart.addSeries(variable[i], false); // don't redraw
}
chart.redraw(); // redraw only after add all series

演示

参考

  • http://api.highcharts.com/highstock#object-图表

您是否尝试过在ajax调用成功时创建图表？：

  ...
  success: function(data) { 
       var chart;  
       chart = new Highcharts.Chart({
             ...
             series: data
             ....
       });
  ...
相关文章：