Charts之构建LineChart

Charts是什么，不解释，既然你找到我的文章，那肯定是要使用它，好的，我们马上开始。

1.确定自己的需求

首先，要确定自己的需求，比如我的需求就是这样的：

image.png

• 1.x轴显示日期+时间
• 2.y轴显示值，虽说图上没有
• 3.内容显示折线图
• 4.点上方显示值，虽说图上没有
• 5.只能左右拖动，并且不能放大缩小

至于上面的日期选择和左右那两个按钮，就不在本文谈论范围内了。

2.使用LineChart

2.1创建一个基本的LineChart

    var chart: LineChartView!

    override func viewDidLoad() {
        super.viewDidLoad()
        chart = LineChartView(frame: CGRect(x: 10, y: 100, width: UIScreen.main.bounds.width-20, height: 400))
        // y轴最大值
        chart.leftAxis.axisMaximum = 10
        // y轴最小值
        chart.leftAxis.axisMinimum = 0
        // x轴最小值
        chart.xAxis.axisMinimum = 0
        // x轴最大值
        chart.xAxis.axisMaximum = 10
        // 数据1
        let d1 = ChartDataEntry(x: 5, y: 5)
        // 数据2
        let d2 = ChartDataEntry(x: 6, y: 7)
        // 数据集合1
        let s1 = LineChartDataSet(entries: [d1, d2])
        // 生成chart需要的数据
        chart.data = LineChartData(dataSet: s1)
        view.addSubview(chart)
    }

运行结果：

image.png

嗯。。。。这完全不满足我的需求嘛，需要修改修改。

2.2去掉右边y轴

chart.rightAxis.enabled = false

好了，消失了

image.png

2.3去掉内部的方格线

        // x轴
        chart.xAxis.drawGridLinesEnabled = false
        // y轴
        chart.leftAxis.drawGridLinesEnabled = false

image.png

2.4x轴到下边来

chart.xAxis.labelPosition = .bottom

image.png

2.5去掉左下角图例描述

chart.legend.enabled = false

image.png

2.6去掉点上的圆圈

s1.drawCirclesEnabled = false

image.png

2.7去掉点被点击后的指示线

        s1.drawVerticalHighlightIndicatorEnabled = false
        s1.drawHorizontalHighlightIndicatorEnabled = false

2.8限制只能左右拖动，不能放大缩小

• 1.限制不能放大缩小，只能左右拖动

        // Y轴不能拖动
        chart.dragYEnabled = false
        // 不能缩放
        chart.setScaleEnabled(false)
        // 不能使用手势缩放
        chart.pinchZoomEnabled = false
        // 不能使用双击放大
        chart.doubleTapToZoomEnabled = false

• 2.使其能够左右拖动

// 设置X轴的缩放倍数即可
chart.setScaleMinima(2, scaleY: 1)

image.png

貌似有点满足需求了，但是x轴上为什么是小数呢，我们要改改。

2.9设置x轴间隔

chart.xAxis.granularity = 1

image.png

2.10设置x轴为时间戳

首先，修改x轴的最大值与最小值

chart.xAxis.axisMinimum = Date().timeIntervalSince1970-12*3600
chart.xAxis.axisMaximum = Date().timeIntervalSince1970+12*3600

其次修改x轴间隔

chart.xAxis.granularity = 3600

接下来修改点的值，暂时修改成当前时间和后一小时

let d1 = ChartDataEntry(x: Date().timeIntervalSince1970, y: 5)
let d2 = ChartDataEntry(x: Date().timeIntervalSince1970+3600, y: 7)

我们新建一个类，要遵循IAxisValueFormatter协议，该协议只有一个方法，func stringForValue(_ value: Double, axis: AxisBase?) -> String用于设置轴线上的值显示方式。

class DateValueFormatter: NSObject, IAxisValueFormatter {
    private let dateFormatter = DateFormatter()
    
    override init() {
        super.init()
        dateFormatter.dateFormat = "MM-dd\nHH:mm"
    }
    
    func stringForValue(_ value: Double, axis: AxisBase?) -> String {
        return dateFormatter.string(from: Date(timeIntervalSince1970: value))
    }
}

把该类新建一个实例，赋值给x轴

chart.xAxis.valueFormatter = DateValueFormatter()

跑起来看看：

image.png

好了，基本上能用了。