Swift - 第三方图表库Charts使用详解20（混合图表：折线图、柱状图等组合使用）
作者：hangge | 2018-09-03 08:10
使用 CombinedChartView 可以实现混合图表，即将折线图、柱状图、散点图、气泡图、烛形图中的一种或多种类型图表同时显示在一个坐标系中。
1，折线图、柱状图组合使用
（1）效果图
（2）样例代码
import UIKit
import Charts
class ViewController: UIViewController {
//组合图
var chartView: CombinedChartView!
override func viewDidLoad() {
super.viewDidLoad()
//创建组合图组件对象
chartView = CombinedChartView()
chartView.frame = CGRect(x: 20, y: 80, width: self.view.bounds.width - 40,
height: 260)
self.view.addSubview(chartView)
//各类型图表的显示次序（后面的覆盖前面的）
chartView.drawOrder = [DrawOrder.bar.rawValue,
DrawOrder.line.rawValue]
//组合图数据
let chartData = CombinedChartData()
chartData.barData = generateBarData()
chartData.lineData = generateLineData()
//设置组合图数据
chartView.data = chartData
}
//生成柱状图数据
func generateBarData() -> BarChartData {
//生成10条随机数据
var dataEntries = [BarChartDataEntry]()
for i in 0..<10 {
let y = arc4random()%100
let entry = BarChartDataEntry(x: Double(i), y: Double(y))
dataEntries.append(entry)
}
//这10条数据作为柱状图的所有数据
let chartDataSet = BarChartDataSet(values: dataEntries, label: "柱状图")
chartDataSet.colors = [.orange] //全部使用橙色
//目前柱状图只包括1组立柱
let chartData = BarChartData(dataSets: [chartDataSet])
return chartData
}
//生成折线图数据
func generateLineData() -> LineChartData {
//生成10条随机数据
var dataEntries = [ChartDataEntry]()
for i in 0..<10 {
let y = arc4random()%100
let entry = ChartDataEntry(x: Double(i), y: Double(y))
dataEntries.append(entry)
}
//这10条数据作为折线图的所有数据
let chartDataSet = LineChartDataSet(values: dataEntries, label: "折线图")
chartDataSet.setColor(UIColor(red: 240/255, green: 238/255, blue: 70/255, alpha: 1))
chartDataSet.lineWidth = 2.5
chartDataSet.setCircleColor(UIColor(red: 240/255, green: 238/255, blue: 70/255,
alpha: 1))
chartDataSet.circleRadius = 5
chartDataSet.circleHoleRadius = 2.5
chartDataSet.fillColor = UIColor(red: 240/255, green: 238/255, blue: 70/255,
alpha: 1)
//目前柱状图只包括1组折线
let chartData = LineChartData(dataSets: [chartDataSet])
return chartData
}
}
2，全部五种类型图表组合使用
（1）效果图
（2）样例代码
import UIKit
import Charts
class ViewController: UIViewController {
//组合图
var chartView: CombinedChartView!
override func viewDidLoad() {
super.viewDidLoad()
//创建组合图组件对象
chartView = CombinedChartView()
chartView.frame = CGRect(x: 20, y: 80, width: self.view.bounds.width - 40,
height: 260)
self.view.addSubview(chartView)
//各类型图表的显示次序（后面的覆盖前面的）
chartView.drawOrder = [DrawOrder.bar.rawValue,
DrawOrder.bubble.rawValue,
DrawOrder.line.rawValue,
DrawOrder.scatter.rawValue,
DrawOrder.candle.rawValue]
//组合图数据
let chartData = CombinedChartData()
chartData.barData = generateBarData()
chartData.lineData = generateLineData()
chartData.scatterData = generateScatterData()
chartData.bubbleData = generateBubbleData()
chartData.candleData = generateCandleData()
//设置组合图数据
chartView.data = chartData
}
//生成柱状图数据
func generateBarData() -> BarChartData {
//生成10条随机数据
var dataEntries = [BarChartDataEntry]()
for i in 0..<10 {
let y = arc4random()%100
let entry = BarChartDataEntry(x: Double(i), y: Double(y))
dataEntries.append(entry)
}
//这10条数据作为柱状图的所有数据
let chartDataSet = BarChartDataSet(values: dataEntries, label: "柱状图")
chartDataSet.colors = [.orange] //全部使用橙色
//目前柱状图只包括1组立柱
let chartData = BarChartData(dataSets: [chartDataSet])
return chartData
}
//生成折线图数据
func generateLineData() -> LineChartData {
//生成10条随机数据
var dataEntries = [ChartDataEntry]()
for i in 0..<10 {
let y = arc4random()%100
let entry = ChartDataEntry(x: Double(i), y: Double(y))
dataEntries.append(entry)
}
//这10条数据作为折线图的所有数据
let chartDataSet = LineChartDataSet(values: dataEntries, label: "折线图")
chartDataSet.setColor(UIColor(red: 240/255, green: 238/255, blue: 70/255,
alpha: 1))
chartDataSet.lineWidth = 2.5
chartDataSet.setCircleColor(UIColor(red: 240/255, green: 238/255, blue: 70/255,
alpha: 1))
chartDataSet.circleRadius = 5
chartDataSet.circleHoleRadius = 2.5
chartDataSet.fillColor = UIColor(red: 240/255, green: 238/255, blue: 70/255,
alpha: 1)
//目前柱状图只包括1组折线
let chartData = LineChartData(dataSets: [chartDataSet])
return chartData
}
//生成散点图数据
func generateScatterData() -> ScatterChartData {
//生成10条随机数据
let dataEntries = (0..<10).map { (i) -> ChartDataEntry in
let val = Double(arc4random_uniform(100) + 150)
return ChartDataEntry(x: Double(i), y: val)
}
let chartDataSet = ScatterChartDataSet(values: dataEntries, label: "散点图")
chartDataSet.colors = [ChartColorTemplates.material()[0]]
//目前散点图包括1组数据
let chartData = ScatterChartData(dataSets: [chartDataSet])
return chartData
}
//生成气泡图数据
func generateBubbleData() -> BubbleChartData {
//生成10条随机数据
let dataEntries = (0..<10).map { (i) -> BubbleChartDataEntry in
let val = Double(arc4random_uniform(100) + 300)
let size = CGFloat(arc4random_uniform(10))
return BubbleChartDataEntry(x: Double(i), y: val, size: size)
}
let chartDataSet = BubbleChartDataSet(values: dataEntries, label: "散点图")
chartDataSet.colors = [ChartColorTemplates.material()[1]]
//目前气泡图包括1组数据
let chartData = BubbleChartData(dataSets: [chartDataSet])
return chartData
}
//生成烛形图数据
func generateCandleData() -> CandleChartData {
//生成10条随机数据
let dataEntries = (0..<10).map { (i) -> CandleChartDataEntry in
let val = Double(arc4random_uniform(100) + 10 + 400)
let high = Double(arc4random_uniform(20) + 8)
let low = Double(arc4random_uniform(20) + 8)
let open = Double(arc4random_uniform(20) + 1)
let close = Double(arc4random_uniform(20) + 1)
let even = arc4random_uniform(2) % 2 == 0 //true表示开盘价高于收盘价
return CandleChartDataEntry(x: Double(i),
shadowH: val + high,
shadowL: val - low,
open: even ? val + open : val - open,
close: even ? val - close : val + close)
}
let chartDataSet = CandleChartDataSet(values: dataEntries, label: "烛形图")
chartDataSet.setColor(ChartColorTemplates.material()[2])
//目前烛形图包括1组数据
let chartData = CandleChartData(dataSets: [chartDataSet])
return chartData
}
}
全部评论（1）
可以留下 代码.zip 吗？ github下载的代码缺少配置文件，看你发表这么多文章，却因为基础文件都不能运行，怪可惜的
站长回复：这个配置很简单的，你参考我写的第一篇文章：Swift - 第三方图表库Charts使用详解1（安装配置、基本用法）