当前位置: > > > Swift - 第三方图表库Charts使用详解15(柱状图2:正负柱状图、横向条形图)

Swift - 第三方图表库Charts使用详解15(柱状图2:正负柱状图、横向条形图)

二、正负柱状图

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()
    }
}
评论0