javascript Chart.js缩放开始于放大

x8diyxa7  于 2023-01-01  发布在  Java
关注(0)|答案(3)|浏览(190)

我已经建立了一个使用Chart.js和缩放插件的折线图。它都工作得很好,平移和缩放很好,但是,图表总是加载完整的数据范围,我希望它开始“放大”的数量。我试图调整设置,但无济于事。任何指针在这个阶段将不胜感激。

bvpmtnay

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

希望这个有用。

yx2lnoni

yx2lnoni2#

终于想通了。
在缩放选项部分,当与缩放功能一起使用时,您需要添加一个最小整数,这样仍然可以在画布之外呈现图形,准备平移。

scales: {
         xAxes:[
                 {
                    type: 'time',
                    time: {
                    min: '2',
                    tooltipFormat: 'll',
                    displayFormats: {
                    quarter: 'MMM YYYY',
                }
            },

只要你的“类型”是时间,这对我很有效。

a6b3iqyw

a6b3iqyw3#

下面是对上述部分解决方案的完整回答。
我假设我们在一个基于时间的图表中有几年的数据。在一个大图表中看到太多的数据。所以我们将打开一个图表,只显示最近一年的数据。
您需要为**比例和缩放插件设置图表选项。

  • 首先 *,我们将刻度设置为最小值,即一年前的日期。(如上面的@user372531答案)
scales: {
      x: {
          type: "time",
          min: oneYearAgo, 
       }

这将使图表打开并显示最近一年的数据。您不需要设置最大值,它将默认为您的最新数据。
你应该会发现你的图表打开时放大到了一年的数据!但是你将不能缩放或平移...还没有!

  • 其次 *,在缩放插件选项中设置最宽限制:
zoom: {
        zoom: {
          wheel: {enabled: true,},
          mode: 'x',   
        },
        pan: {
          enabled: true,
          mode: 'x',
        },
        limits: {
          x: { min: oldestDataDate, max: newestDataDate },
        },
      },

(我给出了完全缩放/平移选项,仅用于控制水平时间轴)
这也将加载您的图表快得多。

相关问题