플로트 그래프에 새로운 단일 점을 추가하려면 어떻게해야합니까?

Question

전 관측이 순차적으로 이루어지는 데이터 세트로 작업하고 있습니다. 새로운 데이터 포인트는 한 번에 하나씩 플롯 그래프에 배치해야합니다. 이것은 이 아니며 인 경우 (이 점은 previous question과 다름) 기존 점을 강조 표시 할 수 있습니다. 새로운 지점을 추가해야합니다.

데이터 세트에 .setData()를 사용하여 새 포인트를 추가 한 다음 .draw()를 사용하여 그래프를 다시 그리는 방법을 알고 있습니다. 그러나 수천 개의 포인트가있을 때 이것은 그래프를 완전히 여러 번 다시 그리기 때문에 엄청나게 느려집니다.

그래서 - 플롯에 점을 단순히 추가하는 방법이 있습니까? 또는, 내가 이것을 쓸 수 없다면 누구든지 플롯을 만들고 포인트를 순차적으로 추가 할 수있는 자바 스크립트 라이브러리에 대한 제안 사항이 있습니까?

Answer 1

Flot은 개별 시리즈를 다시 그리는 것을 지원하지 않습니다. 업데이트하면 전체 플롯을 다시 그려야합니다. jqPlot 및 HighCharts (addPoint 메소드)이이를 지원합니다. HighCharts는 이것으로 조금 더 손을 뻗었습니다. 포인트를 추가하면 필요한 부분을 다시 그리거나 재조정합니다. 는 플롯 축척 변경하는 경우 하나의 지점을 추가 할 가능성이

는

Here is a working example를 편집 (축 렌더러 등 ...) 다시 그리는 많이 발생할 수 있습니다. 핫 링크를 허용하지 않기 때문에 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); 
}); 

문서를 다시 읽으면 하이 차트가 전체 그림을 다시 그립니다. 나는 그것보다 더 세련된 줄 알았다.

Answer 2

I는이 같은 캔버스 자체를 액세스하고 직접 드로잉하는 것입니다 할 찾은 최고의 :

물론

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

이 당신에게 부분으로 지점에 대한 액세스를 허용하지 않습니다 그러나 일련의 플롯을 다시 그리지 않고 단순히 플롯에 많은 점을 추가해야하는 경우 이것이 그 방법 중 하나입니다.