使用 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");
    }

});

控制台报如下错误：

未捕获的类型错误：无法读取未定义的属性“选项”

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

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

---

更新：

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

未捕获的类型错误：无法读取未定义的属性“堆栈”

小提琴：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
        }]
    });
});

Answer 2

我找到了一种解决方法。我的用例是随着时间的推移绘制值，所以我添加到图表中的第一个值是一对有效的时间戳，带有 null 的数据：

series : [{
    name : 'Random data',
    data : (function() {
        var data = [], time = (new Date()).getTime();
        data.push([time, null]);                
        return data;
    })()
}]

然后，每当必须绘制新值时，只需将它们简单地添加为：

var value = rawData['My Data Set']
var plot  = [new Date().getTime(), value]
mychart.series[0].addPoint(plot, true, false)

可以测试here，只需将series的原始定义替换为此处的定义即可。

Answer 3

来自 addSeries 上的 HighStock API 参考：

在启用导航器的 StockChart 中，不能动态添加基本系列。

也就是说，如果您使用的是 Navigator，则必须从至少一个系列开始。根据同一个 API Reference，默认情况下会显示 Navigator。

Answer 4

我发现你可以在动态调用的函数中使用以下代码来绕过highstock option.series[0] = null问题

options.series= [{data:[]}];

// you can now add the dynamic data, eg

options.series[0].data.push([time, val]);

Answer 5

我实现了动态添加时间序列如下：

HTML 部分，这里没有什么花哨的：

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>

和javascript部分：

  $(function () {

  var chart = Highcharts.chart('container', {
    chart: {
      type: 'line'
    },
    title: {
      text: ''
    },
    subtitle: {
      text: ''
    },
    yAxis: {
      title: {
        text: 'Values'
      }
    },
    plotOptions: {
      line: {
        dataLabels: {
          enabled: true
        },
        enableMouseTracking: true
      }
    },
    series: [{
      name: 'A',
      color: "#ea825f",
      data: []
      // 
    },{
      name: 'B',
      color: "#2a82ff",
      data: []
      // data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }]
  });

  var data1 = [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6];
  var data2 = [4.0, 11.9, 6.5, 12.5, 11.4, 15.5, 29.2, 24.5, 21.3, 15.3, 14.9, 8.6]

  function add_timeseries(data, chart, series_index) {
    $.map(data, function(i){
        chart.series[series_index].addPoint(i, true, false)
    })
  }
  add_timeseries(data1, chart, 0)
  add_timeseries(data2, chart, 1)
});

add_timeseries() 函数完成实际工作，它用给定的数据填充时间序列槽

https://jsfiddle.net/muatik2/vxym5xx5/6/

Answer 6

您可以先创建模板，然后再添加系列。但是，一旦您添加了至少一个系列，就无法从 HighStock 图表中删除 highcharts-navigator-series(auto-generated)。如果要删除所有系列，可以使用以下代码：

while (chart.series.length > 0) {
    if (chart.series[0].options.id == 'highcharts-navigator-series') {
        break;
    }
    chart.series[0].remove(true);
}

这将删除除导航器系列之外的所有系列。然后，您可以安全地将新系列添加到图表中。