我正在使用Chartjs 4.0.1和chartjs-plugin-zoom 2.0.0,我的图表看起来像这样:
我已经将拖动选项设置为启用,以便用户可以绘制一个矩形来进行放大。我还将缩放模式设置为“x”。因此,用户只能在x轴上进行放大,而不能在y轴上进行放大。现在,我想限制用户可以放大的范围。到一个月的时间跨度。我已经设法做到这一点时,使用鼠标滚轮放大。但我不知道如何实现同样的使用拖动选项。我将其配置为:
drag:{
enabled: true,
backgroundColor:'rgba(180,180,180,0.4)',
threshold: 25,
}
阈值似乎是我最好的选择。然而,它是以像素为单位的,它只说明了绘制的矩形必须有多宽才能发生缩放。我已经使用onZoomStart回调函数来检查图表放大了多远,并基于此决定用户是否可以放大更多。但显然,该回调函数只在通过鼠标滚轮缩放时执行,而在拖动时不执行。所以我想我需要能够动态地设置拖动对象的阈值,有人知道怎么做吗?
我还想知道,是否有可能改变边界颜色的矩形时,拖动显示用户,如果它是足够大的滚动发生?
1条答案
按热度按时间sy5wg1nm1#
标准的解决方案似乎是设置一个
limits:{x:{minRange:...}}
选项。我花了一段时间才意识到应该在哪里插入这个选项。下面是一个代码片段,其中包含一些类似于您的数据,并且
minRange
设置为90天(因此我可以跳过调整tick间隔)。此外,如果间隔小于90天,还有一个将拖动矩形的颜色更改为红色的黑客。它可以很容易地适应小于所需间隔时完全拒绝缩放,而不是当前的标准行为,即调整(扩展)间隔,直到它等于
minRange
。在this fiddle中相同。