我使用的是图表3.6.1;和chartjs-plugin-zoom 1.2.1(但我认为这不是真正的问题:))我有2个时间序列折线图,当我通过拖放平移一个图表,我想移动/平移其他图表以及!
为此,我启用了graphA的缩放/平移-graphA.zoom.pan.enabled=true
,它有onPanComplete
函数,当我想运行graphB的平移时。* 缩放没有问题-它有graphA.getZoomLevel()
函数;所以我可以使用graphB.zoom(graphA.getZoomLevel())
。* * 但是平移是什么情况?**编辑:***不,这不好。它使用不同的比例,某种指数......比如...... 1.0表示1.0,但1.5倍表示~ 1.7倍变焦,1.98倍表示50倍变焦,2倍表示无限(即80.000倍变焦)
到目前为止,我可以得到可见的面积:chart.scales.xAxes.min
(... and max)-但它返回的是当前可见的时间值!pan()
函数等待像素:graphB.pan(100, undefined, undefined)
,而且它只是当前位置的偏移量,而不是绝对位置集。我能说“将图形左移1分钟”吗?我看到了某种“比例”设置,但我不明白它是如何工作的...或者最好的方法是说:“移动图表,使其从2022.03.01 12:00:00开始”!或者..作为一种解决方法,我可以计算像素,但为此我需要知道图表数据的宽度,但它是一个很大的“画布”,无法获得。
3条答案
按热度按时间mepcadol1#
您可以在x轴上使用
getPixelForValue
方法。您可以对两个时间点执行此操作,并知道它们彼此之间的距离。然后您可以计算在任何所需的时间范围内移动图表所需的像素数。编辑:
如果您只需要chartArea的宽度,可以这样做:
mjqavswn2#
我终于找到了解决办法!是啊:))
你可以通过添加最小值和最大值来缩放!根本不需要像素!使用
zoomScale
方法!zoomScale(graphB, 'xAxes', {min: graphA.scales.xAxes.min, max: graphA.scales.xAxes.max}, 'none');
(对我来说比例是'xAxes',我不知道为什么官方页面上的例子说一个简单的'x')ahy6op9u3#
@cncDAni3的answer解决方案对我很有效。
在React with react-chart-js 2中,使用
ref
: