Swift - 第三方图表库Charts使用详解16（柱状图3：多组数据的显示）

三、包含多组数据的柱状图
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 则可以变成横向条形图。

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