iOS 使用Charts框架 折線,柱狀,K線,餅狀,雷達(dá)全攻略

更新 最新版本 語法已經(jīng)改變 2017-3-31

我是前言: 大約幾個(gè)月前我在簡書寫了一篇文章, 文中簡單地介紹了Charts兩種圖表的樣式的使用, 不過有種意猶未盡的感覺, 利用周末的空閑時(shí)間再次看了看, 有了新的收獲, 今天發(fā)出來,分享給大家, 來稍加詳細(xì)的再次走進(jìn)Charts的世界. 完全純代碼.

說在前面的話： 這篇的篇幅確實(shí)是有些長, 不過你可以會一些圖表的tips, 還能熟悉Swift語言的語法. #感覺不錯請點(diǎn)個(gè)贊# 摸摸噠(冷漠臉.png), 如果還想看更多關(guān)于Swift和iOS開發(fā)相關(guān)的知識, 請關(guān)注我.

集成- Charts

1.1使用cocoa pods集成 你可能出現(xiàn)這樣的問題

只能在iOS 9.3

// 解決
platform :ios, '8.0' // 你可能在Podfile中少加入了這句
use_frameworks!
pod 'Charts', '~> 2.2.5'

1.2 這篇文章的例子我是使用手動加入的framework進(jìn)行測試的（iOS8.0之后）. 如果你不清楚如何加入三方框架請點(diǎn)擊看看這篇文章http://www.itdecent.cn/p/fd91c10c9f55

(注: 如果模擬器能運(yùn)行, 真機(jī)不能運(yùn)行, 一定看這篇)

這篇你可以看到下面這些

  • LineChartView ----- 折線
  • BarChartView ------ 柱狀
  • CandleStickChartView-----K線
  • PieChartView -----餅狀
  • RadarChartView ----- 雷達(dá)

當(dāng)然還有一些其他的你看不到0.-, 不過用法大同小異, 演示這幾種相信其他的類型你也同樣會使用了 下面進(jìn)入代碼演示.

折線圖 - LineChartView
折線
// 創(chuàng)建-
func createLineChartView()
    {
        chartView = LineChartView.init(frame: CGRectMake(0, 64, s_w, s_h - 64))
        chartView.lineData
        // 簽協(xié)議
        chartView.delegate = self
        chartView.backgroundColor = UIColor.whiteColor()
        self.view.addSubview(chartView)
    }

// 加上模擬數(shù)據(jù)
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)
        // 加上一個(gè)界限, 演示圖中紅色的線
        let jx = ChartLimitLine(limit: 12.0, label: "I am LimitLine")
        chartView.rightAxis.addLimitLine(jx)
        chartView.data = chartData
        // 自定義顏色
        // colors 是一個(gè)數(shù)組, 可以給相應(yīng)的顏色
        chartDataSet.colors = [UIColor.redColor()]
        chartDataSet.colors = ChartColorTemplates.colorful()
        chartView.animate(yAxisDuration: 1.0, easingOption: .EaseInBounce)
    }
柱狀圖- BarChartView
柱狀
func createLineChartView()
    {
        chartView = BarChartView.init(frame: CGRectMake(0, 64, s_w, s_h - 64))
        chartView.barData
        // 簽協(xié)議
        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)
        // 加上一個(gè)界限, 演示圖中紅色的線
        let jx = ChartLimitLine(limit: 12.0, label: "I am LimitLine")
        chartView.rightAxis.addLimitLine(jx)
        chartView.data = chartData
        // 自定義顏色
        // 例子中有十二個(gè)柱狀圖
        // colors 是一個(gè)數(shù)組, 可以給相應(yīng)的顏色
        chartDataSet.colors = [UIColor.blueColor(), UIColor.redColor(), UIColor.cyanColor(), UIColor.greenColor(), UIColor.brownColor(), UIColor.purpleColor()]
        // API 自帶顏色模板
//        chartDataSet.colors = ChartColorTemplates.liberty()
        chartView.animate(yAxisDuration: 1.0, easingOption: .EaseInBounce)
    }
K線圖- CandleStickChartView
K線
chartView = CandleStickChartView.init(frame: CGRectMake(0, 64, s_w, s_h - 64))
            // 簽協(xié)議
            chartView.delegate = self
            chartView.backgroundColor = UIColor.whiteColor()
            // 畫板顏色
            chartView.gridBackgroundColor = UIColor.clearColor()
            //
            chartView.borderColor = UIColor.whiteColor()
            self.view.addSubview(chartView)
            // 橫軸數(shù)據(jù)
            var xValues = [String]()
            for i in 0...25 {
                xValues.append(NSString(format: "%d", i + 1993) as String)
            }
            // 初始化CandleChartDataEntry數(shù)組
            var yValues = [CandleChartDataEntry]()
            // 產(chǎn)生20個(gè)隨機(jī)立柱數(shù)據(jù)
            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()
            // 內(nèi)部是否充滿顏色
            set1.decreasingFilled = true
            // open > close
            set1.increasingColor = UIColor ( red: 0.0006, green: 0.2288, blue: 0.001, alpha: 1.0 )
            // 內(nèi)部是否充滿顏色
            set1.increasingFilled = true
            // 賦值數(shù)據(jù)
            let data = CandleChartData(xVals: xValues, dataSet: set1)
            chartView.data = data
餅狀圖- PieChartView
餅狀
pieChartView = PieChartView.init(frame: CGRectMake(0, 0, s_w, s_h))
        pieChartView.delegate = self;
        // 可以調(diào)整大小, 位置
//        pieChartView.setExtraOffsets(left: 20.0, top: 0.0, right: 20.0, bottom: 0.0)
        self.view.addSubview(pieChartView)
        var yValues = [BarChartDataEntry]()
        // 最好從0 開始. 否則第一個(gè)將失去點(diǎn)擊效果, 并出現(xiàn)bug...
        for i in 0...5 {
            // 占比數(shù)據(jù)
            yValues.append(BarChartDataEntry.init(value: (Double)(arc4random_uniform(5)) + 2.0, xIndex: i))
            
        }
        var xValues = [String]()
        for j in 0...5 {
            // 描述文字
            xValues.append(NSString(format: "%d\\\\("夏天然后")", j + 5) as String)
        }
        //
        let dataSet: PieChartDataSet = PieChartDataSet.init(yVals: yValues, label: "data Set");
        // 空隙
        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
        // 如果你需要指示文字在外部標(biāo)注百分比, 你需要這樣.
        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
雷達(dá)圖- RadarChartView
雷達(dá)
radarBarChartView = RadarChartView.init(frame: CGRectMake(0, 0, s_w, s_h))
        // 描述文字
        radarBarChartView.descriptionText = "I am destext"
        // 指向定點(diǎn)線的寬度
        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))
            //
            xValues.append(NSString(format: "%d\\\\("夏天然后")", i + 5) as String)
        }
        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
相對圖表進(jìn)行操作, 例如點(diǎn)擊 請使用ChartViewDelegate 
optional public func chartValueSelected(chartView: Charts.ChartViewBase, entry: Charts.ChartDataEntry, dataSetIndex: Int, highlight: Charts.ChartHighlight)
optional public func chartValueNothingSelected(chartView: Charts.ChartViewBase)
optional public func chartScaled(chartView: Charts.ChartViewBase, scaleX: CGFloat, scaleY: CGFloat)
optional public func chartTranslated(chartView: Charts.ChartViewBase, dX: CGFloat, dY: CGFloat)

畢竟是將近10000Star的庫, 介紹的有限, 如果你還感興趣, 請仔細(xì)閱讀API吧.

iOS 實(shí)現(xiàn)第三方登錄(圖文)
iOS 走進(jìn)Facebook POP的世界 -- 簡書
Swift版本仿網(wǎng)易云音樂播放音樂動畫效果-- 簡書
三分鐘教你把代碼托管到Github -- 簡書
Swift 很強(qiáng)大的圖表庫-Charts使用 -- 簡書
Swift版仿簡書App淘寶App很友好彈出view效果 -- 簡書
iOS UICollectionView高級用法“長按自由移動cell重排 -- 簡書
iOS仿微信App添加帶箭頭的view -- 簡書
iOS仿美團(tuán)外賣餓了嗎App點(diǎn)餐動畫 -- 簡書
你要的Swift資料 -- 簡書

走心文章, 值得點(diǎn)贊 ---文/夏天然后尊重原創(chuàng)
原文鏈接

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,026評論 4贊 61
  • 文/公羽依娜 1、 十年前，你過著怎樣的生活？是否想過自己今天是什么樣子？過著怎樣的生活？ 十年前的我，生活在一座...
    公羽依娜閱讀 1,313評論 5贊 23
  • 前段時(shí)間，一個(gè)高中的同學(xué)（好朋友）發(fā)個(gè)信息給我，說她剛在朋友圈發(fā)的一件遭遇，讓我發(fā)表一下自己的看法，我很不好意思地...
    sharespeak閱讀 1,435評論 16贊 32
  • 近兩個(gè)月狀態(tài)愈發(fā)疲憊，早上醒來，不愿意去工作，實(shí)在沒什么動力。 這是一個(gè)創(chuàng)業(yè)初期的公司，問題層出不窮，比比皆是。由...
    爾訫閱讀 322評論 0贊 1
  • 昨天在和其他同事研究自動打包時(shí)，發(fā)現(xiàn)能夠?qū)?ipa 包重新進(jìn)行簽名。what's hell? how to ach...
    Dosun閱讀 8,892評論 5贊 15

友情鏈接更多精彩內(nèi)容