Swift - 第三方图表库Charts使用详解3（折线图2：线条、拐点的样式设置）

二、线条、折点的样式设置
1，修改线条的颜色、大小
（1）效果图
下面将折线改成橙色（其对应的图例颜色也会自动改变）
同时将折线加粗（从默认的 1 改成 2）

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: 270)
    self.view.addSubview(chartView)
     
    //生成10条随机数据
    var dataEntries = [ChartDataEntry]()
    for i in 0..<10 {
        let y = arc4random()%100
        let entry = ChartDataEntry.init(x: Double(i), y: Double(y))
        dataEntries.append(entry)
    }
    //这10条数据作为1根折线里的所有数据
    let chartDataSet = LineChartDataSet(values: dataEntries, label: "图例1")
    //将线条颜色设置为橙色
    chartDataSet.colors = [.orange]
    //修改线条大小
    chartDataSet.lineWidth = 2
    //目前折线图只包括1根折线
    let chartData = LineChartData(dataSets: [chartDataSet])
     
    //设置折现图数据
    chartView.data = chartData
}

}

（2）我们发现线条颜色传入的是一个数组，如果传入多个颜色的话，折线会交替使用这些颜色。

//将线条颜色设置为3种颜色交替显示
chartDataSet.colors = [.orange, .red, .yellow]

2，修改折点的颜色、大小

chartDataSet.circleColors = [.yellow] //外圆颜色
chartDataSet.circleHoleColor = .red //内圆颜色
chartDataSet.circleRadius = 6 //外圆半径
chartDataSet.circleHoleRadius = 2 //内圆半径

3，不显示折点
（1）内外圆均不显示

chartDataSet.drawCirclesEnabled = false //不绘制转折点

（2）仅仅不显示内圆。

chartDataSet.drawCircleHoleEnabled = false //不绘制转折点内圆

4，使用虚线显示

chartDataSet.lineDashLengths = [4,2] //设置虚线各段长度

5，曲线平滑显示
（1）使用 mode 属性可以设置折线显示模式：

chartDataSet.mode = .horizontalBezier //贝塞尔曲线

（2）该属性可选值有 4 种：.line、.cubicBezier、.horizontalBezier、.stepped。其中默认样式是 line，其它 3 种的效果分别如下：

6，修改线条上的文字颜色

chartDataSet.valueColors = [.blue] //拐点上的文字颜色
chartDataSet.valueFont = .systemFont(ofSize: 9) //拐点上的文字大小

7，不显示线条上的文字

chartDataSet.drawValuesEnabled = false //不绘制拐点上的文字

8，线条上文字的格式化显示
下面对所有拐点文字在外部标注百分比（%）

let formatter = NumberFormatter() //自定义格式
formatter.positiveSuffix = “%” //数字后缀单位
chartDataSet.valueFormatter = DefaultValueFormatter(formatter: formatter)

9，绘制填充色背景
（1）下面样例给折线添加一个半透明的填充色，使其变成面积图。

chartDataSet.drawFilledEnabled = true //开启填充色绘制
chartDataSet.fillColor = .orange //设置填充色
chartDataSet.fillAlpha = 0.5 //设置填充色透明度

（2）当然也可以使用渐变色填充：

//开启填充色绘制
chartDataSet.drawFilledEnabled = true
//渐变颜色数组
let gradientColors = [UIColor.orange.cgColor, UIColor.white.cgColor] as CFArray
//每组颜色所在位置（范围0~1)
let colorLocations:[CGFloat] = [1.0, 0.0]
//生成渐变色
let gradient = CGGradient.init(colorsSpace: CGColorSpaceCreateDeviceRGB(),
colors: gradientColors, locations: colorLocations)
//将渐变色作为填充对象s
chartDataSet.fill = Fill.fillWithLinearGradient(gradient!, angle: 90.0)

（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)
    //半透明蓝色背景
    chartView.gridBackgroundColor = UIColor(red: 51/255, green: 181/255, blue: 229/255,
                                            alpha: 150/255)
    chartView.drawGridBackgroundEnabled = true

    self.view.addSubview(chartView)
     
    //生成第一根折线的数据
    var dataEntries1 = [ChartDataEntry]()
    for i in 0..<20 {
        let y = arc4random()%10 + 20
        let entry = ChartDataEntry.init(x: Double(i), y: Double(y))
        dataEntries1.append(entry)
    }
    let chartDataSet1 = LineChartDataSet(values: dataEntries1, label: "最高温度")
    chartDataSet1.drawCirclesEnabled = false
    chartDataSet1.fillAlpha = 1
    chartDataSet1.drawFilledEnabled = true
    chartDataSet1.fillColor = .white
    chartDataSet1.lineWidth = 2
    chartDataSet1.drawValuesEnabled = false //不绘制拐点上的文字
    chartDataSet1.fillFormatter = DefaultFillFormatter { _,_  -> CGFloat in
        return CGFloat(self.chartView.leftAxis.axisMaximum) //向上绘制填充区域
    }
     
    //生成二根折线的数据
    var dataEntries2 = [ChartDataEntry]()
    for i in 0..<20 {
        let y = arc4random()%10
        let entry = ChartDataEntry.init(x: Double(i), y: Double(y))
        dataEntries2.append(entry)
    }
    let chartDataSet2 = LineChartDataSet(values: dataEntries2, label: "最低温度")
    chartDataSet2.colors = [.green]
    chartDataSet2.drawCirclesEnabled = false
    chartDataSet2.fillAlpha = 1
    chartDataSet2.drawFilledEnabled = true
    chartDataSet2.fillColor = .white
    chartDataSet2.lineWidth = 2
    chartDataSet2.drawValuesEnabled = false //不绘制拐点上的文字
    chartDataSet2.fillFormatter = DefaultFillFormatter { _,_  -> CGFloat in
        return CGFloat(self.chartView.leftAxis.axisMinimum) //向下绘制填充区域
    }

    //目前折线图只包括2根折线
    let chartData = LineChartData(dataSets: [chartDataSet1, chartDataSet2])
     
    //设置折现图数据
    chartView.data = chartData
}

}

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