Swift - 第三方图表库Charts使用详解14（柱状图1：基本用法）

作者：hangge | 2018-08-20 08:10

一、基本用法

1，只有 1 组数据的柱状图

（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 = arc4random()%100
            let entry = BarChartDataEntry(x: Double(i), y: Double(y))
            dataEntries.append(entry)
        }
        //这20条数据作为柱状图的所有数据
        let chartDataSet = BarChartDataSet(values: dataEntries, label: "图例1")
        //目前柱状图只包括1组立柱
        let chartData = BarChartData(dataSets: [chartDataSet])
        
        //设置柱状图数据
        chartView.data = chartData
    }
}

2，修改柱子宽度

默认情况下柱状图中每根柱子占其所处刻度区域宽度的 85%，我们可以修改它所占的宽度比例。

//设置柱子宽度为刻度区域的一半
chartData.barWidth = 0.5

3，立柱阴影

开启立柱背景阴影绘制后，立柱未占用的部分会有深灰色背景。

//开启阴背景阴影绘制
chartView.drawBarShadowEnabled = true

4，立柱颜色

（1）单色

chartDataSet.colors = [.orange] //全部使用橙色

（2）多色

chartDataSet.colors = [.yellow, .orange, .red] //三种颜色交替使用

5，立柱的边框颜色、线宽

chartDataSet.barBorderWidth = 1
chartDataSet.barBorderColor = .orange

6，立柱数值文字显示在内部

chartView.drawValueAboveBarEnabled = false

7，带图标的立柱

（1）下面样例在所有数值超过 80 的立柱上方显示个星星图标。注意：由于图标的位置就是之前文字所在的位置，未防止重合，这里将文字隐藏。

//生成10条随机数据
var dataEntries = [BarChartDataEntry]()
for i in 0..<10 {
    let y = arc4random()%100
    var entry:BarChartDataEntry
    //只要值超过80都会带有一个小图标
    if y > 80 {
        entry = BarChartDataEntry(x: Double(i), y: Double(y),
                                  icon: UIImage(named: "icon"))
    } else {
        entry = BarChartDataEntry(x: Double(i), y: Double(y))
    }
    dataEntries.append(entry)
}
//这10条数据作为柱状图的所有数据
let chartDataSet = BarChartDataSet(values: dataEntries, label: "图例1")
//不显示立柱数值文字标签
chartDataSet.drawValuesEnabled = false

（2）如果将立柱数值文字设置成“显示在内部”，那么图标位置也会同步变化。

chartView.drawValueAboveBarEnabled = false

附：更多样式和功能

除了上面这些样式外，柱状图还可以修改 X 轴、Y 轴样式，修改文字、图例样式，添加界限，进行数值格式化显示等等。这些在之前的折线图部分已经介绍过了，大家可以点击下方链接进行查看：