iOS 使用Charts框架 折线,柱状,K线,饼状,雷达全攻略
我是前言: 大约几个月前我在某平台写了一篇文章, 文中简单地介绍了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线,饼状,雷达全攻略的更多相关文章
- iOS:使用贝塞尔曲线绘制图表(折线图、柱状图、饼状图)
1.介绍: UIBezierPath :画贝塞尔曲线的path类 UIBezierPath定义 : 贝赛尔曲线的每一个顶点都有两个控制点,用于控制在该顶点两侧的曲线的弧度. 曲线的定义有四个点:起始点 ...
- SpringMVC框架下使用jfreechart绘制折线图,柱状图,饼状图
java代码 @Controller public class CityAction { @Autowired private CityBiz cityBiz; //柱状图 @RequestMappi ...
- 基于SpringMVC框架使用ECharts3.0实现折线图,柱状图,饼状图,的绘制(上篇)
页面部分 <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html> ...
- jquery和highcharts折线图、柱形图、饼状图-模拟后台传參源代码
js代码: <script type="text/javascript"> $(function(){ showLine(); showColumn(); showPi ...
- 图表echarts折线图,柱状图,饼状图
总体就是有折线图相关图标的设置,x,y轴的设置,x,y轴或者数据加上单位的设置.饼状图如何默认显示几个数据中的某个数据 折线图:legend(小标题)中间默认是圆圈 改变成直线 在legend设置的时 ...
- DevExpress使用之ChartControl控件绘制图表(多坐标折线图、柱状图、饼状图)
最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...
- Android开源图表之树状图和饼状图的官方示例的整理
最近由于工作需要,所以就在github上搜了下关于chart的三方框架 官方地址https://github.com/PhilJay/MPAndroidChart 由于工作需要我这里整理了一份Ecli ...
- iOS使用Charts框架绘制—柱形图
首先看一下最终要实现的效果: 最终效果 一.初始化barChartView 绘制柱形图需要用到BarChartView这个类,下面是初始化代码: self.barChartView = [[BarCh ...
- 步步为营Hibernate全攻略(一)构建Hibernate框架环境
任何一项新技术的出现都有它的必然性,Hibernate也不例外,所以在掌握Hibernate的具体应用之前我们一定先要了解Hibernate是什么?使用Hibernate会给我们的程序开发带来哪些好处 ...
随机推荐
- C 字符串倒转,XCode中编译
正在学习ios开发,在前期学习c时,常规方法直接倒转数组的值,只能用于非中文字符,否则出现乱码, 在网上找了点资料,可能是 IDE不一致,一直得不到自己想要的值.花时间自己改了一下,正常通过 //字符 ...
- iOS 实现脉冲雷达以及动态增减元素 By Swift-感谢分享
Swift经过Xcode6 Beta4一版更新后,基本上已经可以作为生产工具了,虽然有一些地方和ObjC比起来要“落后”一些,但也无伤大雅.这里就用Xcode6 Beta4+iOS SDK 8.0开发 ...
- ARCI--做事情的重要方法论
很多朋友都可能碰到这样的情况,有一个任务曾经开会讨论过,目标,时间,参与人都有提到,但是最终就是不了了之,没有下文了,而且后面想起来,要追究责任的时候,发现似乎都没有责任,无从追究.如果这种情况出现, ...
- Ubuntu14.04 和 Windows7 双系统安装
用了一个暑假,我原来的Ubuntu终于挂了,连gnome桌面器都进不去了,索性重装整个Ubuntu.至少这次我知道什么都升级是一个很糟糕的行为. 由于笔者的电脑原来是Win8预装机,所以各种地方都是的 ...
- [BZOJ 1058] [ZJOI2007] 报表统计 【平衡树】
题目链接:BZOJ - 1058 题目分析 这道题看似是需要在序列中插入一些数字,但其实询问的内容只与相邻的元素有关. 那么我们只要对每个位置维护两个数 Ai, Bi, Ai 就是初始序列中 i 这个 ...
- [BZOJ 1901] Dynamic Rankings 【树状数组套线段树 || 线段树套线段树】
题目链接:BZOJ - 1901 题目分析 树状数组套线段树或线段树套线段树都可以解决这道题. 第一层是区间,第二层是权值. 空间复杂度和时间复杂度均为 O(n log^2 n). 线段树比树状数组麻 ...
- GNOME Shell叫板Ubuntu Unity:优劣PK
转自GNOME Shell叫板Ubuntu Unity:优劣PK GNOME Shell 对阵 Ubuntu Unity--默认桌面界面的战火一触即发.双方在台上已经对峙了很长时间,现在是时候决定谁会 ...
- HTML+js+css实现点击图片弹出上传文件窗口的两种思路
第一种:CSS实现 <style><!-- .fileInputContainer{ height:256px; background:url(upfil ...
- Java Random随机种子
第一种情况 Random rand = new Random(47); for(int i=0;i<10;i++) System.out.println(rand.nextInt(100)); ...
- java 集合框架图
Java平台提供了一个全新的集合框架.“集合框架”主要由一组用来操作对象的接口组成.不同接口描述一组不同数据类型. Java 2集合框架图集合接口:6个接口(短虚线表示),表示不同集合类型,是集合框架 ...