Javascript 画布与图像同步平移

我正在用CanvasJS渲染一个图形。 它是动态生成的。 在我停止生成之后（或在指定的时间之后），我从该图像生成一个图像

现在我想加载该图像并生成图形。所以我再次生成相同的数据，但这次是完整的（大部分是缩放的）数据图片。-这将作为一个快速概述

我基本上就是这样做的：（动态数据）

window.onload=函数（）
{
var dps=[]；//数据点
var chart=new CanvasJS.chart（“chartContainer”{
可缩放：对，
标题：{
文本：“实时随机数据”
},          
数据：[{
类型：“stackedColumn”，
数据点：dps
}]
});
var xVal=0；
var-yVal=100；
var updateInterval=100；
var dataLength=500；//任意点可见的数据点数量
var-arr=[]；
var updateChart=函数（计数）{
计数=计数| | 1；
//count是循环运行以生成随机数据点的次数。
对于（var j=0；jdataLength）
{
dps.shift（）；
}           
chart.render（）；
};
//生成第一组数据点
updateChart（数据长度）；
//在指定时间后更新图表。
var d=setInterval（函数（）{updateChart（）}，updateInterval）；
$（“#测试”）。单击（函数（）{
控制台日志（“baa”）；
间隔时间（d）；
});
$（“#显示”）。单击（函数（）{
控制台日志（“baa”）；
dps=[]；
dps.push（arr）；
chart.render（）；
});
}            

现在，如果我正在缩放或平移“实时数据”或图像：

我想在这两者之间进行同步。如果我在图像上缩放或平移，我只想看到一个不透明的矩形，动态数据必须真正缩放

同步。这里有一个例子，但如何使用图像来实现这一点？

---

你们中有人有想法或如何解决问题吗

我的问题是不可理解还是太难做到？

     <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>