【GraphMaker】Unity3D图表——柱状图、折线图、饼图

http://blog.csdn.net/yongh701/article/details/71637090?utm_source=itdadao&utm_medium=referral

版权声明：本文为博主原创文章，未经博主允许，欢迎随意转载，标好作者+原文地址就可以了！感谢欣赏！觉得好请回个贴！

万万没想到对于3D物体应付起来易如反掌的Unity3D在面对图表的绘制是如此简直无力，需要和C++或者其它语言一样需要调用到自己底层绘图接口《【Unity3D】平面绘图——GL与GUI》（点击打开链接）、《【Unity3D】Mesh》（点击打开链接），慢慢地一个个矩形直线或者三角形慢慢拼出一个图表，尤其是那些需要动态数据生成的图表，简直就是无能为力。所以要在Unity3D整个图表，提高编程效率，就想到用插件。网上盛传Unity3D的图表插件GraphMaker、Prochart是极其极其好用，但就不知道为何连份GraphMaker的中文资料都没有，而Prochart更是连个和谐的下载地址都没有，作为一个穷逼更不可能莫名其妙就扔个几十美金去研究研究。

下面将自己对GraphMaker1.3的一个星期研究分享给大家，Unity3D图表简直弄得我茶饭不思，无力吐槽！基本实现了Unity3D柱状图、折线图、饼图，而且这破插件并没有传说中这么好用！

一、GraphMaker1.3的下载、配置

首先，这破插件现在已经去到了GrpahMaker1.5版本，虽然支持Unity4.x，但不支持适配Unity4.x的最后一版NGUI3.9.7啊，所以还是等于废的，网上找不到被分享的GrpahMaker1.4，我也不可能乱和你升Unity5.x的，只能用GraphMaker1.3了。我已经给大家上传了一份：http://download.csdn.net/detail/yongh701/9839689，有爱自取。

正如上面所说，GrpahMaker1.3需要NGUI，所以先导入一个NGUI，再导入GrpahMaker1.3，NGUI不了解，或者需要NGUI3.9.7，请参看《【NGUI】Helloworld》（点击打开链接）。

导入完毕之后再双击Graph_Maker_NGUI导入，选择这个高版本的Graph_Maker_NGUI，GraphMaker1.3还支持更低版本的Unity3D和NGUI……不过现在这些版本应该已经绝迹了。

之后还不能工作，我们需要导入一个微软雅黑字体，具体见《【Unity3D】导入字体与淡入启动场景》（点击打开链接）不再赘述了。需要改改NGUI的默认字库，不然这GraphMaker1.3是不能改默认字体的，默认字体是就是NGUI的没有中文字库的字体，你作者你在美利坚就没事，我们在天朝hard模式，不再将NGUI的默认字体改成默认字体，我们的大中文显示不出来啊，亲！

怒将NGUI的默认字库scifi fonts编程微软雅黑的方法如下：

1、如图，在Asset找到scifi fonts - normal将UIFont中的Font Type改成Dynamic，之后在TTF Font换成刚刚导入的微软雅黑。

2、双击下面的材质，SciFi Atlas或者直接点Asset的材质球。进入到编辑SciFi Atlas材质的画面。然后切换微软雅黑的导入目录，我这里就是根目录Assets，将Unity3D已经解析出来的字库贴图Font Texture拖进SciFi Atlas的字库。从此NGUI的默认字体还是叫SciFi，但实质是微软雅黑。玩过NDS或者PSP汉化的人，都知道实质这就是cracked字库的关键一步。

3、新建一个NGUI的UI和Label测试测试，我们依旧是使用NGUI的默认字体SciFi Font，但Text输入的是中文，点击运行，看到中文是没有问题，还是标准的微软雅黑字体，胸前的红领巾更加鲜艳了，心里直呼祖国真好，简直呵呵了！你妹的GraphMaker，给个字体接口？爷要搞这么多事情？

将这个Label删去之后就真的可以开始GraphMarker的编程工作了！

二、GraphMaker饼图

1、和NGUI一样在预设中搜索饼图，将其拖到UI Root的旗下。你会发现什么都看不到，没办法，这插件烂，什么都是空物体GameObject然后什么都写在脚本里面，所以对于可视化设置位置很不好。之后将Scale改成XYZ都是2~8左右（实质这里是个平面图，Z调不调都行），我也不知道为何这个数字最合适，上面的矩形工具对这些用脚本生成的东西是没用的！-_-！将这空物体，利用左上角的位移工具移到适合位置，你可以边点播放运行边看实质运行的结果，调整位置。

2、之后是大家最关心的数据自动生成，创建一个空物体，挂载下面的脚本PieChartData.cs：

[csharp] view plain copy

1. using UnityEngine;  
2. using System.Collections;  
3. using System.Collections.Generic;  
4.   
5. public class PieChartData : MonoBehaviour  
6. {  
7.     void Start()  
8.     {  
9.         WMG_Pie_Graph PieGraph = GameObject.Find("PieGraph").GetComponent<WMG_Pie_Graph>();  
10.         //设置序列名、数值（会自动求比例的）、颜色  
11.         List<string> sliceLabels = new List<string>(new string[] { "小明", "小红", "小黄", "小白" });  
12.         List<float> sliceValues = new List<float>(new float[] { 30f, 2f, 1.7f, 15f });  
13.         List<Color> sliceColors = new List<Color>(new Color[] { Color.red, Color.black, Color.yellow, Color.white });  
14.         PieGraph.sliceLabels = sliceLabels;  
15.         PieGraph.sliceValues = sliceValues;  
16.         PieGraph.sliceColors = sliceColors;  
17.         PieGraph.explodeLength = 0; //饼块分离程度为0，意思为不分离  
18.     }  
19. }  

运行结果如下：

别看这里的脚本这么简单，这插件的说明文档没有！度娘不清楚这东西。我可是去不存在的网站youtube找到相应的视频，才找到这东西怎么整的。大家可以看到是还是用经典的GameObject.Find("XX").GetComponent<XX>();去控制，但你要知道这东西的控制类是WMG_Pie_Graph。

另外，PieGraph.sliceLabels、PieGraph.sliceValues、PieGraph.sliceColors这三个数组的长度要对应，这个应该不用多说了。

以上是主要的功能，也应该就是这些控制了，需要在饼图上加标题，建议直接自己在上面弄个中文标题算了。可以用脚本对PieGraph更多属性进行控制，对是采用这种PieGraph.XX=的形式，能取即能改。

三、GraphMaker的柱状图、折线图

1、柱状图、折线图在GraphMaker都是BarGraph在Graph Type中不同的类型，也和上面的饼图一样，都要自己设置摸黑边运行边调整位置，不然默认的太大了。

在属性栏还有Legend Type等一系列属性，用于设置数据标签。

2、下面以动态产生一个温度做例子。

这里先说明一点，千万别觉得这自带Apple和Oranges系列太烦，做出一下的行为，这会导致空指针疯狂报错的。正确的姿势是需要新建脚本用它规定的API删，所以这个插件做得不好，据说在最新的版本已经修复了这个问题，不过我是没钱买的！而且Unity5.x的离线模式，和谐补丁又有点Bug，不可能升级了。

所以你需要在空物体挂载如下的BarGraphData.cs：

[csharp] view plain copy

1. using UnityEngine;  
2. using System.Collections;  
3. using System.Collections.Generic;//用到了容器类  
4.   
5. public class BarGraphData : MonoBehaviour  
6. {  
7.     void Start()  
8.     {  
9.   
10.         WMG_Axis_Graph BarGraph = GameObject.Find("BarGraph").GetComponent<WMG_Axis_Graph>();  
11.   
12.         //删除两个预设名字  
13.         BarGraph.deleteSeries();  
14.         BarGraph.deleteSeries();  
15.   
16.         //y轴的最大最小值  
17.         BarGraph.yAxisMaxValue = 40;  
18.         BarGraph.yAxisMinValue = -20;  
19.         BarGraph.xAxisLabelSpacingX = 0;//X轴的标签不居中  
20.   
21.         BarGraph.xAxisNumTicks = 5;//设置横轴拥有的标签数量，这里为4+1  
22.         List<string> xAxisLabels = new List<string>(new string[] { "春", "夏", "秋", "冬" });//设置横轴名  
23.         BarGraph.xAxisLabels = xAxisLabels;  
24.   
25.         WMG_Series series1 = BarGraph.addSeries();  
26.         series1.seriesName = "广州";  
27.         List<Vector2> pointValues1 = new List<Vector2>(new Vector2[] { new Vector2(0, 20), new Vector2(0, 30), new Vector2(0, 20), new Vector2(0, 10) });  
28.         series1.pointValues = pointValues1;  
29.         series1.pointColor = Color.green;//设置数组点颜色  
30.         //设置自动将数字更新到X轴之中  
31.         series1.UseXDistBetweenToSpace = true;  
32.         series1.AutoUpdateXDistBetween = true;  
33.   
34.         WMG_Series series2 = BarGraph.addSeries();  
35.         series2.seriesName = "北京";  
36.         List<Vector2> pointValues2 = new List<Vector2>(new Vector2[] { new Vector2(0, 5), new Vector2(0, 25), new Vector2(0, 5), new Vector2(0, -5) });  
37.         series2.pointValues = pointValues2;  
38.         series2.pointColor = Color.red;//设置数组点颜色  
39.         //设置自动将数字更新到X轴之中  
40.         series2.UseXDistBetweenToSpace = true;  
41.         series2.AutoUpdateXDistBetween = true;  
42.     }  
43. }  

首次运行的时候，这破插件还没写好，会产生报错，据说在后续的版本已经修改了这个问题，但现在不管了，双击点入WMG_Series，将最后4行通通注释掉，就不会空指针了。

注释后保存，再运行，在BarGraph的Graph Type设置为Bar_side也就是柱状图的时候，如下图所示：

再在BarGraph的Graph Type设置为Line也就是折线图的时候，如下图所示：

如果你觉得不好看，再用左上角的缩放工具调整下Background或者改下BarGraph的属性栏，看看能不能弄得更好看吧。在GraphMaker1.3的BarGraph还是有点Bug的，但基本上满足了我们对Unity3D的图表需求的。我是没空再折腾了，已经足足耗费了一到二个星期在上面了，大家有空再折腾折腾。也希望未来Unity3D有更好的图表插件，别画个饼图都这么蛋疼！

真的是不明白，在网页，有《【jQuery】兼容IE6的图表插件Highcharts》（点击打开链接）和《【ExtJs】饼状图》（点击打开链接）等一系列的图表插件，来到Unity3D居然成为了一个大问题！