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

});

控制台中出现以下错误：

未捕获的TypeError：无法读取未定义
的属性“选项”

如果它是正常的高图，这段代码可以正常工作，但由于某些原因它不能用于HighStock图表。

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

更新

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

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

小提琴：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中，无法动态添加基本系列。

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

Answer 4

我发现你可以在动态调用函数中使用以下代码来绕过highstock选项.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（自动生成）。如果要删除所有系列，可以使用以下代码：

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

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

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

更新

6 个答案: