javascript - 使用 HighCharts 股票图表动态添加系列

Question

我有以下代码: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");
    }

});

它在控制台中出现以下错误:

Uncaught TypeError: Cannot read property 'options' of undefined

如果它是普通的高位图，此代码可以正常工作，但由于某些原因，它不适用于 HighStock 图表。

我怎样才能让它适用于我需要的图表类型？

---

更新:

我找到了一种动态获取第一个系列的方法，但是当我尝试添加第二个系列时出现错误:

Uncaught TypeError: Cannot read property 'stacks' of undefined

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

Answer 1

您正在使用空系列创建图表，因此出现错误。当这行代码运行时，它会在设置 series 选项之前立即初始化 Highchart。

var chart = createChartTemplate();

当我先构建系列数组，然后在最后一步将其添加到构造函数的选项时，我对 Highcharts 有了更好的体验。

特定于您的示例，usdeur.js 文件已经包含一个已初始化的数据数组。您只需要将它传递到选项数组中即可。你的 jsfiddle 可以是 simplified to this .

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