Как я могу добавить новую единственную точку на график? - PullRequest
Новая
       31

Как я могу добавить новую единственную точку на график?

2 голосов
/ 04 января 2012

Я работаю с набором данных, где наблюдения получены последовательно.Новые точки данных должны быть размещены на графике с плавающей запятой, по одной за раз.Это не случай, когда (в отличие от предыдущего вопроса ) я могу просто выделить существующую точку;Мне нужно добавить новую точку.

Я знаю, как добавить новую точку в ряд данных с помощью .setData (), а затем перерисовать график с помощью .draw ();однако, когда у меня есть тысячи точек, это сильно замедляет процесс, потому что тогда мне приходится полностью перерисовывать график несколько раз в секунду.

Итак, есть ли способ просто добавить точку на график?Или, если я не могу использовать flot для этого, есть ли у кого-нибудь предложения по библиотекам javascript, которые позволили бы мне создать график и последовательно добавлять точки?

Ответы [ 2 ]

3 голосов
/ 04 января 2012

Flot не поддерживает перерисовку отдельных серий. При обновлении он ожидает перерисовать весь сюжет. Оба jqPlot и HighCharts (метод addPoint) поддерживают это. С HighCharts это немного сложнее, вы добавляете точку, она будет перерисовывать / масштабировать то, что нужно. Добавление одной точки может потенциально вызвать много перерисовки, если это изменяет масштаб графика (визуализация оси и т. Д.)

редактирует

Вот рабочий пример . Вам придется кэшировать файлы jqPlot в вашем браузере, поскольку они не позволяют хотлинкинг. 

someData = [[[]]];

someChart = $.jqplot('chart1', someData, {
    axes: {
        xaxis: {max:10,min:0},
        yaxis: {max:10,min:0}
    }
});

$('#target').click(function() {
  seriesObj = someChart.series[0];
  seriesObj.data.push([Math.random() * 10, Math.random() * 10]);
  someChart.drawSeries({},0);
});

Перечитывая документы, вы правы, что Highcharts перерисовывает весь сюжет. Я думал, что это было более изысканным, чем это.

1 голос
/ 24 января 2012

Лучшее, что я нашел для этого, - это доступ к самому холсту и рисование непосредственно на нем, например: 

// Get the axis, so that we can figure out what canvas coordinates
// correspond to our plot coordinates
xAxis = plot.getXAxes()[0];
yAxis = plot.getYAxes()[0];
// determine how much space flot left on the edges of the graphs
offset = plot.getPlotOffset();

// get the context, so that we can draw on the canvas           
ctx = plot.getCanvas().getContext("2d");
// Convert our coordinates to canvas coordinates
x1 = xAxis.p2c(plotX) + offset.left;
y1 = yAxis.p2c(plotY) + offset.top;

// draw a translucent, red rectangle        
ctx.fillStyle = "rgba(200,0,0,.1)";  
ctx.fillRect (x1, y1, 5, 5);

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

...