swift tabBar 图片颜色 swift 图表库

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

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

}