1

我正在尝试设置缩放的开始日期和结束日期，而不是图表的开始最小值和最大值。我没有发现问题。有人可以帮忙吗？它在 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 之间单击，我想获取这些值并将其提供给我的父母。

4

1 回答 1

0

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

如果您像我一样只想将相同的缩放应用到另一个（或在我的情况下为新图表）图表，也许这会对您有所帮助（适用于 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
}
于 2021-06-27T17:36:15.087 回答