玩转Charts

  • LineChart 折线图
  • BarChart 柱状图
  • CandleStickChart K线图
  • PieChart 饼状图
  • RadarChart 雷达图

集成 Charts

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!
pod 'Charts', '~> 2.2.5'

LineChart

折线图
import UIKit
import Charts

class TranscriptDetailViewController: UIViewController {
    
    var name:String = ""
    var chartView = LineChartView()
    
    // 柱状图横坐标
    let months = [
        "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep",
        "Oct", "Nov", "Dec"
    ]
    
    // 柱状的高度值
    let unitsSold = [20.0, 4.0, 6.0, 3.0, 12.0, 16.0, 4.0, 18.0, 2.0, 4.0, 5.0, 4.0]

    @IBOutlet weak var webView: UIWebView!
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.title = name
        
        self.createLineChartView()
        self.setChart(months, values: unitsSold)
        self.createRightBarButtonItem()
 
    }
    
    // 创建保存按钮
    func createRightBarButtonItem()
    {
        let buttonRight = UIButton.init(type: UIButtonType.Custom)
        buttonRight.frame = CGRectMake(0, 0, 40, 40)
        self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: buttonRight)
        buttonRight.setTitle("Save", forState: UIControlState.Normal)
        buttonRight.addTarget(self, action:#selector(self.save(_:)), forControlEvents: UIControlEvents.TouchUpInside)
    }
    
    func save(btn: UIButton)
    {
        // 保存到相册
        chartView.saveToCameraRoll()
        print("保存成功")
    }
    
    // 创建柱状图
    func createLineChartView()
    {
        chartView = LineChartView.init(frame: CGRectMake(0, 64, AppWidth, AppHeight - 64))
        chartView.lineData
        // 签协议
        chartView.delegate = self
        chartView.backgroundColor = UIColor.whiteColor()
        self.view.addSubview(chartView)
    }
    
    // 加上模拟数据
    func setChart(dataPoints: [String], values: [Double]) {
        var dataEntries: [ChartDataEntry] = []
        for i in 0..

BarChart

柱状图
import UIKit
import Charts

class TranscriptDetailViewController: UIViewController {
    
    var name:String = ""
    var chartView = BarChartView()
    // 柱状图横坐标
    let months = [
        "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep",
        "Oct", "Nov", "Dec"
    ]
    
    // 柱状的高度值
    let unitsSold = [20.0, 4.0, 6.0, 3.0, 12.0, 16.0, 4.0, 18.0, 2.0, 4.0, 5.0, 4.0]


    @IBOutlet weak var webView: UIWebView!
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.title = name
        
        self.createLineChartView()
        self.setChart(months, values: unitsSold)
        self.createRightBarButtonItem()

 
    }
    
    // 创建保存按钮
    func createRightBarButtonItem()
    {
        let buttonRight = UIButton.init(type: UIButtonType.Custom)
        buttonRight.frame = CGRectMake(0, 0, 40, 40)
        self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: buttonRight)
        buttonRight.setTitle("Save", forState: UIControlState.Normal)
        buttonRight.addTarget(self, action:#selector(self.save(_:)), forControlEvents: UIControlEvents.TouchUpInside)
    }
    func save(btn: UIButton)
    {
        // 保存到相册
        chartView.saveToCameraRoll()
        print("保存成功")
    }
    
    // 创建柱状图
    func createLineChartView()
    {
        chartView = BarChartView.init(frame: CGRectMake(0, 64, AppWidth, AppHeight - 64))
        chartView.barData
        // 签协议
        chartView.delegate = self
        chartView.backgroundColor = UIColor.whiteColor()
        self.view.addSubview(chartView)
    }
    // 加上模拟数据
    func setChart(dataPoints: [String], values: [Double]) {
        var dataEntries: [BarChartDataEntry] = []
        for i in 0..

CandleStickChart

K线图
import UIKit
import Charts

class TranscriptDetailViewController: UIViewController {
    
    var name:String = ""
    var chartView = CandleStickChartView()


    @IBOutlet weak var webView: UIWebView!
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.title = name
        
        self.createCandleStickChartView()

 
    }
    

    func createCandleStickChartView()
    {
        chartView = CandleStickChartView.init(frame: CGRectMake(0, 64, AppWidth, AppHeight - 64))
        // 签协议
        chartView.delegate = self
        chartView.backgroundColor = UIColor.whiteColor()
        // 画板颜色
        chartView.gridBackgroundColor = UIColor.clearColor()
        chartView.borderColor = UIColor.whiteColor()
        self.view.addSubview(chartView)
        // 横轴数据
        var xValues = [String]()
        for i in 0...25 {
            xValues.append(NSString(format: "%d", i + 1993) as String)
        }
        // 初始化CandleChartDataEntry数组
        var yValues = [CandleChartDataEntry]()
        // 产生20个随机立柱数据
        for j in 0...24 {
            let val = (Double)(arc4random_uniform(40))
            let high = (Double)(arc4random_uniform(9)) + 8.0
            let low = (Double)(arc4random_uniform(9)) + 8.0
            let open = (Double)(arc4random_uniform(6)) + 1.0
            let close = (Double)(arc4random_uniform(6)) + 1.0
            
            let even = j % 2 == 0
            
            yValues.append(CandleChartDataEntry.init(xIndex: j, shadowH: val + high, shadowL: val - low, open: even ? val + open : val - open, close: even ? val - close : val + close))
        }
        let set1 = CandleChartDataSet.init(yVals: yValues, label: "data set")
        // defult left
        // set1.axisDependency
        // data set color
        set1.setColor(UIColor.blueColor())
        set1.shadowColor = UIColor ( red: 0.5536, green: 0.5528, blue: 0.0016, alpha: 1.0 )
        // 立线的宽度
        set1.shadowWidth = 0.7
        // close >= open
        set1.decreasingColor = UIColor.redColor()
        // 内部是否充满颜色
        set1.decreasingFilled = true
        // open > close
        set1.increasingColor = UIColor ( red: 0.0006, green: 0.2288, blue: 0.001, alpha: 1.0 )
        // 内部是否充满颜色
        set1.increasingFilled = true
        // 赋值数据
        let data = CandleChartData(xVals: xValues, dataSet: set1)
        chartView.data = data
    }
    


}

extension TranscriptDetailViewController : ChartViewDelegate {
    


}

PieChart

饼状图
import UIKit
import Charts

class TranscriptDetailViewController: UIViewController {
    
    var name:String = ""
    var pieChartView = PieChartView()


    @IBOutlet weak var webView: UIWebView!
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.title = name
        
        self.createPieChartView()

 
    }
    

    func createPieChartView()
    {
        pieChartView = PieChartView.init(frame: CGRectMake(0, 0, AppWidth, AppHeight))
        pieChartView.delegate = self;
        // 可以调整大小, 位置
        pieChartView.setExtraOffsets(left: 10.0, top: 10.0, right: 10.0, bottom: 10.0)
        self.view.addSubview(pieChartView)
        var yValues = [BarChartDataEntry]()
        
        // 最好从0 开始. 否则第一个将失去点击效果, 并出现bug...
//        for i in 0...5 {
//            // 占比数据
//            yValues.append(BarChartDataEntry.init(value: (Double)(arc4random_uniform(5)) + 2.0, xIndex: i))
//            
//        }
//        var xValues = [String]()
//        
//        for j in 0...5 {
//            // 描述文字
//            let str = String(format: "%d", j+5)
//            xValues.append(str)
//        }
        
        // 占比数据
        yValues.append(BarChartDataEntry.init(value: 34, xIndex: 0))
        yValues.append(BarChartDataEntry.init(value: 30, xIndex: 1))
        yValues.append(BarChartDataEntry.init(value: 36, xIndex: 2))
        
        // 描述文字
        var xValues = [String]()
        xValues.append("语文")
        xValues.append("数学")
        xValues.append("英语")

        let dataSet: PieChartDataSet = PieChartDataSet.init(yVals: yValues, label: "");
        // 空隙
        dataSet.sliceSpace = 5.0
        var colors = [UIColor]()
        colors.append(UIColor ( red: 0.8185, green: 0.8172, blue: 0.0023, alpha: 1.0 ))
        colors.append(UIColor ( red: 0.0, green: 0.81, blue: 0.81, alpha: 1.0 ))
        colors.append(UIColor.greenColor())
        colors.append(UIColor.grayColor())
        colors.append(UIColor.purpleColor())
        colors.append(UIColor.blueColor())
        dataSet.colors = colors
        // 如果你需要指示文字在外部标注百分比, 你需要这样.
        dataSet.valueLinePart1OffsetPercentage = 0.8;
        dataSet.valueLinePart1Length = 0.2;
        dataSet.valueLinePart2Length = 0.4;
        dataSet.yValuePosition = .OutsideSlice
        let data = PieChartData(xVals: xValues, dataSet: dataSet)
        let formatter = NSNumberFormatter.init()
        formatter.maximumFractionDigits = 1
        formatter.numberStyle = NSNumberFormatterStyle.PercentStyle
        formatter.multiplier = 1.0
        formatter.percentSymbol = " %"
        data.setValueFormatter(formatter)
        data.setValueTextColor(UIColor.blackColor())
        pieChartView.data = data

    }
    


}

extension TranscriptDetailViewController : ChartViewDelegate {
    


}

RadarChart

雷达图
import UIKit
import Charts

class TranscriptDetailViewController: UIViewController {
    
    var name:String = ""
    var radarBarChartView = RadarChartView()


    @IBOutlet weak var webView: UIWebView!
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.title = name
        
        self.createRadarChartView()
    }
    

    func createRadarChartView()
    {
        radarBarChartView = RadarChartView.init(frame: CGRectMake(0, 0, AppWidth, AppHeight))
        
        radarBarChartView.setExtraOffsets(left: 10.0, top: 10.0, right: 10.0, bottom: 10.0)
        // 描述文字
        radarBarChartView.descriptionText = "descriptionText"
        // 指向定点线的宽度
        radarBarChartView.webLineWidth = 2.0
        radarBarChartView.innerWebColor = UIColor.blackColor()
        radarBarChartView.innerWebLineWidth = 0.75
        radarBarChartView.webAlpha = 1.0
        self.view.backgroundColor = UIColor.whiteColor()
        self.view.addSubview(radarBarChartView)

        var yValues1 = [ChartDataEntry]()
        var yValues2 = [ChartDataEntry]()
        var xValues = [String]()
        for i in 0...8 {
            yValues1.append(ChartDataEntry(value: (Double)(arc4random_uniform(5)), xIndex: i))
            yValues2.append(ChartDataEntry(value: (Double)(arc4random_uniform(5)), xIndex: i))
            let str = String(format: "%d", i+5)
            xValues.append(str)
        }
        
        let dataSet = RadarChartDataSet.init(yVals: yValues1, label: "data Set")
        dataSet.drawFilledEnabled = true
        dataSet.setColor(UIColor ( red: 0.7913, green: 0.9949, blue: 0.4941, alpha: 1.0 ))
        dataSet.fillColor = UIColor ( red: 0.7913, green: 0.9949, blue: 0.4941, alpha: 1.0 )
        dataSet.lineWidth = 1.0
        
        let dataSet1 = RadarChartDataSet.init(yVals: yValues2, label: "data Set2")
        dataSet1.drawFilledEnabled = true
        dataSet1.setColor(UIColor ( red: 0.4702, green: 1.0, blue: 0.9962, alpha: 1.0 ))
        dataSet1.fillColor = UIColor ( red: 0.4702, green: 1.0, blue: 0.9962, alpha: 1.0 )
        dataSet1.lineWidth = 1.5
        
        let data = RadarChartData.init(xVals: xValues, dataSets: [dataSet, dataSet1])
        radarBarChartView.data = data
    }

}

extension TranscriptDetailViewController : ChartViewDelegate {

}

你可能感兴趣的:(玩转Charts)