Charts图表 slider滑动和图表联动(Demo)
2022-06-06 本文已影响0人
生命不止运动不息
当图表宽度过长时,就需要滑动,Charts 是支持图表直接滑动的。但为了效果,在图表下方加了一个滑块,可以通过滑块滑动,也可以滑动图表,更直观。
效果图
滑动滑块

滑动图表

实现过程:
图表和滑块封装到一个视图
-
先说图表滚动时,如何设置滑块的值。
通过chartview的以下delegate可以收到图表滚动的回调,通过viewPortHandler属性,可以拿到已经偏移的x值,即tranX
根据图表的最小缩放比例(minScaleX),可以计算出图表总的x偏移量
x的最大偏移量
知道了总的偏移量,也知道了 当前的x偏移,那么就可以计算出滑块的值了。

- 滑块滑动时,如何设置图表的偏移量
这个比较麻烦,设置x的偏移,只给了一个通过设置移动到某点的函数,来实现横移
思路:根据滑块的值,计算出图表将要的偏移x, 根据已有的x偏移,求出应该偏移的距离。 根据距离设置将要移动到的点。 刷新视图。
请看滑动滑块时的代码:

Demo示例
链接: https://pan.baidu.com/s/19mkPabahiypIjjXk0Bpl7g?pwd=e7ve 提取码: e7ve