Swift - 第三方图表库Charts使用详解15（柱状图2：正负柱状图、横向条形图）
作者：hangge | 2018-08-22 08:10
二、正负柱状图
1，效果图
柱状图是可以同时显示正值和负值数据的。同时这里做个功能改进，根据正负情况显示相应颜色：
- 正值的柱子显示为绿色。
- 负值的柱子显示为红色。
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)
//生成10条随机数据
var dataEntries = [BarChartDataEntry]()
for i in 0..<10 {
let y = Double(arc4random() % 100) - 50
let entry = BarChartDataEntry(x: Double(i), y: y)
dataEntries.append(entry)
}
//根据正负值生成每个立柱使用的颜色
let red = UIColor(red: 211/255, green: 74/255, blue: 88/255, alpha: 1)
let green = UIColor(red: 110/255, green: 190/255, blue: 102/255, alpha: 1)
let colors = dataEntries.map { (entry) -> NSUIColor in
return entry.y > 0 ? green : red
}
//这10条数据作为柱状图的所有数据
let chartDataSet = BarChartDataSet(values: dataEntries, label: "图例1")
//设置颜色
chartDataSet.colors = colors
//目前柱状图只包括1组立柱
let chartData = BarChartData(dataSets: [chartDataSet])
//设置柱状图数据
chartView.data = chartData
}
}
三、横向条形图
1，只包含正值的条形图
如果要显示水平柱状图，只需要把 BarChartView 换成 HorizontalBarChartView 即可。
import UIKit
import Charts
class ViewController: UIViewController {
//横向柱状图
var chartView: HorizontalBarChartView!
override func viewDidLoad() {
super.viewDidLoad()
//创建柱状图组件对象
chartView = HorizontalBarChartView()
chartView.frame = CGRect(x: 20, y: 80, width: self.view.bounds.width - 40,
height: 260)
self.view.addSubview(chartView)
//不显示图例
chartView.legend.enabled = false
//x轴显示在左侧
chartView.xAxis.labelPosition = .bottom
//y轴起始刻度为0
chartView.leftAxis.axisMinimum = 0
chartView.rightAxis.axisMinimum = 0
//生成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: "图例1")
//目前柱状图只包括1组立柱
let chartData = BarChartData(dataSets: [chartDataSet])
//设置柱状图数据
chartView.data = chartData
chartView.fitScreen()
}
}
2，同时包含正负值的条形图
这个和最开始的样例差不多，只不过之前是纵向显示，这次变成横向显示。
import UIKit
import Charts
class ViewController: UIViewController {
//横向柱状图
var chartView: HorizontalBarChartView!
override func viewDidLoad() {
super.viewDidLoad()
//创建柱状图组件对象
chartView = HorizontalBarChartView()
chartView.frame = CGRect(x: 20, y: 80, width: self.view.bounds.width - 40,
height: 260)
self.view.addSubview(chartView)
//不显示图例
chartView.legend.enabled = false
//x轴显示在左侧
chartView.xAxis.labelPosition = .bottom
//生成10条随机数据
var dataEntries = [BarChartDataEntry]()
for i in 0..<10 {
let y = Double(arc4random() % 100) - 50
let entry = BarChartDataEntry(x: Double(i), y: y)
dataEntries.append(entry)
}
//根据正负值生成每个立柱使用的颜色
let red = UIColor(red: 211/255, green: 74/255, blue: 88/255, alpha: 1)
let green = UIColor(red: 110/255, green: 190/255, blue: 102/255, alpha: 1)
let colors = dataEntries.map { (entry) -> NSUIColor in
return entry.y > 0 ? green : red
}
//这10条数据作为柱状图的所有数据
let chartDataSet = BarChartDataSet(values: dataEntries, label: "图例1")
//设置颜色
chartDataSet.colors = colors
//目前柱状图只包括1组立柱
let chartData = BarChartData(dataSets: [chartDataSet])
//设置柱状图数据
chartView.data = chartData
chartView.fitScreen()
}
}
全部评论（1）
航哥，HorizontalBarChartView可以用限制线吗，在折线图和柱状图上可以用，不知道在HorizontalBarChartView可不可以
站长回复：当然没问题，只要是有坐标轴的都是可以添加限制线的。