ChartJs：如何按时间值（而不是像素）以编程方式平移

Question

我正在使用 chartJs 3.6.1；和 chartjs-plugin-zoom 1.2.1（但我认为这并不重要 :)）我有 2 个时间序列折线图，当我通过拖放平移一个图表时，我也想 move/pan 另一个图表！

为此，我为 graphA - graphA.zoom.pan.enabled=true 启用了 zoom/pan，并且它具有 onPanComplete 功能，当我想运行平移 graphB 时。 缩放没问题 - 它有 graphA.getZoomLevel() 功能；这样我就可以使用 graphB.zoom(graphA.getZoomLevel()). * 但是平移是怎么回事？ 编辑： *不，这不好。它使用不同的比例，某种指数...比如...1.0 表示 1.0，但 1.5x 表示 ~1.7x 缩放，1.98x 表示 50x 缩放，2x 表示无限（即 80.000x 缩放）

到目前为止，我可以获得可见区域：chart.scales.xAxes.min（...和最大值）- 但它会返回当前可见的时间值！ pan() 函数等待像素：graphB.pan(100, undefined, undefined)，而且它只是当前位置的偏移量，而不是绝对位置集。我可以说“将图形向左移动 1 分钟”吗？我看到了某种“比例”设置，但我不明白它是如何工作的……或者最好是说：“将图表从 2022.03.01 12:00:00 开始”！或者.. 作为解决方法，我可以计算像素，但为此我需要知道图表数据的宽度，但它是一个很大的“canvas”，无法获取。

Answer 1

您可以在 x 轴上使用 getPixelForValue 方法。您在 2 个时间点执行此操作，从中您知道它们彼此之间的距离有多远。然后您可以计算出在您想要的任何时间范围内移动图表所需的像素数。

编辑：
如果你只想要 chartArea 的宽度，你可以这样做：

const chart = new Chart(ctx, config);
const chartAreaWidth = chart.chartArea.width;

Answer 2

终于找到解决办法了！是的:))

您可以通过添加最小值和最大值来缩放！根本不需要像素！使用zoomScale方法！ zoomScale(graphB, 'xAxes', {min: graphA.scales.xAxes.min, max: graphA.scales.xAxes.max}, 'none'); （规模对我来说是'xAxes'，我不知道为什么官方页面上的示例说一个简单的'x'）

ChartJs：如何按时间值（而不是像素）以编程方式平移

ChartJs: How to pan programmatically by time values (instead of pixels)

javascript

chart.js

chartjs-plugin-zoom