Swift - 第三方图表库Charts使用详解16（柱状图3：多组数据的显示）
作者：hangge | 2018-08-24 08:10
三、包含多组数据的柱状图
1，多组数据相互覆盖
（1）效果图
- 下面是一个包含有两组数据的柱状图。
- 各组中 x 坐标一样的柱子会重叠在一起（后面覆盖前面的）。
（2）样例代码
import UIKit
import Charts
class ViewController: UIViewController {
//柱状图图
var chartView: BarChartView!
override func viewDidLoad() {
super.viewDidLoad()
//创建折线图组件对象
chartView = BarChartView()
chartView.frame = CGRect(x: 20, y: 80, width: self.view.bounds.width - 40,
height: 260)
self.view.addSubview(chartView)
//第一组数据
var dataEntries1 = [BarChartDataEntry]()
for i in 0..<10 {
let y = arc4random()%100 + 50
let entry = BarChartDataEntry(x: Double(i), y: Double(y))
dataEntries1.append(entry)
}
let chartDataSet1 = BarChartDataSet(values: dataEntries1, label: "图例1")
//第二组数据
var dataEntries2 = [BarChartDataEntry]()
for i in 0..<10 {
let y = arc4random()%50
let entry = BarChartDataEntry(x: Double(i), y: Double(y))
dataEntries2.append(entry)
}
let chartDataSet2 = BarChartDataSet(values: dataEntries2, label: "图例2")
chartDataSet2.colors = [.orange]
//目前柱状图包括2组立柱
let chartData = BarChartData(dataSets: [chartDataSet1, chartDataSet2])
//设置柱状图数据
chartView.data = chartData
}
}
2，多组数据分组显示
（1）效果图
- 下面是一个包含有 3 组数据的柱状图。
- 各组 x 坐标一样的柱子不会重叠，而是并排显示在一个个标签区域内。
（2）样例代码
注意：这种显示方式的关键点在于设置好立柱的宽度、间隔，确保每个区块的宽度总和是 1。
import UIKit
import Charts
class ViewController: UIViewController {
//柱状图图
var chartView: BarChartView!
//每个分组之间的间隔
let groupSpace = 0.31
//同一分组内柱子间隔
let barSpace = 0.03
//柱子宽度（ (0.2 + 0.03) * 3 + 0.31 = 1.00 -> interval per "group"）
let barWidth = 0.2
//每组数据条数
let groupCount = 5
//x轴标签文字
let years = ["2001", "2002", "2003", "2004", "2005"]
override func viewDidLoad() {
super.viewDidLoad()
//创建折线图组件对象
chartView = BarChartView()
chartView.frame = CGRect(x: 20, y: 80, width: self.view.bounds.width - 40,
height: 260)
self.view.addSubview(chartView)
//第一组数据
var dataEntries1 = [BarChartDataEntry]()
for i in 0..<groupCount {
let y = arc4random()%100 + 50
let entry = BarChartDataEntry(x: Double(i), y: Double(y))
dataEntries1.append(entry)
}
let chartDataSet1 = BarChartDataSet(values: dataEntries1, label: "图例1")
//第二组数据
var dataEntries2 = [BarChartDataEntry]()
for i in 0..<groupCount {
let y = arc4random()%50
let entry = BarChartDataEntry(x: Double(i), y: Double(y))
dataEntries2.append(entry)
}
let chartDataSet2 = BarChartDataSet(values: dataEntries2, label: "图例2")
chartDataSet2.colors = [.orange]
//第三组数据
var dataEntries3 = [BarChartDataEntry]()
for i in 0..<groupCount {
let y = arc4random()%50
let entry = BarChartDataEntry(x: Double(i), y: Double(y))
dataEntries3.append(entry)
}
let chartDataSet3 = BarChartDataSet(values: dataEntries3, label: "图例3")
chartDataSet3.colors = [.green]
//目前柱状图包括2组立柱
let chartData = BarChartData(dataSets: [chartDataSet1, chartDataSet2,
chartDataSet3])
//设置柱子宽度
chartData.barWidth = barWidth
//对数据进行分组（不重叠显示）
chartData.groupBars(fromX: Double(0), groupSpace: groupSpace, barSpace: barSpace)
//设置X轴范围
chartView.xAxis.axisMinimum = Double(0)
chartView.xAxis.axisMaximum = Double(0) + chartData
.groupWidth(groupSpace: groupSpace, barSpace: barSpace) * Double(groupCount)
chartView.xAxis.centerAxisLabelsEnabled = true //文字标签居中
chartView.xAxis.granularity = 1
chartView.xAxis.labelPosition = .bottom
chartView.xAxis.valueFormatter = IndexAxisValueFormatter(values:self.years)
//设置y轴范围
chartView.leftAxis.axisMinimum = 0
chartView.rightAxis.axisMinimum = 0
//设置柱状图数据
chartView.data = chartData
}
}
3，堆叠柱形图（stackedbar）
（1）堆叠柱形图指的是每根立柱由多个部分叠加而成，下面是一个简单的样例。
import UIKit
import Charts
class ViewController: UIViewController {
//柱状图图
var chartView: BarChartView!
override func viewDidLoad() {
super.viewDidLoad()
//创建折线图组件对象
chartView = BarChartView()
chartView.frame = CGRect(x: 20, y: 80, width: self.view.bounds.width - 40,
height: 260)
//文字显示在柱子内部
chartView.drawValueAboveBarEnabled = false
self.view.addSubview(chartView)
//生成10条随机数据
var dataEntries = [BarChartDataEntry]()
for i in 0..<10 {
//每个柱子由两部分数据组成
let value1 = Double(arc4random()%100)
let value2 = Double(arc4random()%100)
let entry = BarChartDataEntry(x: Double(i), yValues: [value1, value2])
dataEntries.append(entry)
}
//这10条数据作为柱状图的所有数据
let chartDataSet = BarChartDataSet(values: dataEntries, label: "每日访问量")
//堆叠柱形图每部分文字标签
chartDataSet.stackLabels = ["线上", "线下"]
//堆叠柱形图每部分使用的颜色
chartDataSet.colors = [ChartColorTemplates.material()[0],
ChartColorTemplates.material()[1]]
//目前柱状图只包括1组立柱
let chartData = BarChartData(dataSets: [chartDataSet])
//标签文字颜色为白色
chartData.setValueTextColor(.white)
//设置柱状图数据
chartView.data = chartData
}
}
（2）下面是一个同时包含有正值和负值的堆叠柱形图。
import UIKit
import Charts
class ViewController: UIViewController {
//柱状图图
var chartView: BarChartView!
override func viewDidLoad() {
super.viewDidLoad()
//创建折线图组件对象
chartView = BarChartView()
chartView.frame = CGRect(x: 20, y: 80, width: self.view.bounds.width - 40,
height: 260)
//文字显示在柱子内部
chartView.drawValueAboveBarEnabled = false
self.view.addSubview(chartView)
//生成10条随机数据
var dataEntries = [BarChartDataEntry]()
for i in 0..<10 {
//每个柱子由两部分数据组成
let value1 = Double(arc4random()%100)
let value2 = -Double(arc4random()%100)
let entry = BarChartDataEntry(x: Double(i), yValues: [value1, value2])
dataEntries.append(entry)
}
//这10条数据作为柱状图的所有数据
let chartDataSet = BarChartDataSet(values: dataEntries, label: "每日交易")
//堆叠柱形图每部分文字标签
chartDataSet.stackLabels = ["收入", "支出"]
//堆叠柱形图每部分使用的颜色
chartDataSet.colors = [ChartColorTemplates.material()[0],
ChartColorTemplates.material()[1]]
//目前柱状图只包括1组立柱
let chartData = BarChartData(dataSets: [chartDataSet])
//标签文字颜色为白色
chartData.setValueTextColor(.white)
//设置柱状图数据
chartView.data = chartData
}
}
（3）上面样例把 BarChartView 换成 HorizontalBarChartView 则可以变成横向条形图。
全部评论（0）