我是前言: 大约几个月前我在某平台写了一篇文章, 文中简单地介绍了Charts两种图表的样式的使用, 不过有种意犹未尽的感觉, 利用周末的空闲时间再次看了看, 有了新的收获, 今天发出来,分享给大家, 来稍加详细的再次走进Charts的世界. 完全纯代码.

经过测试:

1.1使用cocoa pods集成(只能在9.3之后运行), 有知道原因的请在下方评论

1.2 这篇文章的例子我是使用手动加入的framework进行测试的. 如果你不清楚如何加入三方框架请点击看看这篇文章http://www.jianshu.com/p/fd91c10c9f55  如果模拟器能运行, 真机不能运行, 一定看这篇


这篇你可以看到下面这些

  • LineChartView —– 折线

  • BarChartView —— 柱状

  • CandleStickChartView—–K线

  • PieChartView —–饼状

  • RadarChartView —– 雷达


还有这些你看不到0.-, 用法大同小异吧…

折线图 – LineChartView

// 创建-

func createLineChartView()

{

chartView = LineChartView.init(frame: CGRectMake(0, 64, s_w, s_h - 64))

// 签协议

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()]

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.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(), 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))

// 签协议

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

饼状图- PieChartView

pieChartView = PieChartView.init(frame: CGRectMake(0, 0, s_w, s_h))

pieChartView.delegate = self;

// 可以调整大小, 位置

//        pieChartView.setExtraOffsets(left: 20.0, top: 0.0, right: 20.0, bottom: 0.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 {

// 描述文字

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

// 如果你需要指示文字在外部标注百分比, 你需要这样.

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

雷达图- RadarChartView

radarBarChartView = RadarChartView.init(frame: CGRectMake(0, 0, s_w, s_h))

// 描述文字

radarBarChartView.descriptionText = "I am destext"

// 指向定点线的宽度

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

相对图表进行操作, 例如点击 请使用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的库, 介绍的有限, 如果你还感兴趣, 请仔细阅读API吧.


iOS 使用Charts框架 折线,柱状,K线,饼状,雷达全攻略的更多相关文章

  1. iOS:使用贝塞尔曲线绘制图表(折线图、柱状图、饼状图)

    1.介绍: UIBezierPath :画贝塞尔曲线的path类 UIBezierPath定义 : 贝赛尔曲线的每一个顶点都有两个控制点,用于控制在该顶点两侧的曲线的弧度. 曲线的定义有四个点:起始点 ...

  2. SpringMVC框架下使用jfreechart绘制折线图,柱状图,饼状图

    java代码 @Controller public class CityAction { @Autowired private CityBiz cityBiz; //柱状图 @RequestMappi ...

  3. 基于SpringMVC框架使用ECharts3.0实现折线图,柱状图,饼状图,的绘制(上篇)

    页面部分 <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html> ...

  4. jquery和highcharts折线图、柱形图、饼状图-模拟后台传參源代码

    js代码: <script type="text/javascript"> $(function(){ showLine(); showColumn(); showPi ...

  5. 图表echarts折线图,柱状图,饼状图

    总体就是有折线图相关图标的设置,x,y轴的设置,x,y轴或者数据加上单位的设置.饼状图如何默认显示几个数据中的某个数据 折线图:legend(小标题)中间默认是圆圈 改变成直线 在legend设置的时 ...

  6. DevExpress使用之ChartControl控件绘制图表(多坐标折线图、柱状图、饼状图)

    最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...

  7. Android开源图表之树状图和饼状图的官方示例的整理

    最近由于工作需要,所以就在github上搜了下关于chart的三方框架 官方地址https://github.com/PhilJay/MPAndroidChart 由于工作需要我这里整理了一份Ecli ...

  8. iOS使用Charts框架绘制—柱形图

    首先看一下最终要实现的效果: 最终效果 一.初始化barChartView 绘制柱形图需要用到BarChartView这个类,下面是初始化代码: self.barChartView = [[BarCh ...

  9. 步步为营Hibernate全攻略(一)构建Hibernate框架环境

    任何一项新技术的出现都有它的必然性,Hibernate也不例外,所以在掌握Hibernate的具体应用之前我们一定先要了解Hibernate是什么?使用Hibernate会给我们的程序开发带来哪些好处 ...

随机推荐

  1. svn修改密码跟账户

    在co的时候直接输入账户跟密码 svn co  ${SVNURL} ./ --username **--password *** 或者删除缓存文件,在Linux上面 删除~/.subversion/a ...

  2. Mvc Model 模板的获取【学习笔记】

    MVC的Model模板有两种:一种编辑模式(@Html.EditorFor()).一种显示模式(Html.DisplayFor()). 模板的获取与执行(以下转自这里): 当我们调用HtmlHelpe ...

  3. jQuery的preventDefault()

    1. 含义: preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交). 2. 语法: event.preventDefault() 3. 例子: 防止链 ...

  4. PHP 7 探针的安装与测试

    首先,这是一篇软文,没错!就是一篇软文.因为我知道「PHP 是世界上最好的语言」,所以我相信很多人愿意读这篇用户帮忙写的软文,因为这篇软文应该能帮助 PHP 开发的同学一点小忙.我们是一家成立了7年的 ...

  5. Party

    hdu3062:http://acm.hdu.edu.cn/showproblem.php?pid=3062 题意:中文题. 题解:很明显的2-sat.然后要深刻理解命题和逆否命题.如这一题,c1,c ...

  6. ajax post data 获取不到数据,注意 content-type的设置

    ajax post  data  获取不到数据,注意 content-type的设置 .post/get关于 jQuery data 传递数据.网上各种获取不到数据,乱码之类的.好吧今天我也遇到了,网 ...

  7. Java中如何创建进程(转)

    在Java中,可以通过两种方式来创建进程,总共涉及到5个主要的类. 第一种方式是通过Runtime.exec()方法来创建一个进程,第二种方法是通过ProcessBuilder的start方法来创建进 ...

  8. Storm on Yarn 安装配置

    1.背景知识 在不修改Storm任何源代码的情况下,让Storm运行在YARN上,最简单的实现方法是将Storm的各个服务组件(包括Nimbus和Supervisor),作为单独的任务运行在YARN上 ...

  9. AppDomain

    AppDomain http://www.cnblogs.com/xiashengwang/archive/2012/07/17/2594623.html http://www.cnblogs.com ...

  10. [BZOJ2173]整数的lqp拆分

    [题目描述] lqp在为出题而烦恼,他完全没有头绪,好烦啊… 他首先想到了整数拆分.整数拆分是个很有趣的问题.给你一个正整数N,对于N的一个整数拆分就是满足任意m>0,a1 ,a2 ,a3…am ...