Highcharts 动态添加系列 [英] Highcharts add series dynamically

问题描述

我想添加一些系列(我从 webservice 获取系列数据作为 3dim 数组(并将其作为 json 返回)-我不知道我将获得的系列数量，所以我必须动态加载系列数据).

在 javascript 中，我正在构建一个对象:(就像这个 highstock 示例:http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/演示/比较/)

seriesOptions[i] = {名称:namearray[i],数据:数据数组};例如结果:[对象{名称=系列"，数据=[[1041375600000, 29,9]]}]

我试图添加这样的系列:

$.each(seriesOptions, function (itemNo, item) {图表.addSeries({名称:项目名称，数据:item.data}， 错误的);});图表重绘()；

但是图表绘制的系列有点奇怪，并且不会转换为时间戳.
我的网络服务图表数据有问题吗?

这是我的代码:http://jsfiddle.net/DGdaf/2/>

到目前为止，感谢您的任何帮助.

编辑
图表似乎忽略了时间线/缩放值的所有默认值.我不知道为什么它不显示这些组件.
问题可能是，我在初始化后绘制图表?

chart = new Highcharts.Chart(options);

但由于动态系列加载，我必须这样做.

EDIT2
我不确定我是否加载了太多数据或其他什么.我无法动态创建我的系列.

for(i=0; i

解决方案

为您的 yAxis 设置:

yAxis:{类型:'日期时间'}

见fiddle

时间轴/缩放http://jsfiddle.net/DGdaf/5/

当图表准备好时，使用回调添加系列.但是，为什么在创建图表时不添加这些系列?

 chart = new Highcharts.Chart(options, function(ch) {$.each(seriesOptions, function (itemNo, item) {ch.addSeries({名称:项目名称，数据:item.data}， 错误的);});图表重绘()；});

I want to add some series (I get the series data from a webservice as a 3dim array (and returning it as json) - I dont know the number of series I will get, so I have to load the series data dynamically).

In javascript I am building an object: (like this highstock example: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/compare/)

seriesOptions[i] = {
    name: namearray[i],
    data: dataarray
};

e.g. result: [Object { name="Series", data=[[1041375600000, 29,9]]}]

I was trying to add the series like this:

$.each(seriesOptions, function (itemNo, item) {
    chart.addSeries({                        
        name: item.name,
        data: item.data
    }, false);
});
chart.redraw();

But the chart draws the series kinda weird and doesnt convert to timestamp to date.
Are there any problems with my chart data from the webservice?

Here is my code: http://jsfiddle.net/DGdaf/2/

Thanks for any help so far.

EDIT
It seems like the chart ignoeres all the default values of timeline/zoom value. I have no idea why it doesnt display these components.
The problem could be, that I am drawing the chart after the initialization?

chart = new Highcharts.Chart(options);

But I have to do it cause of the dynamic series loading.

EDIT2
I am not sure if I am loading too much data or something. I cant create my series dynamically.

for(i=0; i<seriesOptions.length; i++){
        chart.addSeries({                        
            name: seriesOptions[i].name,
            data: seriesOptions[i].data
        }, true);

    };

解决方案

Set for your yAxis:

yAxis: {
    type: 'datetime'
}

See fiddle

EDIT: Timeline / zoom http://jsfiddle.net/DGdaf/5/

Edit: Use callback to add series, when chart is ready. However, why don't you add these series when chart is created?

    chart = new Highcharts.Chart(options, function(ch) {

        $.each(seriesOptions, function (itemNo, item) {
            ch.addSeries({                        
                name: item.name,
                data: item.data
            }, false);

        });
        chart.redraw();
    });

这篇关于Highcharts 动态添加系列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！