返回 导航

Swift

hangge.com

Swift - 第三方图表库Charts使用详解24(饼状图3:自动选中最大值)

作者:hangge | 2018-12-28 08:10
    之前我写过文章介绍如何使用第三方图表库 Charts 实现饼状图:

    默认情况下当我们点击选中某个扇区时,这个扇区会自动伸出(见下图)。有网友问:如何让饼状图默认就自动选中最大值(该扇区默认就是伸出状态),下面通过样例演示这个功能如何实现。

1,默认选中最大值

(1)样例代码
import UIKit
import Charts

class ViewController: UIViewController {
    
    //饼状图
    var chartView: PieChartView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //创建饼图组件对象
        chartView = PieChartView()
        chartView.frame = CGRect(x: 20, y: 80, width: self.view.bounds.width - 40,
                                 height: 260)
        self.view.addSubview(chartView)
        
        //生成5条随机数据
        let dataEntries = (0..<5).map { (i) -> PieChartDataEntry in
            return PieChartDataEntry(value: Double(arc4random_uniform(50) + 10),
                                     label: "数据\(i)")
        }
        let chartDataSet = PieChartDataSet(values: dataEntries, label: "数据分布")
        //设置颜色
        chartDataSet.colors = ChartColorTemplates.vordiplom()
            + ChartColorTemplates.joyful()
            + ChartColorTemplates.colorful()
            + ChartColorTemplates.liberty()
            + ChartColorTemplates.pastel()
        let chartData = PieChartData(dataSet: chartDataSet)
        
        //设置饼状图数据
        chartView.data = chartData
        
        //找到最大扇区的索引
        var selectIndex = 0
        for i in 1..<dataEntries.count {
            if dataEntries[i].value > dataEntries[selectIndex].value {
                selectIndex = i
            }
        }
        //选中最大扇区
        let highlight = Highlight(x: Double(selectIndex), dataSetIndex: 0, stackIndex: 0)
        chartView.highlightValue(highlight)
    }
}

(2)运行效果如下。可以看到程序启动后,饼状图中最大的那个扇区会自动被选中,并伸长。

2,同时选中多个扇区

(1)我们也可以使用 highlightValues() 方法来传入个数组,实现同时选中多个扇区。
//选中第2、4个扇区
let highlight1 = Highlight(x: 1, dataSetIndex: 0, stackIndex: 0)
let highlight2 = Highlight(x: 3, dataSetIndex: 0, stackIndex: 0)
chartView.highlightValues([highlight1, highlight2])

(2)运行效果如下:
评论

全部评论(0)

回到顶部