Charts图表 slider滑动和图表联动（Demo）

当图表宽度过长时，就需要滑动，Charts 是支持图表直接滑动的。但为了效果，在图表下方加了一个滑块，可以通过滑块滑动，也可以滑动图表，更直观。

效果图

滑动滑块

slider.gif

滑动图表

charts.gif

实现过程：

图表和滑块封装到一个视图

• 先说图表滚动时，如何设置滑块的值。
  通过chartview的以下delegate可以收到图表滚动的回调，通过viewPortHandler属性，可以拿到已经偏移的x值，即tranX
  根据图表的最小缩放比例（minScaleX），可以计算出图表总的x偏移量

  
  x的最大偏移量

知道了总的偏移量，也知道了 当前的x偏移，那么就可以计算出滑块的值了。

滑动回调

• 滑块滑动时，如何设置图表的偏移量
  这个比较麻烦，设置x的偏移，只给了一个通过设置移动到某点的函数，来实现横移

思路：根据滑块的值，计算出图表将要的偏移x, 根据已有的x偏移，求出应该偏移的距离。 根据距离设置将要移动到的点。 刷新视图。

请看滑动滑块时的代码：

滑动滑块

Demo示例

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