iOS 使用Chart图标库（二）

最新推荐文章于 2025-10-02 10:27:22 发布

原创

最新推荐文章于 2025-10-02 10:27:22 发布 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ios #图表 #chart

本文介绍了如何利用iOS的Chart库实现类似蚂蚁财富收益曲线图的交互效果，包括利用ChartViewDelegate实现点击高亮显示，通过手势识别进行延迟消失的处理，并讨论了与其它手势的共存策略。

本身chart这个图标库很强大，同时支持iOS和安卓，可以很好的保证两端的统一性，chart库包含折线，饼状图，柱状图等主流图标。项目本身也一直在使用这个图标。近期的需求是模仿蚂蚁财富收益曲线图的交互效果。而且chart本身在iOS端有交互效果，所以需要对其进行“改造”。下面就是实现效果。PS：安卓端可以直接通过 ChartGestureListener 去监听手势交互 setOnChartValueSelectedListener(this); setOnChartGestureListener(this);，
点击，长按，拖拽手抬起后1s选中消失，并且不影响下次查看

一、chart本身的手势交互
其实本身chartView 自身已经添加了手势，通过chartView.gestureRecognizers 可以查看，或者是 BarLineChartViewBase.swift 文件73行对应 selector 在507行

    internal var _tapGestureRecognizer: NSUITapGestureRecognizer!
    internal var _doubleTapGestureRecognizer: NSUITapGestureRecognizer!
    #if !os(tvOS)
    internal var _pinchGestureRecognizer: NSUIPinchGestureRecognizer!
    #endif
    internal var _panGestureRecognizer: NSUIPanGestureRecognizer!

其中以点击事件为例，在点击的时候首先判断 data 是否为空，这个肯动都没问题。其次就是手势是否可用。也过。
然后就是判断用户是否允许高亮显示，对应的属性是 HighLightPerTapEnabled，其实这里在data 初始化的时候可以设置