Динамическое добавление серии с помощью графиков акций 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: Невозможно прочитать свойства 'options' undefined

Этот код работает нормально, если это обычный старший график, но по какой-то причине он не работает с графиком HighStock.

Как мне сделать так, чтобы он работал с нужным мне типом диаграммы?

---

Обновление:

Я придумываю способ получения 1-й серии динамически, но затем, когда я пытаюсь добавить вторую серию, возникает ошибка:

Uncaught TypeError: Невозможно прочитать свойство 'стеки' из неопределенного

Скрипка: http://jsfiddle.net/maniator/V5WAJ/

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

Answer 2

Из справочника HighStock API в addSeries:

В StockChart с включенным навигатором базовая серия не может быть добавлена ​​динамически.

То естьскажем, если вы используете Навигатор, вы должны начать хотя бы с одной серии.В соответствии с той же ссылкой API, навигатор отображается по умолчанию.

Answer 3

Я нашел один обходной путь.Мой вариант использования заключался в том, чтобы отображать значения во времени, поэтому первое значение, которое я добавлял на график, представляло собой пару допустимых временных отметок с 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 на приведенное здесь.

Answer 4

Вы можете сначала создать шаблон, а затем добавить серию.Но как только вы добавили хотя бы одну серию, вы не можете удалить highcharts-navigator-series (автоматически сгенерированный) из диаграммы HighStock .Если вы хотите удалить все серии, используйте следующий код:

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

Это удалит все серии, кроме серии навигатора.Затем вы можете безопасно добавлять новые серии в свой график.

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

*Функция 1009 * выполняет реальную работу, заполняя временной интервал заданными данными

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

Answer 6

Я обнаружил, что вы можете использовать следующий код в динамически вызываемой функции, чтобы обойти параметр highstock.series [0] = нулевая проблема

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

// you can now add the dynamic data, eg

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