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

});

控制台中出现以下错误：

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

如果是普通的Highchart，此代码运行良好，但是因为某种原因，在HighStock图表中不起作用。

我该如何使其适用于我需要的图表类型？

---

更新：

我找到了一种解决方式，以动态方式获取第一个系列数据，但是当我尝试添加第二个系列数据时，出现以下错误：

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

示例: http://jsfiddle.net/maniator/V5WAJ/

- Naftali

---

你有没有想过如何使用空数据集启动Highstock？我也遇到了类似的问题，即需要在创建图表后动态添加数据。 - unexplored

@unexplored 我需要对代码进行一些调整... :-\ 非常非常的hacky。基本上，当我需要一个新系列时，我会再次使用新的系列数据重新创建整个图表..... - Naftali

我找到了一个适合我的需求的解决方案。不知道这是否适用于你的问题（而且可能已经晚了），但我在下面发布了一个答案供其他人参考。 - unexplored

Answer 1

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

var chart = createChartTemplate();

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

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

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

- Jonathan Beebe

---

我想从一个空序列开始。我想要动态地添加序列... 在常规的HighCharts中它完美地工作... - Naftali

这里有一个更新的fiddle，我在其中创建了两个系列：http://jsfiddle.net/maniator/vTjW8/9/ - Naftali

在文档中提供了一个股票示例来添加一个系列，该示例显示图表在初始化时具有一系列，然后第二个系列在初始化之后被添加。也许它不能处理使用空集进行初始化的情况？ - Jonathan Beebe

常规的Highcharts图表可以使用空系列开始，为什么Highstock不能呢？ - Naftali

自 Highcharts API 1.2.0 起，存在 series[i].setData() 方法。http://api.highcharts.com/highcharts#Series.setData - Samuel

@bejonbee 请帮我看一下这个问题：http://stackoverflow.com/questions/43623840/highchart-dynamic-data-adding-with-addseries-array - Jc John

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)

这可以在这里进行测试，只需将series的原始定义替换为此处的定义。

- unexplored

Answer 3

从HighStock API参考中的addSeries部分：

在启用导航器的StockChart中，基础序列无法动态添加。

也就是说，如果您正在使用Navigator，则必须至少开始使用一个系列。根据同一API参考，Navigator默认显示。

- kcvikander

---

这让我意识到了一个问题（我误解了options的[缺乏]层次结构，因此没有初始化series），从而促使我解决了这个问题。 - Ruben Bartelink

Answer 4

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

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

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

- backslashN

Answer 5

我发现在动态调用函数中，可以使用以下代码来解决高级股票选项 option.series[0] = null 的问题。

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

// you can now add the dynamic data, eg

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

- ejectamenta

Answer 6

我成功地动态添加了时间序列，具体如下：

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/

- Muatik