我已经建立了一个使用Chart.js和缩放插件的折线图。它都工作得很好,平移和缩放很好,但是,图表总是加载完整的数据范围,我希望它开始“放大”的数量。我试图调整设置,但无济于事。任何指针在这个阶段将不胜感激。
bvpmtnay1#
ChartJS没有内置setZoom方法。总结ChartJS缩放插件限制的问题:https://github.com/chartjs/chartjs-plugin-zoom/issues/82这里是一个黑客的方式发送鼠标滚轮事件的图表和缩放:
let e = document.createEvent('MouseEvents') e.initEvent('wheel', true, true) e.deltaY = -10e20; setTimeout(() => { for(let i=0;i<70;i++) canvas.dispatchEvent(e); }, 500);
希望这个有用。
yx2lnoni2#
终于想通了。在缩放选项部分,当与缩放功能一起使用时,您需要添加一个最小整数,这样仍然可以在画布之外呈现图形,准备平移。
scales: { xAxes:[ { type: 'time', time: { min: '2', tooltipFormat: 'll', displayFormats: { quarter: 'MMM YYYY', } },
只要你的“类型”是时间,这对我很有效。
a6b3iqyw3#
下面是对上述部分解决方案的完整回答。我假设我们在一个基于时间的图表中有几年的数据。在一个大图表中看到太多的数据。所以我们将打开一个图表,只显示最近一年的数据。您需要为**比例和缩放插件设置图表选项。
scales: { x: { type: "time", min: oneYearAgo, }
这将使图表打开并显示最近一年的数据。您不需要设置最大值,它将默认为您的最新数据。你应该会发现你的图表打开时放大到了一年的数据!但是你将不能缩放或平移...还没有!
zoom: { zoom: { wheel: {enabled: true,}, mode: 'x', }, pan: { enabled: true, mode: 'x', }, limits: { x: { min: oldestDataDate, max: newestDataDate }, }, },
(我给出了完全缩放/平移选项,仅用于控制水平时间轴)这也将加载您的图表快得多。
3条答案
按热度按时间bvpmtnay1#
ChartJS没有内置setZoom方法。总结ChartJS缩放插件限制的问题:https://github.com/chartjs/chartjs-plugin-zoom/issues/82
这里是一个黑客的方式发送鼠标滚轮事件的图表和缩放:
希望这个有用。
yx2lnoni2#
终于想通了。
在缩放选项部分,当与缩放功能一起使用时,您需要添加一个最小整数,这样仍然可以在画布之外呈现图形,准备平移。
只要你的“类型”是时间,这对我很有效。
a6b3iqyw3#
下面是对上述部分解决方案的完整回答。
我假设我们在一个基于时间的图表中有几年的数据。在一个大图表中看到太多的数据。所以我们将打开一个图表,只显示最近一年的数据。
您需要为**比例和缩放插件设置图表选项。
这将使图表打开并显示最近一年的数据。您不需要设置最大值,它将默认为您的最新数据。
你应该会发现你的图表打开时放大到了一年的数据!但是你将不能缩放或平移...还没有!
(我给出了完全缩放/平移选项,仅用于控制水平时间轴)
这也将加载您的图表快得多。