JavaScript缩放图表功能
我编写了这个JavaScript代码来跟踪折线图,完成后,我需要修改代码以允许通过鼠标选择和平移画布进行缩放JavaScript缩放图表功能,javascript,jquery,html5-canvas,zooming,linechart,Javascript,Jquery,Html5 Canvas,Zooming,Linechart,我编写了这个JavaScript代码来跟踪折线图,完成后,我需要修改代码以允许通过鼠标选择和平移画布进行缩放 function zoom(){ startindex = document.getElementById("startpoint").selectedIndex; endindex= document.getElementById("endpoint").selectedIndex; var newlabels=oldlabels.slice(startinde
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);
}
学习context.translate和context.scale方法。 了解这些将使您能够平移和缩放 缩放的基础是:
- 平移到要放大的点
- 将画布缩放到所需的缩放级别
- 抹去画布
- 在-chartWidth/2和-chartHeight/2处重新绘制图表李>
- 按要平移的x距离平移
- 抹去画布
- 在0,0处重新绘制图表