玩转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..<dataPoints.count {
            let dataEntry = ChartDataEntry(value: values[i], xIndex: i)
            dataEntries.append(dataEntry)
        }
        let chartDataSet = LineChartDataSet(yVals: dataEntries, label: "Units Sold")
        let chartData = LineChartData(xVals: months, dataSet: chartDataSet)
        // 加上一个界限, 演示图中红色的线
        let jx = ChartLimitLine(limit: 12.0, label: "I am LimitLine")
        chartView.rightAxis.addLimitLine(jx)
        chartView.data = chartData
        // 自定义颜色
        // colors 是一个数组, 可以给相应的颜色
        chartDataSet.colors = [UIColor.redColor()]
        // API 自带颜色模板
        // ChartColorTemplates.liberty()
        // ChartColorTemplates.joyful()
        // ChartColorTemplates.pastel()
        // ChartColorTemplates.colorful()
        // ChartColorTemplates.vordiplom()
        chartDataSet.colors = ChartColorTemplates.colorful()
        /**
         // 动画效果, 简单列举几个, 具体请看API
         case EaseInBack
         case EaseOutBack
         case EaseInOutBack
         case EaseInBounce
         case EaseOutBounce
         case EaseInOutBounce
         */
        chartView.animate(yAxisDuration: 1.0, easingOption: .EaseInBounce)
    }

}

extension TranscriptDetailViewController : ChartViewDelegate {

    // 默认的捏拉缩放和双击来进行缩放, 如果某个柱形条被单击,该柱形条会突出显示
    // 所以单机某个的时候响应不同的事件, 需要自己编写 遵循ChartViewDelegate协议
    // 实现 Delegate
    func chartValueSelected(chartView: ChartViewBase, entry: ChartDataEntry, dataSetIndex: Int,     highlight: ChartHighlight) {
        print("\(entry.value) in \(months[entry.xIndex])")
    }
    
}

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..<dataPoints.count {
            let dataEntry = BarChartDataEntry(value: values[i], xIndex: i)
            dataEntries.append(dataEntry)
        }
        let chartDataSet = BarChartDataSet(yVals: dataEntries, label: "Units Sold")
        let chartData = BarChartData(xVals: months, dataSet: chartDataSet)
        // 加上一个界限, 演示图中红色的线
        let jx = ChartLimitLine(limit: 12.0, label: "I am LimitLine")
        chartView.rightAxis.addLimitLine(jx)
        chartView.data = chartData
        // 自定义颜色
        // 例子中有十二个柱状图
        // colors 是一个数组, 可以给相应的颜色
//        chartDataSet.colors = [UIColor.blueColor(), UIColor.redColor(), UIColor.cyanColor()]
        // API 自带颜色模板
        // ChartColorTemplates.liberty()
        // ChartColorTemplates.joyful()
        // ChartColorTemplates.pastel()
        // ChartColorTemplates.colorful()
        // ChartColorTemplates.vordiplom()
//        chartDataSet.colors = ChartColorTemplates.liberty()
        
        chartDataSet.colors = ChartColorTemplates.joyful()
        /**
         // 动画效果, 简单列举几个, 具体请看API
         case EaseInBack
         case EaseOutBack
         case EaseInOutBack
         case EaseInBounce
         case EaseOutBounce
         case EaseInOutBounce
         */
        chartView.animate(yAxisDuration: 1.0, easingOption: .EaseInBounce)
    }
    


}

extension TranscriptDetailViewController : ChartViewDelegate {
    
    // 默认的捏拉缩放和双击来进行缩放, 如果某个柱形条被单击,该柱形条会突出显示
    // 所以单机某个的时候响应不同的事件, 需要自己编写 遵循ChartViewDelegate协议
    // 实现 Delegate
    func chartValueSelected(chartView: ChartViewBase, entry: ChartDataEntry, dataSetIndex: Int, highlight: ChartHighlight) {
        print("\(entry.value) in \(months[entry.xIndex])")
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}

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 {

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,294评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,493评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,790评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,595评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,718评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,906评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,053评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,797评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,250评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,388评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,018评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2 350

推荐阅读更多精彩内容

  • 一图胜千文,纯粹的数据枯燥、无聊,让人看不下去,改变一下形式,用图表装饰一下,立马有趣多了。既然有这样的外部需求,...
    沉思的Panda阅读 53,649评论 13 70
  • #define MAIN_WIDTH [[UIScreen mainScreen] bounds].size.wi...
    HuLL乐乐阅读 9,670评论 14 6
  • 最近公司项目中要加一个折线图的需求因为是金融项目考虑到后期可能会有大量的饼状和折线图的需求,仔细搜索一番觉得用个成...
    约翰丶码农阅读 19,148评论 10 24
  • 生理期。间隔二十四天,比先前要正常一些。 本来不打算要盘的,总觉得少些什么,还是盘了半小时。泡一会脚,腿还是很僵。...
    冬日蝴蝶结阅读 150评论 0 0
  • 壹 C副大大说,她最佩服地方上来的人。这个地方应该是指京城之下,县城之上的地方。这句话,是她开完某会回来之后的感慨...
    如一的世界阅读 224评论 0 0