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

九、自动显示中央拐点的 MarkerView 标签
1，效果图
（1）同前文一样，图表中有 100 条数据，通过左右拖动进行查看。
（2）不同的是，在左右拖动的过程中，会自动高亮选中显示区域最中间的一个数据点，并显示它的气泡标签。

2，样例代码
关于气泡标签组件的代码（BalloonMarker）可以参考我之前写的这篇文章：
https://www.hangge.com/blog/cache/detail_2127.html

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)”)
}

原文出自：www.hangge.com 原文链接：https://www.hangge.com/blog/cache/detail_2135.html