JavaScript 缩放图表功能答案

【问题标题】：JavaScript Zooming Chart functionJavaScript 缩放图表功能
【发布时间】：2014-06-18 11:36:00
【问题描述】：

我编写了这段 JavaScript 代码来跟踪折线图，完成后我需要修改我的代码以允许通过鼠标选择和平移画布进行缩放。

function zoom(){
    startindex = document.getElementById("startpoint").selectedIndex;
    endindex= document.getElementById("endpoint").selectedIndex;
    var newlabels=oldlabels.slice(startindex, endindex);
    var newdata=oldDatas.slice(startindex,endindex);
    data.labels= newlabels;
    data.datasets.data=newdata;
    myChart = new Chart(context).Line(data);
 }

the link to my chart

【问题讨论】：

标签： javascript jquery html5-canvas zooming linechart

【解决方案1】：

了解 context.translate 和 context.scale 方法。

了解这些可以让您平移和缩放。

缩放的基础是：

平移到您要放大的点
将画布缩放到所需的缩放级别
擦除画布
在 -chartWidth/2 和 -chartHeight/2 处重新绘制图表。

Pan 更简单：

按您要平移的 x 距离平移
擦除画布
在 0,0 处重绘图表

【讨论】：