Невозможно добавить точку в область старшей диаграммы

Question

Невозможно добавить точку в область старшей диаграммы

0

Я использую highchart js для визуализации моих данных, категория - это массив временных меток (в миллисекундах), он работает хорошо, однако мне нужно сделать его в режиме реального времени, обновлять каждые 20 секунд.

Я попытался использовать функцию addPoint, предоставляемую highchart, чтобы добавить новую точку в текущий график, я получил сообщение об ошибке www.highcharts.com/errors/19, он сказал, что

Слишком много тиков

Эта ошибка возникает, если вы пытаетесь применить слишком много тиков к оси, особенно когда вы добавляете больше тиков, чем длина пикселя оси. На практике не имеет смысла добавлять клещи настолько плотно, что их нельзя отличить друг от друга. Одной из причин ошибки может быть то, что вы установили tickInterval, который слишком мал для диапазона значений данных. В общем, tickPixelInterval - лучший вариант, так как он будет обрабатывать это автоматически. Другое дело, если вы попытаетесь установить категории на оси datetime, что приведет к тому, что Highcharts попытаются добавить один тик на каждую миллисекунду с 1970 года.

Это моя скрипка http://jsfiddle.net/ndkhoiits/5jh93/

chart: {
    type: 'area',
    events: {
        click: function () {
            var series1 = this.series[0];
            var series2 = this.series[1];
            // Add more 20 seconds
            var x = series1.points[series1.points.length - 1].category + 20 * 1000;
            //error here
            series1.addPoint([x, 1000], true, true);

        }
    }
},

Пожалуйста, помогите проверить, как я могу добавить новую точку в диаграмму, более того, я думаю, что мы должны использовать тип datetime для xAxis, но я не знаю, как использовать, если вы можете, пожалуйста, дать мне решение.

Khoi Nguyen 20 март 2014, в 09:01

Источник

Теги:

javascript

jquery

highcharts

2 ответа

Ещё вопросы

Paweł Fus · Answer 1 · 2014-03-20T10-07-00.000Z

Проблема в том, что вы смешаете категоризированный xAxis с datetime xAxis.

Категории полезны при отображении некоторых категорий на xAxis. Как и фрукты, автомобили, браузеры и т.д.

В вашем случае вы должны использовать дату и время с начала. Вы должны изменить:

удалить категории из xAxis

подключайте categories с site1 и site2, например:

for(var i = 0; i < site1.length; i++){
   site1[i] = [ categories[i], site1[i] ];
   site2[i] = [ categories[i], site2[i] ];
}

Демо-версия: http://jsfiddle.net/5jh93/1/

user2849371 · Answer 2 · 2014-03-20T06-17-00.000Z

Я прошел через код ur от jsfiddle и кажется, что вы написали весь код в одном JS. Я также использовал highcharts в нашем приложении и прилагал много усилий для обеспечения значений thruput (загрузка/загрузка через каждые 2 секунды). То, что мы сделали, это использование объектного литерала. Мы поместили наш код в один js и что js содержит несколько fucntions, таких как init (для инициализации значений и создания объекта диаграммы с использованием нового, т.е. динамически).

  var myplot = {
    init : function() {    }
    });
    chart = new Highcharts.Chart({
    //here u can write the code that u need to draw with series object
    }
drawmyplot : function(val1,val2){
var x = series1.points[series1.points.length - 1].category + 20 * 1000;
series1.addPoint([x, val1], false, true); 
series2.addPoint([x, val2], false, true);
$(".firstValue").text(val1 * 1000,1);
$(".secondValue").text(val2 * 1000,1);   
}

Затем вы можете инициализировать obejct ur myplot из другого js (например, функцию init) и вызвать ваши последующие функции с помощью myplot-объекта. Надеюсь, это поможет вам.

Regds

Не могли бы вы помочь мне создать еще один jsfiddle из вашего предложения?
Я добавил одну функцию. pls remove // Добавить еще 20 секунд var x = series1.points [series1.points.length - 1] .category + 20 * 1000; // ошибка здесь series1.addPoint ([x, 1000], true, true); Добавьте этот код в функцию и вызовите эту функцию из другого js, как показано ниже myplot.init (); получить значения val1 и val2 и затем вызвать myplot.drawmyplot (val1, val2);