Swift - 第三方图表库Charts使用详解18（气泡图）

1，基本用法
气泡图和散点图很像，不同的是气泡图的每个数据中多个 size 属性，该属性决定每个气泡相对大小。下面是一个包含两组数据的气泡图样例。

import UIKit
import Charts

class ViewController: UIViewController {

//气泡图
var chartView: BubbleChartView!
 
override func viewDidLoad() {
    super.viewDidLoad()
     
    //创建气泡图组件对象
    chartView = BubbleChartView()
    chartView.frame = CGRect(x: 20, y: 80, width: self.view.bounds.width - 40,
                             height: 260)
    self.view.addSubview(chartView)
     
    //第一组气泡图的10条随机数据
    let dataEntries1 = (0..<10).map { (i) -> ChartDataEntry in
        let val = Double(arc4random_uniform(100) + 3)
        let size = CGFloat(arc4random_uniform(10))
        return BubbleChartDataEntry(x: Double(i), y: val, size: size)
    }
    let chartDataSet1 = BubbleChartDataSet(values: dataEntries1, label: "图例1")

    //第二组气泡图的10条随机数据
    let dataEntries2 = (0..<10).map { (i) -> ChartDataEntry in
        let val = Double(arc4random_uniform(100) + 3)
        let size = CGFloat(arc4random_uniform(10))
        return BubbleChartDataEntry(x: Double(i), y: val, size: size)
    }
    let chartDataSet2 = BubbleChartDataSet(values: dataEntries2, label: "图例2")
    chartDataSet2.setColor(.orange) //第二组气泡使用橙色
     
    //目前气泡图包括2组数据
    let chartData = BubbleChartData(dataSets: [chartDataSet1, chartDataSet2])
     
    //设置气泡图数据
    chartView.data = chartData
}

}

2，选中气泡的边框大小
当我们选中一个气泡后，这个气泡会有个深色的边框，这个边框粗细是可以修改的。

chartDataSet1.highlightCircleWidth = 6

3，带图标的气泡
（1）下面样例中，所有 size 超过 7 的气泡内会显示个星星图标。

//第一组气泡图的10条随机数据
let dataEntries1 = (0…<10).map { (i) -> ChartDataEntry in
let val = Double(arc4random_uniform(100) + 3)
let size = CGFloat(arc4random_uniform(10))
//只要size超过7的气泡都会带有一个小图标
if size > 7 {
return BubbleChartDataEntry(x: Double(i), y: val, size: size,
icon: UIImage(named: “icon”))
} else {
return BubbleChartDataEntry(x: Double(i), y: val, size: size)
}
}
let chartDataSet1 = BubbleChartDataSet(values: dataEntries1, label: “图例1”)

（2）如果不想让图表与文字重合，我们可以给图标设置个偏移量。

chartDataSet1.iconsOffset = CGPoint(x: 10, y: -10)

4，气泡文字样式
（1）下面修改气泡内文字样式和颜色。

chartData.setValueFont(UIFont(name: “HelveticaNeue-Light”, size: 7)!)
chartData.setValueTextColor(.red)

（2）不显示气泡文字

chartData.setDrawValues(false)

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