当前位置: > > > Swift - 第三方图表库Charts使用详解20(混合图表:折线图、柱状图等组合使用)

Swift - 第三方图表库Charts使用详解20(混合图表:折线图、柱状图等组合使用)

    使用 CombinedChartView 可以实现混合图表,即将折线图、柱状图、散点图、气泡图、烛形图中的一种或多种类型图表同时显示在一个坐标系中。

1,折线图、柱状图组合使用

(1)效果图

(2)样例代码
import UIKit
import Charts

class ViewController: UIViewController {
    
    //组合图
    var chartView: CombinedChartView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //创建组合图组件对象
        chartView = CombinedChartView()
        chartView.frame = CGRect(x: 20, y: 80, width: self.view.bounds.width - 40,
                                 height: 260)
        self.view.addSubview(chartView)
        
        //各类型图表的显示次序(后面的覆盖前面的)
        chartView.drawOrder = [DrawOrder.bar.rawValue,
                               DrawOrder.line.rawValue]
        
        //组合图数据
        let chartData = CombinedChartData()
        chartData.barData = generateBarData()
        chartData.lineData = generateLineData()
        
        //设置组合图数据
        chartView.data = chartData
    }
    
    //生成柱状图数据
    func generateBarData() -> BarChartData {
        //生成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: "柱状图")
        chartDataSet.colors = [.orange] //全部使用橙色
        //目前柱状图只包括1组立柱
        let chartData = BarChartData(dataSets: [chartDataSet])
        return chartData
    }
    
    //生成折线图数据
    func generateLineData() -> LineChartData {
        //生成10条随机数据
        var dataEntries = [ChartDataEntry]()
        for i in 0..<10 {
            let y = arc4random()%100
            let entry = ChartDataEntry(x: Double(i), y: Double(y))
            dataEntries.append(entry)
        }
        //这10条数据作为折线图的所有数据
        let chartDataSet = LineChartDataSet(values: dataEntries, label: "折线图")
        chartDataSet.setColor(UIColor(red: 240/255, green: 238/255, blue: 70/255, alpha: 1))
        chartDataSet.lineWidth = 2.5
        chartDataSet.setCircleColor(UIColor(red: 240/255, green: 238/255, blue: 70/255,
                                            alpha: 1))
        chartDataSet.circleRadius = 5
        chartDataSet.circleHoleRadius = 2.5
        chartDataSet.fillColor = UIColor(red: 240/255, green: 238/255, blue: 70/255,
                                         alpha: 1)
        //目前柱状图只包括1组折线
        let chartData = LineChartData(dataSets: [chartDataSet])
        return chartData
    }
}

2,全部五种类型图表组合使用

(1)效果图

(2)样例代码
import UIKit
import Charts

class ViewController: UIViewController {
    
    //组合图
    var chartView: CombinedChartView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //创建组合图组件对象
        chartView = CombinedChartView()
        chartView.frame = CGRect(x: 20, y: 80, width: self.view.bounds.width - 40,
                                 height: 260)
        self.view.addSubview(chartView)
        
        //各类型图表的显示次序(后面的覆盖前面的)
        chartView.drawOrder = [DrawOrder.bar.rawValue,
                               DrawOrder.bubble.rawValue,
                               DrawOrder.line.rawValue,
                               DrawOrder.scatter.rawValue,
                               DrawOrder.candle.rawValue]
        
        //组合图数据
        let chartData = CombinedChartData()
        chartData.barData = generateBarData()
        chartData.lineData = generateLineData()
        chartData.scatterData = generateScatterData()
        chartData.bubbleData = generateBubbleData()
        chartData.candleData = generateCandleData()
        
        //设置组合图数据
        chartView.data = chartData
    }
    
    //生成柱状图数据
    func generateBarData() -> BarChartData {
        //生成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: "柱状图")
        chartDataSet.colors = [.orange] //全部使用橙色
        //目前柱状图只包括1组立柱
        let chartData = BarChartData(dataSets: [chartDataSet])
        return chartData
    }
    
    //生成折线图数据
    func generateLineData() -> LineChartData {
        //生成10条随机数据
        var dataEntries = [ChartDataEntry]()
        for i in 0..<10 {
            let y = arc4random()%100
            let entry = ChartDataEntry(x: Double(i), y: Double(y))
            dataEntries.append(entry)
        }
        //这10条数据作为折线图的所有数据
        let chartDataSet = LineChartDataSet(values: dataEntries, label: "折线图")
        chartDataSet.setColor(UIColor(red: 240/255, green: 238/255, blue: 70/255,
                                      alpha: 1))
        chartDataSet.lineWidth = 2.5
        chartDataSet.setCircleColor(UIColor(red: 240/255, green: 238/255, blue: 70/255,
                                            alpha: 1))
        chartDataSet.circleRadius = 5
        chartDataSet.circleHoleRadius = 2.5
        chartDataSet.fillColor = UIColor(red: 240/255, green: 238/255, blue: 70/255,
                                         alpha: 1)
        //目前柱状图只包括1组折线
        let chartData = LineChartData(dataSets: [chartDataSet])
        return chartData
    }
    
    //生成散点图数据
    func generateScatterData() -> ScatterChartData {
        //生成10条随机数据
        let dataEntries = (0..<10).map { (i) -> ChartDataEntry in
            let val = Double(arc4random_uniform(100) + 150)
            return ChartDataEntry(x: Double(i), y: val)
        }
        let chartDataSet = ScatterChartDataSet(values: dataEntries, label: "散点图")
        chartDataSet.colors = [ChartColorTemplates.material()[0]]
        //目前散点图包括1组数据
        let chartData = ScatterChartData(dataSets: [chartDataSet])
        return chartData
    }
    
    //生成气泡图数据
    func generateBubbleData() -> BubbleChartData {
        //生成10条随机数据
        let dataEntries = (0..<10).map { (i) -> BubbleChartDataEntry in
            let val = Double(arc4random_uniform(100) + 300)
            let size = CGFloat(arc4random_uniform(10))
            return BubbleChartDataEntry(x: Double(i), y: val, size: size)
        }
        let chartDataSet = BubbleChartDataSet(values: dataEntries, label: "散点图")
        chartDataSet.colors = [ChartColorTemplates.material()[1]]
        //目前气泡图包括1组数据
        let chartData = BubbleChartData(dataSets: [chartDataSet])
        return chartData
    }
    
    //生成烛形图数据
    func generateCandleData() -> CandleChartData {
        //生成10条随机数据
        let dataEntries = (0..<10).map { (i) -> CandleChartDataEntry in
            let val = Double(arc4random_uniform(100) + 10 + 400)
            let high = Double(arc4random_uniform(20) + 8)
            let low = Double(arc4random_uniform(20) + 8)
            let open = Double(arc4random_uniform(20) + 1)
            let close = Double(arc4random_uniform(20) + 1)
            let even = arc4random_uniform(2) % 2 == 0 //true表示开盘价高于收盘价
            return CandleChartDataEntry(x: Double(i),
                                        shadowH: val + high,
                                        shadowL: val - low,
                                        open: even ? val + open : val - open,
                                        close: even ? val - close : val + close)
        }
        let chartDataSet = CandleChartDataSet(values: dataEntries, label: "烛形图")
        chartDataSet.setColor(ChartColorTemplates.material()[2])
        //目前烛形图包括1组数据
        let chartData = CandleChartData(dataSets: [chartDataSet])
        return chartData
    }
}
评论0