返回 导航

Swift

hangge.com

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

作者:hangge | 2018-08-29 08:10

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)
评论

全部评论(0)

回到顶部