使用缩放插件在 chart.js 中获取当前缩放信息

【问题标题】：Have the current zoom information in chart.js with zoom plugin使用缩放插件在 chart.js 中获取当前缩放信息
【发布时间】：2019-08-12 07:27:40
【问题描述】：

我正在尝试设置缩放的开始日期和结束日期，而不是图表的开始最小值和最大值。我没有发现问题。有人可以帮忙吗？它在 VueJS 中

plugins: {
 datalabels: {
  display: false
 },
 zoom: {
  zoom: {
   enabled: true,
   drag: true,
   mode: "x",
   sensitivity: 100,
   speed: 10,
   onZoom: this.onZoom
  }
 }
}



onZoom({ chart }) {
      console.log(chart)
      const start = chart.scales.time.min; // I have to change this
      const end = chart.scales.time.max; // I have to change this
      console.log(start, end)
      this.$emit("interval", { start, end });
    }

例如，我的图表从 12:00 开始，到 16:00 结束。我在 14:00 到 15:00 之间点击，我想获取这些值并将其提供给我的父母。

【问题讨论】：

我已经找到方法了，谢谢
然后更新您的问题并向其他人展示您是如何做到的！
请展示你是如何做到的

标签： vue.js chart.js chartjs-plugin-zoom

【解决方案1】：

我不认为你可以。 chartjs 缩放插件仅修改缩放轴的最小/最大设置。如果您知道起始 min/max 值，我猜您可以使用它来确定缩放因子。该插件在内部为resetZoom 函数存储min/max，但我认为您无权访问它。

如果您像我一样只想将相同的缩放应用到另一个（或在我的情况下为新图表）图表，也许这会对您有所帮助（适用于 chart.js 3/chartjs-plugin-zoom 1.1）：

const options = chart?.scales.x.options; // store the options of the old chart
chart?.clear(); // tear down the old chart
chart?.destroy();
chart = renderChart(canvas, data); // create a new one

if(options) {
  chart.zoom({x: 1}); // make sure internal structures of the zoom plugin are set up
  chart.scales.x.options.min = options.min; // restore the zoom
  chart.scales.x.options.max = options.max;
  chart.update(); //rerender the chart
}

【讨论】：