当前位置: > > > Swift - 第三方图表库Charts使用详解10(折线图9:自动显示中间拐点标签、滑动居中)

Swift - 第三方图表库Charts使用详解10(折线图9:自动显示中间拐点标签、滑动居中)

九、自动显示中央拐点的 MarkerView 标签

1,效果图

(1)同前文一样,图表中有 100 条数据,通过左右拖动进行查看。
(2)不同的是,在左右拖动的过程中,会自动高亮选中显示区域最中间的一个数据点,并显示它的气泡标签。
          

2,样例代码

关于气泡标签组件的代码(BalloonMarker)可以参考我之前写的这篇文章:
import UIKit
import Charts

class ViewController: UIViewController {
    
    //折线图
    var chartView: LineChartView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //创建折线图组件对象
        chartView = LineChartView()
        chartView.frame = CGRect(x: 20, y: 80, width: self.view.bounds.width - 40,
                                 height: 250)
        chartView.delegate = self //设置代理
        self.view.addSubview(chartView)
        
        //设置交互样式
        chartView.scaleXEnabled = false //允取消X轴缩放
        chartView.scaleYEnabled = false //取消Y轴缩放
        chartView.doubleTapToZoomEnabled = false //双击缩放
        
        //生成100条随机数据
        var dataEntries = [ChartDataEntry]()
        for i in 0..<100 {
            let y = arc4random()%100
            let entry = ChartDataEntry.init(x: Double(i), y: Double(y))
            dataEntries.append(entry)
        }
        //这50条数据作为1根折线里的所有数据
        let chartDataSet = LineChartDataSet(values: dataEntries, label: "客流量(天)")
        //目前折线图只包括1根折线
        let chartData = LineChartData(dataSets: [chartDataSet])
        
        //设置折线图数据
        chartView.data = chartData
        
        //图表最多显示10个点
        chartView.setVisibleXRangeMaximum(10)
        //默认显示最后一个数据
        chartView.moveViewToX(99)
        //自动选中图表中央的数据点
        highlightCenterValue()
    }
    
    //自动选中图表中央的数据点
    func highlightCenterValue() {
        //获取中点坐标
        let x = Double(chartView.bounds.width/2)
        let selectionPoint = CGPoint(x: x, y: 0)
        //获取最接近中点位置的数据点
        let h = chartView.getHighlightByTouchPoint(selectionPoint)
        //将这个数据点高亮(同时自动调用 chartValueSelected 这个代理方法)
        chartView.highlightValue(h, callDelegate: true)
    }
    
    //显示MarkerView标签
    func showMarkerView(value:String){
        //使用气泡状的标签
        let marker = BalloonMarker(color: UIColor(white: 180/255, alpha: 1),
                        font: .systemFont(ofSize: 12),
                        textColor: .white,
                        insets: UIEdgeInsets(top: 8, left: 8, bottom: 20, right: 8))
        marker.chartView = self.chartView
        marker.minimumSize = CGSize(width: 80, height: 40)
        marker.setLabel("数据:\(value)")
        self.chartView.marker = marker
    }
}

extension ViewController: ChartViewDelegate {
    //图表通过手势拖动后的回调
    func chartTranslated(_ chartView: ChartViewBase, dX: CGFloat, dY: CGFloat) {
        //自动选中图表中央的数据点
        highlightCenterValue()
    }
    
    //折线上的点选中回调
    func chartValueSelected(_ chartView: ChartViewBase, entry: ChartDataEntry,
                            highlight: Highlight) {
        //显示该点的MarkerView标签
        self.showMarkerView(value: "\(entry.y)")
    }
}

附:滑动居中

1,问题描述

在图表滑动过程中,虽然都会自动高亮选中一个最接近中点的拐点。但当滑动停止时,这个高亮的拐点可能并不会停留在绝对正中间的位置。 
  

2,解决办法

要解决这个问题,我们只需要像前文一样,在 chartValueSelected() 这个代理方法中,手动修正它的位置,让它居中。
//折线上的点选中回调
func chartValueSelected(_ chartView: ChartViewBase, entry: ChartDataEntry,
                        highlight: Highlight) {
    //将该点居中(其实就是将该点左边第5个点移动道图表左侧)
    self.chartView.moveViewToAnimated(xValue: entry.x - 5, yValue: 0,
                                      axis: .left, duration: 1)
    //显示该点的MarkerView标签
    self.showMarkerView(value: "\(entry.y)")
}
评论0