Динамическое добавление серии с помощью HighCharts Stock Charts

У меня есть следующий код: 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: не удается прочитать «параметры» свойства неопределенного

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

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


Обновлять:

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

Uncaught TypeError: не удается прочитать «стеки» свойств неопределенного

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


person Naftali aka Neal    schedule 06.10.2011    source источник
comment
так вы когда-нибудь выясняли, как запустить хайсток с пустым набором данных? Я столкнулся с аналогичной проблемой, т.е. мне нужно динамически добавлять данные в диаграмму после создания диаграммы.   -  person unexplored    schedule 29.02.2012
comment
@unexplored Мне нужно было повозиться с кодом.... :-\ очень-очень хакерский. По сути, когда мне понадобилась новая серия, я снова воссоздал всю диаграмму с новыми данными серии.....   -  person Naftali aka Neal    schedule 29.02.2012
comment
Я нашел решение для своих нужд. Не знаю, относится ли это к вашей проблеме (и, вероятно, тоже поздно), но я разместил ответ ниже для других.   -  person unexplored    schedule 29.02.2012


Ответы (6)


Вы создаете диаграмму с пустой серией, отсюда и ошибка. Когда эта строка вашего кода запускается, она немедленно инициализирует Highchart, прежде чем будет установлен параметр series.

var chart = createChartTemplate();

У меня был лучший опыт работы с Highcharts, когда я сначала создавал массив серий, а затем добавлял его к параметрам конструктора на последнем шаге.

В вашем примере файл usdeur.js уже содержит инициализированный массив данных. Вам просто нужно передать его в массиве параметров. Ваш jsfiddle можно упростить до этого.

$(function() {
    var chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container'
        },
        series: [{
            name: 'New Series',
            data: usdeur
        }]
    });
});
person bejonbee    schedule 06.10.2011
comment
Я хочу начать с пустой серии. Я хочу динамически добавлять серии... В обычном HighCharts работает отлично... - person Naftali aka Neal; 06.10.2011
comment
Вот обновленная скрипта, в которой я делаю 2 серии: jsfiddle.net/maniator/vTjW8/9 - person Naftali aka Neal; 06.10.2011
comment
пример акций предоставлен в документах для добавления серия показывает, что диаграмма инициализируется серией, затем после инициализации добавляется вторая. Возможно, он не может справиться с инициализацией с пустым набором? - person bejonbee; 06.10.2011
comment
обычный график Highcharts можно запустить с пустыми сериями, почему нельзя также запустить график highstock? - person Naftali aka Neal; 06.10.2011
comment
Поскольку highcharts api 1.2.0 существует метод series[i].setData(). api.highcharts.com/highcharts#Series.setData - person Samuel; 04.08.2016
comment
@bejonbee, пожалуйста, помогите мне stackoverflow. ком/вопросы/43623840/ - person Jc John; 26.04.2017

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

person unexplored    schedule 29.02.2012

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

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

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

person kcvikander    schedule 05.02.2013
comment
Это подтолкнуло меня к выяснению проблемы, с которой я столкнулся (я неправильно понял [отсутствие] иерархии options и, следовательно, не инициализировал series - person Ruben Bartelink; 10.02.2016

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

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

// you can now add the dynamic data, eg

options.series[0].data.push([time, val]);
person ejectamenta    schedule 06.07.2015

Я добился динамического добавления временных рядов следующим образом:

часть 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/

person Muatik    schedule 06.12.2016

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

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

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

person backslashN    schedule 18.01.2018