使用HighCharts股票图表动态添加系列 [英] Adding a series dynamically with HighCharts Stock Charts

问题描述

我有以下代码： http://jsfiddle.net/maniator/vTjW8/

  var createChartTemplate = function（）{
 return {
图表：new Highcharts.StockChart（{
 
图表：{
 renderTo：'container'
}，
 series：[] 
}），
 addSeries：function（name）{ 
 this.chart.addSeries（{
 name：name，
 data：[]，
 id：Math.floor（Math.random（）* 1000）
 }）; 
}，
 addPoint：function（data，series）{
 var seriesIndex = this.seriesExists（series）; 
 if（！（seriesIndex === false））{
 this.chart.series [seriesIndex] .addPoint（data，false）; 
} 
 this.chart.redraw（）; 
}，
 seriesExists：function（series）{
 var seriesIndex = false; 
 $ .each（this.chart.series，function（index，item）{
 if（$ .trim（item.name）== $ .trim（series））{
 seriesIndex = index; 
 return false; 
} 
}）; 
 return seriesIndex; 
 
 
 $ b $（function（）{
 var data = usdeur.splice（0，700）; 
 var chart = createChartTemplate（ ）; 
 chart.addSeries（New Series）; 
 for（var i = 0; i< data.length; i ++）{
 chart.addPoint（data [i]， 新系列）; 
} 
 
}）; 
  

在控制台中出现以下错误：

未捕获的TypeError：无法读取未定义的属性'options'

是一个普通的高图，但由于某些原因，它不适用于HighStock图表。

如何使它与我需要的图表类型一起工作？

---

更新：

我想出了一种方法动态地获取第一个系列，但是当我尝试添加第二个系列时，它有一个错误：

未捕获TypeError：无法读取未定义的属性堆栈

小提琴： http://jsfiddle.net/maniator/V5WAJ/

解决方案

您正在创建图表空系列，因此错误。当你运行这段代码时，它会立即初始化Highchart，然后设置系列选项。

  var chart = createChartTemplate（）; 
  

当我先建立系列数组时，我已经有了更好的使用Highcharts的经验，然后将它添加到

针对您的示例， usdeur.js 文件已包含一个初始化的数据数组。你只需要在options数组中传递它。您的jsfiddle可以简化为。

 < code $ $（function（）{
 var chart = new Highcharts.StockChart（{
 chart：{
 renderTo：'container'
}，
系列：[{
 name：'New Series'，
 data：usdeur 
}] 
}）; 
}）; 
  

I have the following code: http://jsfiddle.net/maniator/vTjW8/

var createChartTemplate = function() {
    return {
        chart: new Highcharts.StockChart({

            chart: {
                renderTo: 'container'
            },
            series: []
        }),
        addSeries: function(name) {
            this.chart.addSeries({
                name: name,
                data: [],
                id: Math.floor(Math.random()*1000)
            });
        },
        addPoint: function(data, series) {
            var seriesIndex = this.seriesExists(series);
            if (!(seriesIndex === false)) {
                this.chart.series[seriesIndex].addPoint(data, false);
            }
            this.chart.redraw();
        },
        seriesExists: function(series) {
            var seriesIndex = false;
            $.each(this.chart.series, function(index, item) {
                if ($.trim(item.name) == $.trim(series)) {
                    seriesIndex = index;
                    return false;
                }
            });
            return seriesIndex;
        }
    }
}
$(function() {
    var data = usdeur.splice(0, 700);
    var chart = createChartTemplate();
    chart.addSeries("New Series");
    for (var i = 0; i < data.length; i++) {
        chart.addPoint(data[i], "New Series");
    }

});

It has the following error in the console:

Uncaught TypeError: Cannot read property 'options' of undefined

This code works fine if it is a normal highchart, but for some reason it does not work with a HighStock chart.

How can I make it so that it works with the chart type that I need?

---

Update:

I figures out a sort of way around getting the 1st series dynamically, but then when I try to add a second series it has an error of:

Uncaught TypeError: Cannot read property 'stacks' of undefined

Fiddle: http://jsfiddle.net/maniator/V5WAJ/

解决方案

You are creating the chart with an empty series, hence the error. When this line of you code runs it's initializing the Highchart immediately, before the series option has been set.

var chart = createChartTemplate();

I've had better experience with Highcharts when I build the series array first, then add it to the options of the constructor in the last step.

Specific to your example, the usdeur.js file already includes an initialized array of data. You simply need to pass it along in the options array. Your jsfiddle can be simplified to this.

$(function() {
    var chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container'
        },
        series: [{
            name: 'New Series',
            data: usdeur
        }]
    });
});

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