iOS在OC项目中集成Charts绘制图表框架
leer8647
8年前
<p>Charts以一款用于绘制图表的框架，可以绘制柱状图、折线图、K线图、饼状图等. 由于Charts只有Swift版本，所以在这里详细的讲一下在OC项目中怎么导入Charts框架，下面开始一步一步做！</p> <p>一、下载Charts框架</p> <p>下载地址：<a href="/misc/goto?guid=4958989863263683152">https://github.com/danielgindi/Charts</a>.<br> 解压后的文件夹里面的内容是这个样子的，如下图：</p> <p><img alt="iOS在OC项目中集成Charts绘制图表框架" src="https://simg.open-open.com/show/921d181c60234a83f0f16c41be52efc5.png"></p> <p>解压后的文件夹里面的内容</p> <p>下载完成后，仔细看一下所需环境，很重要！如下图：</p> <p><img alt="iOS在OC项目中集成Charts绘制图表框架" src="https://simg.open-open.com/show/257fd5d7b6800064bf9a60a893c5d117.png"></p> <p>所需的配置环境</p> <p>二、新建工程，导入<code>Charts.xcodeproj</code>工程</p> <p>1.新建工程</p> <p>新建工程，取名为<code>ImportChartsDemo</code>.</p> <p>2.复制<code>Charts</code>整个文件到<code>ImportChartsDemo</code>工程中</p> <p><code>Charts</code>在哪里？在这里，如下图：</p> <p><img alt="iOS在OC项目中集成Charts绘制图表框架" src="https://simg.open-open.com/show/ad335e2e9a53fb3a30a2b0f7502be210.png"></p> <p><code>Charts</code>文件位置</p> <p>然后把<code>Charts</code>文件复制到<code>ImportChartsDemo</code>工程中去，如下图；</p> <p><img alt="iOS在OC项目中集成Charts绘制图表框架" src="https://simg.open-open.com/show/1d112d87075360c154f1ba4c7b425c5e.png"></p> <p>复制 <code>Charts</code>整个文件到 <code>ImportChartsDemo</code>工程中</p> <p>3.导入<code>Charts.xcodeproj</code>工程</p> <p>将<code>Charts</code>文件夹中的<code>Charts.xcodeproj</code>工程文件导入到<code>ImportChartsDemo</code>工程中，注意导入的是<code>Charts.xcodeproj</code>工程，而不是<code>Charts</code>文件夹，如下图：</p> <p><img alt="iOS在OC项目中集成Charts绘制图表框架" src="https://simg.open-open.com/show/50056486cd111f692788fa5542c615c7.png"></p> <p>导入<code>Charts.xcodeproj</code>工程</p> <p>4.添加<code>Charts.framework</code></p> <p>找到General->Embedded Binaries，点击+号添加<code>Charts.framework</code>，如下图：</p> <p><img alt="iOS在OC项目中集成Charts绘制图表框架" src="https://simg.open-open.com/show/397fac9209ebec0c03e40113c566ed74.png"></p> <p>Embedded Binaries位置</p> <p>添加的iOS的framework，如下图：</p> <p><img alt="iOS在OC项目中集成Charts绘制图表框架" src="https://simg.open-open.com/show/0b6b313fe544e0b84857ad33dd9c537d.png"></p> <p>添加 <code>Charts.framework</code></p> <p>三、建立OC和Swift的桥接文件</p> <p>在<code>ImportChartsDemo</code>工程中新建一个Swift文件，名字随便取，这时候会提示是否建立桥接文件，直接选<code>Create Bridging Header</code>选项，如下图：</p> <p><img alt="iOS在OC项目中集成Charts绘制图表框架" src="https://simg.open-open.com/show/5a71f0623b41f295d767e4dab37a9d6b.png"></p> <p>建立桥接文件</p> <p><br> 新建完成后，会自动生成一个桥接文件，如下图：</p> <p><img alt="iOS在OC项目中集成Charts绘制图表框架" src="https://simg.open-open.com/show/ee6b0dcdd439ff5fddd737a627ac2ca9.png"></p> <p>自动生成的桥接文件</p> <p>四、设置编译选项及引入<code>Charts</code></p> <p>1.设置编译选项</p> <p>找到Build Settings -> Embedded Content Contains Swift Code 选项，设置为Yes，如下图：</p> <p><img alt="iOS在OC项目中集成Charts绘制图表框架" src="https://simg.open-open.com/show/802de4f15e69c74a66be26f4e609ba1b.png"></p> <p>设置编译选项</p> <p>2.在桥接文件中引入<code>Charts</code></p> <p>如下图：</p> <p><img alt="iOS在OC项目中集成Charts绘制图表框架" src="https://simg.open-open.com/show/a0666eed5b0108f62aa0d99f7674fe60.png"></p> <p>引入<code>Charts</code></p> <p>3.在<code>ViewController.m</code>中引入相关头文件</p> <p>如下图：</p> <p><img alt="iOS在OC项目中集成Charts绘制图表框架" src="https://simg.open-open.com/show/f2b05ab162ccfd2961cec2045e85e820.png"></p> <p>引入头文件</p> <p>引入完成之后，编译一下，如果有错，Clean一下再次编译，编译没有错误说明导入成功.</p> <p>五、测试</p> <p>在<code>ViewController.m</code>中进行测试，代码如下：</p> <pre> <code>BarChartView *chatView = [[BarChartView alloc] initWithFrame:CGRectMake(10, 100, 300, 300)]; [self.view addSubview:chatView];</code></pre> <p>运行效果如下：</p> <p><img alt="iOS在OC项目中集成Charts绘制图表框架" src="https://simg.open-open.com/show/ff7cf06263797313b388fac42d014187.png"></p> <p>运行结果</p> <p><em>由于没有给数据，所以显示的是No chart date aviailable.</em><br> 至此，集成<code>Charts</code>完毕！<br> Demo地址：<a href="/misc/goto?guid=4959674329112788449">https://coding.net/u/wanglei123/p/ImportChartsDemo/git</a>.</p> <p>文／<a href="/misc/goto?guid=4959674329197881258">jianshu_wl</a>（简书）</p>