iOS 使用Charts框架 折线,柱状,K线,饼状,雷达全攻略

2023-12-22 18:48

本文主要是介绍iOS 使用Charts框架 折线,柱状,K线,饼状,雷达全攻略,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

说在前面的话: 这篇的篇幅确实是有些长, 不过你可以会一些图表的tips, 还能熟悉Swift语言的语法. #感觉不错请点个赞# 摸摸哒(冷漠脸.png), 如果还想看更多关于Swift和iOS开发相关的知识, 请关注我.

微博@夏天是个大人了欢迎你关注我你还可以加入我创建技术交流群: 498143780 与我交流. 欢迎你加入
尊重原创 原文链接
集成- Charts

1.1使用cocoa pods集成 你可能出现这样的问题
只能在iOS 9.3

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

1.2 这篇文章的例子我是使用手动加入的framework进行测试的(iOS8.0之后). 如果你不清楚如何加入三方框架请点击看看这篇文章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.lineData// 签协议chartView.delegate = selfchartView.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.barData// 签协议chartView.delegate = selfchartView.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 = selfchartView.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.0let low = (Double)(arc4random_uniform(9)) + 8.0let open = (Double)(arc4random_uniform(6)) + 1.0let close = (Double)(arc4random_uniform(6)) + 1.0let even = j % 2 == 0yValues.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 colorset1.setColor(UIColor.blueColor())set1.shadowColor = UIColor ( red: 0.5536, green: 0.5528, blue: 0.0016, alpha: 1.0 )// 立线的宽度set1.shadowWidth = 0.7// close >= openset1.decreasingColor = UIColor.redColor()// 内部是否充满颜色set1.decreasingFilled = true// open > closeset1.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.0var 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 = .OutsideSlicelet data = PieChartData(xVals: xValues, dataSet: dataSet)let formatter = NSNumberFormatter.init()formatter.maximumFractionDigits = 1formatter.numberStyle = NSNumberFormatterStyle.PercentStyleformatter.multiplier = 1.0formatter.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.0radarBarChartView.innerWebColor = UIColor.blackColor()radarBarChartView.innerWebLineWidth = 0.75radarBarChartView.webAlpha = 1.0self.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 = truedataSet.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.0let dataSet1 = RadarChartDataSet.init(yVals: yValues2, label: "data Set2")dataSet1.drawFilledEnabled = truedataSet1.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.5let 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线,饼状,雷达全攻略的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/525057

相关文章

Spring Cloud之注册中心Nacos的使用详解

《SpringCloud之注册中心Nacos的使用详解》本文介绍SpringCloudAlibaba中的Nacos组件,对比了Nacos与Eureka的区别,展示了如何在项目中引入SpringClo... 目录Naacos服务注册/服务发现引⼊Spring Cloud Alibaba依赖引入Naco编程s依

Java springBoot初步使用websocket的代码示例

《JavaspringBoot初步使用websocket的代码示例》:本文主要介绍JavaspringBoot初步使用websocket的相关资料,WebSocket是一种实现实时双向通信的协... 目录一、什么是websocket二、依赖坐标地址1.springBoot父级依赖2.springBoot依赖

Java使用Mail构建邮件功能的完整指南

《Java使用Mail构建邮件功能的完整指南》JavaMailAPI是一个功能强大的工具,它可以帮助开发者轻松实现邮件的发送与接收功能,本文将介绍如何使用JavaMail发送和接收邮件,希望对大家有所... 目录1、简述2、主要特点3、发送样例3.1 发送纯文本邮件3.2 发送 html 邮件3.3 发送带

使用DeepSeek搭建个人知识库(在笔记本电脑上)

《使用DeepSeek搭建个人知识库(在笔记本电脑上)》本文介绍了如何在笔记本电脑上使用DeepSeek和开源工具搭建个人知识库,通过安装DeepSeek和RAGFlow,并使用CherryStudi... 目录部署环境软件清单安装DeepSeek安装Cherry Studio安装RAGFlow设置知识库总

Python FastAPI入门安装使用

《PythonFastAPI入门安装使用》FastAPI是一个现代、快速的PythonWeb框架,用于构建API,它基于Python3.6+的类型提示特性,使得代码更加简洁且易于绶护,这篇文章主要介... 目录第一节:FastAPI入门一、FastAPI框架介绍什么是ASGI服务(WSGI)二、FastAP

Spring-AOP-ProceedingJoinPoint的使用详解

《Spring-AOP-ProceedingJoinPoint的使用详解》:本文主要介绍Spring-AOP-ProceedingJoinPoint的使用方式,具有很好的参考价值,希望对大家有所帮... 目录ProceedingJoinPoijsnt简介获取环绕通知方法的相关信息1.proceed()2.g

Maven pom.xml文件中build,plugin标签的使用小结

《Mavenpom.xml文件中build,plugin标签的使用小结》本文主要介绍了Mavenpom.xml文件中build,plugin标签的使用小结,文中通过示例代码介绍的非常详细,对大家的学... 目录<build> 标签Plugins插件<build> 标签<build> 标签是 pom.XML

JAVA虚拟机中 -D, -X, -XX ,-server参数使用

《JAVA虚拟机中-D,-X,-XX,-server参数使用》本文主要介绍了JAVA虚拟机中-D,-X,-XX,-server参数使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有... 目录一、-D参数二、-X参数三、-XX参数总结:在Java开发过程中,对Java虚拟机(JVM)的启动参数进

Java中使用注解校验手机号格式的详细指南

《Java中使用注解校验手机号格式的详细指南》在现代的Web应用开发中,数据校验是一个非常重要的环节,本文将详细介绍如何在Java中使用注解对手机号格式进行校验,感兴趣的小伙伴可以了解下... 目录1. 引言2. 数据校验的重要性3. Java中的数据校验框架4. 使用注解校验手机号格式4.1 @NotBl

Python结合Flask框架构建一个简易的远程控制系统

《Python结合Flask框架构建一个简易的远程控制系统》这篇文章主要为大家详细介绍了如何使用Python与Flask框架构建一个简易的远程控制系统,能够远程执行操作命令(如关机、重启、锁屏等),还... 目录1.概述2.功能使用系统命令执行实时屏幕监控3. BUG修复过程1. Authorization