iOS中的图表Charts

iOS中的图表，包括：折线图，柱状图，饼图。

对于数据的展示，最常见的就是柱状图，折线图了。在的上家公司用的柱状图都是自己写的，自己封装的。现在公司接手的项目原来是用core-plothttps://github.com/core-plot的第三方库。现在打算尝试一下新的第三方库：Chartshttps://github.com/danielgindi/Charts界面更加的好看了。

charts的前期准备

可以看它那个READMe.md,就写了使用，一种共识直接拖进项目，由于是用swift写的，OC也可以使用，因此要设置桥接文件，才可以。一种是使用cocoapods，还有一种是使用Carthage安装。

我用的是cocoapods的方式：

先cocoads安装：

$sudo gem install -n /usr/local/bin cocoapods

$pod setup

集成Charts：

新建一个项目TestChatDemos

cd 把工程直接拖过来

创建podfile文件

touch podfile

open -a xcode podfile

在podfile文件中输入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
platform :iOS, '8.1'
use_frameworks!

target 'TestCharsDemo' do

pod 'Charts'
pod 'Charts/Realm'
post_install do |installer|
    installer.pods_project.targets.each do |target|
       target.build_configurations.each do |config|
           config.build_settings['SWIFT_VERSION'] = '3.0'

        end

    end
end
end

pod search Charts

pod install

设置桥接文件

建立与Swift的桥接文件，建立一个以swift文件，提示是否建立桥接，点击creat bridging header

将pods——testChatDemos。frameworkios添加到 general->embedded binaries

在桥接文件中写上要引用的swift头文件 @import Charts；

用到时导入 #import “testChartDemos-bridging-header.h”的头文件，然后就可以使用Charts里的东西了

使用ChartsDemos里的东西的时候，要配置product module name 为（TestCharsDemo）系统会自动生成

“TestCharsDemo-Swift.h”导入
“Chart-swift.h”的文件导入

这样基本就可以运行程序看到ChartsDemo里的案例了。

使用Charts

接下来就可以参照GitHUB官网上的Demo来写你需要的图形了。

使用这个库无非就是几个问题：
写界面，放入数据。

  1. 看你的需求是需要那种图，各个图的样式的属性。
  2. x轴，y轴的数据是从哪里获得的。
  3. x轴和y轴的数据是否可以动态变化。
  4. 该如何把从服务器传过来的数组对应到图中。

LineChart折线图

Line Chart单折线

1.首先是需要LineChartView。
然后是ChartLimitLine-x轴的限制线。
ChartLimitLine-Y轴的限制线
ChartYAxis设置Y轴，有左边的Y轴leftAxis和右边的Y轴rightAxis。
BalloonMarker

设置x轴和Y轴的数据的方法.

1
2
3
4
5
6
7
NSMutableArray *values = [[NSMutableArray alloc] init];
    
    for (int i = 0; i < count; i++)
    {
        double val = arc4random_uniform(range) + 3;
        [values addObject:[[ChartDataEntry alloc] initWithX:i y:val icon: [UIImage imageNamed:@"icon"]]];
    }

对于0到Count的x轴的值，随机的产生y值，并放入数组values中，其中values是<__NSArrayM 0x600000057670>(
ChartDataEntry, x: 0.0, y 53.0,
ChartDataEntry, x: 1.0, y 91.0,
ChartDataEntry, x: 2.0, y 44.0）这样的。

然后是LineChartDataSet，每一个set对应一条折线。把上面的values放入这个set中当做这条线的各个坐标点。设置它的属性。
把每一个set都放入dataSets中，作为LineChartData的数据源，也就是chartView的data源了。

Line Chart(Dual YAxis)双折线

ChartLegend设置图例，就是每条线Dataset的说明。
对于其他同上面，其中上面的values变成了三个yVals.放入三个LineChartDataSet中，设置每一个set的属性。

Multiple Lines Chart多种折线图

设置ChartLegend，没有设置x轴和y轴。其他同上。

Colored Line Chart彩色的折线图

设置了_chartViews的Count为4，然后对于每一个_chartViews固定了range就是高度为100.其他同上。

TimeLine Chart时间线的折线图

LineChartTimeViewController

Filled Line Chart 填充的折线图

BarChart柱状条形图

Bar Chart竖的条形图

和折线图也差不多。设置x轴ChartXAxis，设置y轴ChartYAxis的leftAxis和rightAxis，图例ChartLegend.

1
2
3
4
5
6
7
8
9
10
11
12
NSMutableArray *yVals = [[NSMutableArray alloc] init];
    
    for (int i = start; i < start + count + 1; i++)
    {
        double mult = (range + 1);
        double val = (double) (arc4random_uniform(mult));
        if (arc4random_uniform(100) < 25) {
            [yVals addObject:[[BarChartDataEntry alloc] initWithX:i y:val icon: [UIImage imageNamed:@"icon"]]];
        } else {
            [yVals addObject:[[BarChartDataEntry alloc] initWithX:i y:val]];
        }
    }

po yVals

<__NSArrayM 0x60800004d4d0>(
ChartDataEntry, x: 1.0, y 18.0,
ChartDataEntry, x: 2.0, y 36.0,
ChartDataEntry, x: 3.0, y 17.0
)

每一个BarChartDataSet是一个柱状图，然后放到datasets中他们会作为BarChartData的数据源。也是_chartView的data

Horizontal Bar Chart横的条形图

就是左边的Y轴是数据的X轴，下面的一条x轴是数据的Y轴。yVals是<__NSArrayM 0x6100000591a0>(
ChartDataEntry, x: 0.0, y 3.0,
ChartDataEntry, x: 10.0, y 20.0,
ChartDataEntry, x: 20.0, y 50.0,
ChartDataEntry, x: 30.0, y 7.0,
ChartDataEntry, x: 40.0, y 33.0,
ChartDataEntry, x: 50.0, y 19.0,
ChartDataEntry, x: 60.0, y 26.0）

Multiple Bars Chart多种条形图

Stack Bar Chart堆积的柱状条形图

Stack Bar Chart Negative堆积的反向柱状条形图

Another Bar Chart干净的条形图

Sinus Bar Chart正弦柱状图

BarChart positive/negative正反向的柱状图

PieChart饼图

PieChartView.不再是X轴和Y轴，而是表示一共把饼图分几块和一共的百分比。

1
2
3
4
5
6
NSMutableArray *values = [[NSMutableArray alloc] init];
    
for (int i = 0; i < count; i++)
{
    [values addObject:[[PieChartDataEntry alloc] initWithValue:(arc4random_uniform(mult) + mult / 5) label:parties[i % parties.count] icon: [UIImage imageNamed:@"icon"]]];
}

把values放入PieChartDataSet中，其中values是下面的：

1
2
3
4
5
6
7
8
9
10
11
12
Pie entries do not have x values
Pie entries do not have x values
Pie entries do not have x values
Pie entries do not have x values
Pie entries do not have x values
Pie entries do not have x values
<__NSArrayM 0x610000042910>(
ChartDataEntry, x: 0.0, y 96.03017578125,
ChartDataEntry, x: 0.0, y 118.03017578125,
ChartDataEntry, x: 0.0, y 27.03017578125,
ChartDataEntry, x: 0.0, y 115.03017578125,
)

Pie Chart饼图、

Pie Chart With Value lines带有值的饼图

Half Pie Chart一半的饼图

Scatter Chart离散图

Bubble Chart气泡图

Combine Chart结合的图

Radar Chart雷达分散图

Candle Stick Chart蜡烛状的图

Demo地址：https://github.com/peilinghui/BokeDemo/tree/master/PLHDemo

其他图表框架

PNCharthttps://github.com/peilinghui/PNChart

本文标题:iOS中的图表Charts

文章作者:向阳

发布时间:2017年06月30日 - 20时17分

最后更新:2017年07月06日 - 11时28分

原始链接:http://peilinghui.com/2017/06/30/iOS中的图表Charts/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

文章目录
  1. 1. charts的前期准备
    1. 1.1. 先cocoads安装：
    2. 1.2. 集成Charts：
    3. 1.3. 创建podfile文件
    4. 1.4. 设置桥接文件
  2. 2. 使用Charts
    1. 2.1. LineChart折线图
      1. 2.1.1. Line Chart单折线
      2. 2.1.2. Line Chart(Dual YAxis)双折线
      3. 2.1.3. Multiple Lines Chart多种折线图
      4. 2.1.4. Colored Line Chart彩色的折线图
      5. 2.1.5. TimeLine Chart时间线的折线图
      6. 2.1.6. Filled Line Chart 填充的折线图
    2. 2.2. BarChart柱状条形图
      1. 2.2.1. Bar Chart竖的条形图
      2. 2.2.2. Horizontal Bar Chart横的条形图
      3. 2.2.3. Multiple Bars Chart多种条形图
      4. 2.2.4. Stack Bar Chart堆积的柱状条形图
      5. 2.2.5. Stack Bar Chart Negative堆积的反向柱状条形图
      6. 2.2.6. Another Bar Chart干净的条形图
      7. 2.2.7. Sinus Bar Chart正弦柱状图
      8. 2.2.8. BarChart positive/negative正反向的柱状图
    3. 2.3. PieChart饼图
      1. 2.3.1. Pie Chart饼图、
      2. 2.3.2. Pie Chart With Value lines带有值的饼图
      3. 2.3.3. Half Pie Chart一半的饼图
    4. 2.4. Scatter Chart离散图
    5. 2.5. Bubble Chart气泡图
    6. 2.6. Combine Chart结合的图
    7. 2.7. Radar Chart雷达分散图
    8. 2.8. Candle Stick Chart蜡烛状的图
  3. 3. 其他图表框架
本站总访问量次 本站访客数人次 ,