返回 导航

Swift

hangge.com

Swift - 第三方图表库AAInfographics使用详解13(仪表盘、通过Options绘图)

作者:hangge | 2019-03-06 08:17
      由于 AAInfographics 内部使用的是 Highcharts 这个 H5 图表库,因此我们也可以使用原生配置(Options)的方式来设置图表显示的内容。下面以这种方式来显示一个仪表盘为例。

1,效果图

(1)下面显示一个 0200 范围的速度仪,同时不同刻度范围会使用不同的背景色。
(2)速度仪指针默认会指向 80 的刻度(初始显示时会有动画效果,从 0 刻度开始顺时针旋转)。

2,样例代码

import UIKit

class ViewController: UIViewController {
      let aaChartView = AAChartView()
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 初始化图表视图控件
        let chartWidth  = self.view.frame.size.width
        let chartHeight = self.view.frame.size.height - 150
        aaChartView.frame = CGRect(x:0, y:0, width:chartWidth, height:chartHeight)
        self.view.addSubview(aaChartView)
        
        //使用Options绘制最终图形
        let aaOptions = setUpOptions()
        aaChartView.aa_drawChartWithChartOptions(aaOptions)
    }
    
    private func setUpOptions() -> NSMutableDictionary {
        let aaOptions = [
            "chart": [
                "type": "gauge",
            ],
            "title": [
                "text": "速度仪"
            ],
            "pane": [
                "startAngle": -150,
                "endAngle": 150,
            ],
            // the value axis
            "yAxis": [
                "min": 0,
                "max": 200,
                
                "title": [
                    "text": "km/h"
                ],
                "plotBands": [[
                    "from": 0,
                    "to": 120,
                    "color": "#ffc069"
                    ], [
                        "from": 120,
                        "to": 160,
                        "color": "#fe117c"
                    ], [
                        "from": 160,
                        "to": 200,
                        "color": "#06caf4"
                    ]]
            ],
            "series": [[
                "name": "Speed",
                "data": [80],
                ]]
            ] as NSMutableDictionary
        return aaOptions
    }
}
评论

全部评论(0)

回到顶部