JHChart iOS图表工具库1.0.3新版本详解

2023-11-27 18:10
文章标签 工具 详解 图表 版本 1.0 ios jhchart

本文主要是介绍JHChart iOS图表工具库1.0.3新版本详解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

JHChart iOS图表工具库1.0.3新版本详解

图片发自简书App

前言。

从2016年4月14日开始，本人着手开发了JHChart图表工具库。经过断断续续的开发，截止到现在，已经实现了折线图、柱状图、饼状图、环形图和表格样式的图表功能。为了方便使用，我已经将一个简单的demo上传到github上面，但是这些显然不够，我们还需要一个更加明了的方式介绍这个库的用法，打造出各种我们需要的效果，如下为至今最新版本教程

集成JHChart

集成JHChart有两种方法

  • 第一种用法简单且版本保持最新，直接去demo中将JHChart库文件夹拖入你的项目中即可
  • 第二种使用cocoapod导入(版本可能非最新)，在Podfile中插入如下代码:
    pod 'JHChart','~> 1.0.3'

(如果对cocoapods使用不熟悉，可以去官网细细琢磨，在这里就不过多赘述了。)

经过上面的集成，编译一下，如果没有报错就成功将代码库引入项目了，如果有报错，请再仔细查看相关步骤是否正确哦。
***

JHChart简介

JHChart的图表主要类库及样式包括：
  • JHLineChart 折线/曲线图类库
  • JHColumnChart 柱状图
  • JHPieChart 饼状图
  • JHRingChart 环状图
  • JHTableChart 表格图
  • JHRadarChart 雷达图
工作日志如下：
  • 2016 ~
  • 4.14日上传第一版 折线图 包括不同的象限内折线图 将会持续更新 效果图如下
  • 5.3日上传更新版 新增了饼状图初稿
  • 6.5日添加了环状图
  • 8.8日添加了柱状图
  • 8.25日添加了表格图
  • 9.1日添加折线图的曲线样式及内容填充效果
  • 10.20添加了雷达图
  • 11.30修复了多个bug
  • 12.13修复折线图Y轴数值过大时显示异常bug

  • 12.13发布cocoapod新版本1.0.3


    ***

    构建折线/曲线图 --JHLineChart

描述：JHLineChart可以创建数据源多样的线性图表，包括折线和曲线图，可以根据数据源判断是否为多条线性表。并且，可以根据需求设置是否有区间填充颜色。同时该表支持不同象限的不同需求，这里只是设置了第一象限的示例，其他象限使用方法一致。

/*        创建表对象         */
JHLineChart *lineChart = [[JHLineChart alloc] initWithFrame:CGRectMake(10, 100, k_MainBoundsWidth-20, 300) andLineChartType:JHChartLineValueNotForEveryX];
/* X轴的刻度值 可以传入NSString或NSNumber类型  并且数据结构随折线图类型变化而变化 详情看文档或其他象限X轴数据源示例*/
lineChart.xLineDataArr = @[@"0",@"1",@"2",@3,@4,@5,@6,@7];
/* 折线图的不同类型  按照象限划分 不同象限对应不同X轴刻度数据源和不同的值数据源 */
lineChart.lineChartQuadrantType = JHLineChartQuadrantTypeFirstQuardrant;
/* 数据源数组 如果是一组数据 只需一个数组 如果是多组数据 需要传入多组数据 */
lineChart.valueArr = @[@[@"1",@"12",@"1",@6,@4,@9,@6,@7],@[@"3",@"1",@"2",@16,@2,@3,@5,@10]];
/* 值折线的折线颜色 默认暗黑色*/
lineChart.valueLineColorArr =@[ [UIColor purpleColor], [UIColor brownColor]];
/* 值点的颜色 默认橘黄色*/
lineChart.pointColorArr = @[[UIColor orangeColor],[UIColor yellowColor]];
/* X和Y轴的颜色 默认暗黑色 */
lineChart.xAndYLineColor = [UIColor blackColor];
/* XY轴的刻度颜色 m */
lineChart.xAndYNumberColor = [UIColor blueColor];
/* 坐标点的虚线颜色 */
lineChart.positionLineColorArr = @[[UIColor blueColor],[UIColor greenColor]];
/*        设置是否填充内容 默认为否         */
lineChart.contentFill = YES;
/*        设置为曲线路径         */
lineChart.pathCurve = YES;
/*        设置填充颜色数组         */
lineChart.contentFillColorArr = @[[UIColor colorWithRed:0.500 green:0.000 blue:0.500 alpha:0.468],[UIColor colorWithRed:0.500 green:0.214 blue:0.098 alpha:0.468]];
[self.view addSubview:lineChart];
/*        开始动画         */
[lineChart showAnimation];

效果图：
折线图
***

构建柱状图 --JHColumnChart

描述：JHColumnChart是一个可滚动的柱状图，您可以设置灵活的数据源数组来绘制您需要的样式，它不仅支持设置不同的柱状体颜色，还给您提供了多个描述属性，用来标记不同的样式

 /*        创建对象         */
JHColumnChart *column = [[JHColumnChart alloc] initWithFrame:CGRectMake(0, 100, k_MainBoundsWidth, k_MainBoundsWidth)];
/*        创建数据源数组 每个数组即为一个模块数据 例如第一个数组可以表示某个班级的不同科目的平均成绩 下一个数组表示另外一个班级的不同科目的平均成绩         */
column.valueArr = @[@[@12,@15,@20],@[@22,@15,@20],@[@12,@5,@40],@[@2,@15,@20]];
/*       该点 表示原点距左下角的距离         */
column.originSize = CGPointMake(30, 30);
/*        第一个柱状图距原点的距离         */
column.drawFromOriginX = 10;
/*        柱状图的宽度         */
column.columnWidth = 40;
/*        X、Y轴字体颜色         */
column.drawTextColorForX_Y = [UIColor greenColor];
/*        X、Y轴线条颜色         */
column.colorForXYLine = [UIColor greenColor];
/*        每个模块的颜色数组 例如A班级的语文成绩颜色为红色 数学成绩颜色为绿色         */
column.columnBGcolorsArr = @[[UIColor redColor],[UIColor greenColor],[UIColor orangeColor]];
/*        模块的提示语         */
column.xShowInfoText = @[@"A班级",@"B班级",@"C班级",@"D班级"];
/*        开始动画         */
[column showAnimation];
[self.view addSubview:column];

效果如下：
柱状图
***

饼状图 --JHPieChart

描述：JHPieChart可根据您的数据源和视图大小设置，自动生成大小合适，并且有提示动画的饼状图。当您点击某块饼状图时，会动画显示当前的饼块信息。

JHPieChart *pie = [[JHPieChart alloc] initWithFrame:CGRectMake(100, 100, 321, 421)];
pie.center = CGPointMake(CGRectGetMaxX(self.view.frame)/2, CGRectGetMaxY(self.view.frame)/2);
/* 饼状图数值 会自动根据数值计算百分比 */
pie.valueArr = @[@18,@10,@25,@40,@18,@10,@25,@40,@18,@10,@15,@12,@30,@18];
/* 每一个扇形区的描述 必须要填 并且数量必须和饼状图数值个数相同 */
pie.descArr = @[@"第一个元素",@"第二个元素",@"第三个元素",@"第四个元素",@"5",@"6",@"7",@"8",@"9",@"10",@"23",@"12",@"21",@"30"];
pie.backgroundColor = [UIColor whiteColor];
[self.view addSubview:pie];
/*        触碰某块饼图时动画偏移值         */
pie.positionChangeLengthWhenClick = 15;
/*        动画展示         */
[pie showAnimation];

效果图如下：
饼状图
***

环形图 --JHRingChart

JHRingChart 根据您的数据源，自动计算相关数据比例，动画展示环状图，并且从每个环段引出相关信息提示

/*        创建对象         */
JHRingChart *ring = [[JHRingChart alloc] initWithFrame:CGRectMake(0, 100, k_MainBoundsWidth, k_MainBoundsWidth)];
/*        背景颜色         */
ring.backgroundColor = [UIColor blackColor];
/*        数据源数组 只需要传入值 相应的比例会自动计算         */
ring.valueDataArr = @[@"0.5",@"5",@"2",@"10",@"6"];
/*        环图的宽度         */
ring.ringWidth = 35.0;
/*        每段环图的填充颜色         */
ring.fillColorArray = @[[UIColor colorWithRed:1.000 green:0.783 blue:0.371 alpha:1.000], [UIColor colorWithRed:1.000 green:0.562 blue:0.968 alpha:1.000],[UIColor colorWithRed:0.313 green:1.000 blue:0.983 alpha:1.000],[UIColor colorWithRed:0.560 green:1.000 blue:0.276 alpha:1.000],[UIColor colorWithRed:0.239 green:0.651 blue:0.170 alpha:1.000]];
/*        动画展示         */
[ring showAnimation];
[self.view addSubview:ring];

效果图如下：
环形图
***

表格 --JHTableChart

描述：JHTableChart用于静态绘制样式多变的表格视图，所有的单元格展示样式取决于数据源，不需要特殊的处理某一个单元格，十分灵活易用

/*        创建对象         */
JHTableChart *table = [[JHTableChart alloc] initWithFrame:CGRectMake(10, 64, k_MainBoundsWidth-20, k_MainBoundsHeight)];
/*        表名称         */
table.tableTitleString = @"全选jeep自由光";
/*        每一列的声明 其中第一个如果需要分别显示行和列的说明 可以用‘|’分割行和列         */
table.colTitleArr = @[@"属性|配置",@"外观",@"内饰",@"数量"];
/*        列的宽度数组 从第一列开始         */
table.colWidthArr = @[@100.0,@120.0,@70,@100];
/*        表格体的文字颜色         */
table.bodyTextColor = [UIColor redColor];
/*        最小的方格高度         */
table.minHeightItems = 40;
/*        表格的线条颜色         */
table.lineColor = [UIColor orangeColor];
/*        数据源数组 按照从上到下表示每行的数据 如果其中一行中某列存在多个单元格 可以再存入一个数组中表示         */
table.dataArr = @[@[@"2.4L优越版",@"2016皓白标准漆蓝棕",@[@"鸽子白",@"鹅黄",@"炫彩绿"],@[@"4"]],@[@"2.4专业版",@[@"2016皓白标准漆蓝棕",@"2016晶黑珠光漆黑",@"2016流沙金珠光漆蓝棕"],@[@"鸽子白",@"鹅黄",@"炫彩绿",@"彩虹多样色"],@[@"4",@"5",@"3"]],@[@"2.4豪华版",@[@"4",@"3",@"2"]],@[@"2.4旗舰版"]];
/*        显示 无动画效果         */
[table showAnimation];
[self.view addSubview:table];
/*        设置表格的布局 其中 [table heightFromThisDataSource] 为自动按照当前数据源计算所需高度        */
table.frame = CGRectMake(10, 64, k_MainBoundsWidth-20, [table heightFromThisDataSource]);

效果图：
表格图
***

雷达图 --JHRadarChart

** 描述：JHRadarChart用于静态绘制雷达图，所有的单元数据来自您的自定义数据源**

JHRadarChart *radarChart = [[JHRadarChart alloc] initWithFrame:CGRectMake(10, 74, k_MainBoundsWidth - 20, k_MainBoundsWidth - 20)];
radarChart.backgroundColor = [UIColor whiteColor];
/*       每个顶点的描述文字         */
radarChart.valueDescArray = @[@"击杀",@"能力",@"生存",@"推塔",@"补兵",@"其他"];/*         基本的分层个数 即刻度的个数        */
radarChart.layerCount = 5;/*        Array of data sources, the need to add an array of arrays         */
radarChart.valueDataArray = @[@[@"80",@"40",@"100",@"76",@"75",@"50"],@[@"50",@"80",@"30",@"46",@"35",@"50"]];/*        层的背景颜色 建议设置带有透明度的颜色        */
radarChart.layerFillColor = [UIColor colorWithRed:94/ 256.0 green:187/256.0 blue:242 / 256.0 alpha:0.5];/*        具体展示对象的填充颜色         */
radarChart.valueDrawFillColorArray = @[[UIColor colorWithRed:57/ 256.0 green:137/256.0 blue:21 / 256.0 alpha:0.5],[UIColor colorWithRed:149/ 256.0 green:68/256.0 blue:68 / 256.0 alpha:0.5]];/*      展示       */
[radarChart showAnimation];[self.view addSubview:radarChart];

效果图：

some nice chart

结语

到这里，我们已经将JHChart中的每种样式进行了一次演示，你可以按照这种方式，将项目所需的图表快速的生成出来。并且，JHChart将会持续更新，欢迎大家提出不同的需求和意见。喜欢的小伙伴可以给个✨


***

分类: CoreAnimation详解主题, 核心动画相关, 图表绘制

这篇关于JHChart iOS图表工具库1.0.3新版本详解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/428254。

相关文章

Nginx location匹配模式与规则详解

Nginx location匹配模式与规则详解

《Nginxlocation匹配模式与规则详解》：本文主要介绍Nginxlocation匹配模式与规则,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、环境二、匹配模式1. 精准模式2. 前缀模式（不继续匹配正则）3. 前缀模式（继续匹配正则）4. 正则模式（大
阅读更多...
Android实现在线预览office文档的示例详解

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档（如Word、Excel、PPT）是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一：WebView + Office Onl
阅读更多...
Java实现优雅日期处理的方案详解

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2
阅读更多...
Java中的JSONObject详解

Java中的JSONObject详解

《Java中的JSONObject详解》：本文主要介绍Java中的JSONObject详解,需要的朋友可以参考下... Java中的jsONObject详解一、引言在Java开发中，处理JSON数据是一种常见的需求。JSONObject是处理JSON对象的一个非常有用的类，它提供了一系列的API来操作J
阅读更多...
HTML5中的Microdata与历史记录管理详解

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性，它允许开发者在HTML文档中添加更多的语义信息，以便于搜索引擎和浏览器更好地理解页面内容，本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M
阅读更多...
html5的响应式布局的方法示例详解

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》：本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法，简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局，详细内容请阅读本文，希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的
阅读更多...
HTML5表格语法格式详解

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中，表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式，感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中，表格主要通过< tab
阅读更多...
MySql match against工具详细用法

MySql match against工具详细用法

《MySqlmatchagainst工具详细用法》在MySQL中,MATCH……AGAINST是全文索引（Full-Textindex）的查询语法,它允许你对文本进行高效的全文搜素,支持自然语言搜... 目录一、全文索引的基本概念二、创建全文索引三、自然语言搜索四、布尔搜索五、相关性排序六、全文索引的限制七
阅读更多...
Linux之计划任务和调度命令at/cron详解

Linux之计划任务和调度命令at/cron详解

《Linux之计划任务和调度命令at/cron详解》：本文主要介绍Linux之计划任务和调度命令at/cron的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux计划任务和调度命令at/cron一、计划任务二、命令{at}介绍三、命令语法及功能 :at
阅读更多...
Java使用SLF4J记录不同级别日志的示例详解

Java使用SLF4J记录不同级别日志的示例详解

《Java使用SLF4J记录不同级别日志的示例详解》SLF4J是一个简单的日志门面,它允许在运行时选择不同的日志实现,这篇文章主要为大家详细介绍了如何使用SLF4J记录不同级别日志,感兴趣的可以了解下... 目录一、SLF4J简介二、添加依赖三、配置Logback四、记录不同级别的日志五、总结一、SLF4J
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2