我正在用 CanvasJS 渲染一个图表。它是动态生成的。在我停止生成之后(或在指定时间之后),我从该图像生成。
现在我想加载该图像并生成图表。所以......我再次生成相同的数据,但这次是数据的完整(大部分缩放)图片。- 这应该作为一个快速的概述。
这就是我的基本做法:(动态数据)
<script type="text/javascript">
window.onload = function ()
{
var dps = []; // dataPoints
var chart = new CanvasJS.Chart("chartContainer",{
zoomEnabled:true,
title :{
text: "Live Random Data"
},
data: [{
type: "stackedColumn",
dataPoints: dps
}]
});
var xVal = 0;
var yVal = 100;
var updateInterval = 100;
var dataLength = 500; // number of dataPoints visible at any point
var arr = [];
var updateChart = function (count) {
count = count || 1;
// count is number of times loop runs to generate random dataPoints.
for (var j = 0; j < count; j++) {
yVal = yVal + Math.round(5 + Math.random() *(-5-5));
dps.push({
x: xVal,
y: yVal
});
arr.push({
x: xVal,
y: yVal
});
xVal++;
};
if (dps.length > dataLength)
{
dps.shift();
}
chart.render();
};
// generates first set of dataPoints
updateChart(dataLength);
// update chart after specified time.
var d= setInterval(function(){updateChart()}, updateInterval);
$("#test").click(function () {
console.log("baa");
clearInterval(d);
});
$("#show").click(function () {
console.log("baa");
dps=[];
dps.push(arr);
chart.render();
});
}
</script>
http://canvasjs.com/editor/?id=http://canvasjs.com/example/gallery/dynamic/realtime_line/
现在,如果我正在缩放或平移“实时数据”或图像:
我想要这两者之间的同步。如果我在图像上进行缩放或平移,我只想看到一个不透明的矩形,并且必须真正缩放动态数据。
一个同步。示例在这里http://jsfiddle.net/canvasjs/m5jgk5sg/,但是如何使用图像来做到这一点?你们中有人有想法或如何解决吗?