Swift - 第三方图表库Charts使用详解9（折线图8：显示指定区域数据、选中居中）

2018-08-06 发布：hangge 阅读：6621

八、初始时显示指定部分的数据

1，效果图

（1）当图表中的数据比较多时，如果一次性全部显示出来会十分拥挤，难以阅读。

（2）这种情况我们可以让图表自动进行缩放。比如一次最多显示 10 个点的数据，这里我默认显示最后的 10 条数据。

（3）其他数据可以通过左右拖动图表进行查看。

2，实现原理

（1）使用图表的 setVisibleXRangeMaximum() 方法设置 X 轴最大的显示范围。

（2）使用图表的 moveViewToX() 方法将显示区域移动到指定位置（索引）

3，样例代码

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

附：拐点选中后自动居中

1，效果图

当我们点击折线上的某个拐点时，该点会自动移动到显示区域的中央，同时移动过程中还有动画效果。

2，样例代码

import UIKit
import Charts

class ViewController: UIViewController, ChartViewDelegate {
    
    //折线图
    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)
    }
    
    //折线上的点选中回调
    func chartValueSelected(_ chartView: ChartViewBase, entry: ChartDataEntry,
                            highlight: Highlight) {
        //将该点居中（其实就是将该点左边第5个点移动道图表左侧）
        self.chartView.moveViewToAnimated(xValue: entry.x - 5, yValue: 0,
                                          axis: .left, duration: 1)
    }
}