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

版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許，歡迎隨意轉(zhuǎn)載，標好作者+原文地址就可以了！感謝欣賞！覺得好請回個貼！

萬萬沒想到對于3D物體應付起來易如反掌的Unity3D在面對圖表的繪制是如此簡直無力，需要和C++或者其它語言一樣需要調(diào)用到自己底層繪圖接口《【Unity3D】平面繪圖——GL與GUI》（點擊打開鏈接）、《【Unity3D】Mesh》（點擊打開鏈接），慢慢地一個個矩形直線或者三角形慢慢拼出一個圖表，尤其是那些需要動態(tài)數(shù)據(jù)生成的圖表，簡直就是無能為力。所以要在Unity3D整個圖表，提高編程效率，就想到用插件。網(wǎng)上盛傳Unity3D的圖表插件GraphMaker、Prochart是極其極其好用，但就不知道為何連份GraphMaker的中文資料都沒有，而Prochart更是連個和諧的下載地址都沒有，作為一個窮逼更不可能莫名其妙就扔個幾十美金去研究研究。

下面將自己對GraphMaker1.3的一個星期研究分享給大家，Unity3D圖表簡直弄得我茶飯不思，無力吐槽！基本實現(xiàn)了Unity3D柱狀圖、折線圖、餅圖，而且這破插件并沒有傳說中這么好用！

一、GraphMaker1.3的下載、配置

首先，這破插件現(xiàn)在已經(jīng)去到了GrpahMaker1.5版本，雖然支持Unity4.x，但不支持適配Unity4.x的最后一版NGUI3.9.7啊，所以還是等于廢的，網(wǎng)上找不到被分享的GrpahMaker1.4，我也不可能亂和你升Unity5.x的，只能用GraphMaker1.3了。我已經(jīng)給大家上傳了一份：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……不過現(xiàn)在這些版本應該已經(jīng)絕跡了。

之后還不能工作，我們需要導入一個微軟雅黑字體，具體見《【Unity3D】導入字體與淡入啟動場景》（點擊打開鏈接）不再贅述了。需要改改NGUI的默認字庫，不然這GraphMaker1.3是不能改默認字體的，默認字體是就是NGUI的沒有中文字庫的字體，你作者你在美利堅就沒事，我們在天朝hard模式，不再將NGUI的默認字體改成默認字體，我們的大中文顯示不出來啊，親！

怒將NGUI的默認字庫scifi fonts編程微軟雅黑的方法如下：

1、如圖，在Asset找到scifi fonts - normal將UIFont中的Font Type改成Dynamic，之后在TTF Font換成剛剛導入的微軟雅黑。

2、雙擊下面的材質(zhì)，SciFi Atlas或者直接點Asset的材質(zhì)球。進入到編輯SciFi Atlas材質(zhì)的畫面。然后切換微軟雅黑的導入目錄，我這里就是根目錄Assets，將Unity3D已經(jīng)解析出來的字庫貼圖Font Texture拖進SciFi Atlas的字庫。從此NGUI的默認字體還是叫SciFi，但實質(zhì)是微軟雅黑。玩過NDS或者PSP漢化的人，都知道實質(zhì)這就是cracked字庫的關(guān)鍵一步。

3、新建一個NGUI的UI和Label測試測試，我們依舊是使用NGUI的默認字體SciFi Font，但Text輸入的是中文，點擊運行，看到中文是沒有問題，還是標準的微軟雅黑字體，胸前的紅領(lǐng)巾更加鮮艷了，心里直呼祖國真好，簡直呵呵了！你妹的GraphMaker，給個字體接口？爺要搞這么多事情？

將這個Label刪去之后就真的可以開始GraphMarker的編程工作了！

二、GraphMaker餅圖

1、和NGUI一樣在預設中搜索餅圖，將其拖到UI Root的旗下。你會發(fā)現(xiàn)什么都看不到，沒辦法，這插件爛，什么都是空物體GameObject然后什么都寫在腳本里面，所以對于可視化設置位置很不好。之后將Scale改成XYZ都是2~8左右（實質(zhì)這里是個平面圖，Z調(diào)不調(diào)都行），我也不知道為何這個數(shù)字最合適，上面的矩形工具對這些用腳本生成的東西是沒用的！-_-！將這空物體，利用左上角的位移工具移到適合位置，你可以邊點播放運行邊看實質(zhì)運行的結(jié)果，調(diào)整位置。

2、之后是大家最關(guān)心的數(shù)據(jù)自動生成，創(chuàng)建一個空物體，掛載下面的腳本PieChartData.cs：

[csharp]?view plaincopy

using?UnityEngine;??

using?System.Collections;??

using?System.Collections.Generic;??

??

public?class?PieChartData?:?MonoBehaviour??

{??

????void?Start()??

????{??

????????WMG_Pie_Graph?PieGraph?=?GameObject.Find("PieGraph").GetComponent<WMG_Pie_Graph>();??

????????//設置序列名、數(shù)值（會自動求比例的）、顏色??

????????List<string>?sliceLabels?=?new?List<string>(new?string[]?{?"小明",?"小紅",?"小黃",?"小白"?});??

????????List<float>?sliceValues?=?new?List<float>(new?float[]?{?30f,?2f,?1.7f,?15f?});??

????????List<Color>?sliceColors?=?new?List<Color>(new?Color[]?{?Color.red,?Color.black,?Color.yellow,?Color.white?});??

????????PieGraph.sliceLabels?=?sliceLabels;??

????????PieGraph.sliceValues?=?sliceValues;??

????????PieGraph.sliceColors?=?sliceColors;??

????????PieGraph.explodeLength?=?0;?//餅塊分離程度為0，意思為不分離??

????}??

}??

運行結(jié)果如下：

別看這里的腳本這么簡單，這插件的說明文檔沒有！度娘不清楚這東西。我可是去不存在的網(wǎng)站youtube找到相應的視頻，才找到這東西怎么整的。大家可以看到是還是用經(jīng)典的GameObject.Find("XX").GetComponent<XX>();去控制，但你要知道這東西的控制類是WMG_Pie_Graph。

另外，PieGraph.sliceLabels、PieGraph.sliceValues、PieGraph.sliceColors這三個數(shù)組的長度要對應，這個應該不用多說了。

以上是主要的功能，也應該就是這些控制了，需要在餅圖上加標題，建議直接自己在上面弄個中文標題算了。可以用腳本對PieGraph更多屬性進行控制，對是采用這種PieGraph.XX=的形式，能取即能改。

三、GraphMaker的柱狀圖、折線圖

1、柱狀圖、折線圖在GraphMaker都是BarGraph在Graph Type中不同的類型，也和上面的餅圖一樣，都要自己設置摸黑邊運行邊調(diào)整位置，不然默認的太大了。

在屬性欄還有Legend Type等一系列屬性，用于設置數(shù)據(jù)標簽。

2、下面以動態(tài)產(chǎn)生一個溫度做例子。

這里先說明一點，千萬別覺得這自帶Apple和Oranges系列太煩，做出一下的行為，這會導致空指針瘋狂報錯的。正確的姿勢是需要新建腳本用它規(guī)定的API刪，所以這個插件做得不好，據(jù)說在最新的版本已經(jīng)修復了這個問題，不過我是沒錢買的！而且Unity5.x的離線模式，和諧補丁又有點Bug，不可能升級了。

所以你需要在空物體掛載如下的BarGraphData.cs：

[csharp]?view plaincopy

using?UnityEngine;??

using?System.Collections;??

using?System.Collections.Generic;//用到了容器類??

??

public?class?BarGraphData?:?MonoBehaviour??

{??

????void?Start()??

????{??

??

????????WMG_Axis_Graph?BarGraph?=?GameObject.Find("BarGraph").GetComponent<WMG_Axis_Graph>();??

??

????????//刪除兩個預設名字??

????????BarGraph.deleteSeries();??

????????BarGraph.deleteSeries();??

??

????????//y軸的最大最小值??

????????BarGraph.yAxisMaxValue?=?40;??

????????BarGraph.yAxisMinValue?=?-20;??

????????BarGraph.xAxisLabelSpacingX?=?0;//X軸的標簽不居中??

??

????????BarGraph.xAxisNumTicks?=?5;//設置橫軸擁有的標簽數(shù)量，這里為4+1??

????????List<string>?xAxisLabels?=?new?List<string>(new?string[]?{?"春",?"夏",?"秋",?"冬"?});//設置橫軸名??

????????BarGraph.xAxisLabels?=?xAxisLabels;??

??

????????WMG_Series?series1?=?BarGraph.addSeries();??

????????series1.seriesName?=?"廣州";??

????????List<Vector2>?pointValues1?=?new?List<Vector2>(new?Vector2[]?{?new?Vector2(0,?20),?new?Vector2(0,?30),?new?Vector2(0,?20),?new?Vector2(0,?10)?});??

????????series1.pointValues?=?pointValues1;??

????????series1.pointColor?=?Color.green;//設置數(shù)組點顏色??

????????//設置自動將數(shù)字更新到X軸之中??

????????series1.UseXDistBetweenToSpace?=?true;??

????????series1.AutoUpdateXDistBetween?=?true;??

??

????????WMG_Series?series2?=?BarGraph.addSeries();??

????????series2.seriesName?=?"北京";??

????????List<Vector2>?pointValues2?=?new?List<Vector2>(new?Vector2[]?{?new?Vector2(0,?5),?new?Vector2(0,?25),?new?Vector2(0,?5),?new?Vector2(0,?-5)?});??

????????series2.pointValues?=?pointValues2;??

????????series2.pointColor?=?Color.red;//設置數(shù)組點顏色??

????????//設置自動將數(shù)字更新到X軸之中??

????????series2.UseXDistBetweenToSpace?=?true;??

????????series2.AutoUpdateXDistBetween?=?true;??

????}??

}??

首次運行的時候，這破插件還沒寫好，會產(chǎn)生報錯，據(jù)說在后續(xù)的版本已經(jīng)修改了這個問題，但現(xiàn)在不管了，雙擊點入WMG_Series，將最后4行通通注釋掉，就不會空指針了。

注釋后保存，再運行，在BarGraph的Graph Type設置為Bar_side也就是柱狀圖的時候，如下圖所示：

再在BarGraph的Graph Type設置為Line也就是折線圖的時候，如下圖所示：

如果你覺得不好看，再用左上角的縮放工具調(diào)整下Background或者改下BarGraph的屬性欄，看看能不能弄得更好看吧。在GraphMaker1.3的BarGraph還是有點Bug的，但基本上滿足了我們對Unity3D的圖表需求的。我是沒空再折騰了，已經(jīng)足足耗費了一到二個星期在上面了，大家有空再折騰折騰。也希望未來Unity3D有更好的圖表插件，別畫個餅圖都這么蛋疼！

真的是不明白，在網(wǎng)頁，有《【jQuery】兼容IE6的圖表插件Highcharts》（點擊打開鏈接）和《【ExtJs】餅狀圖》（點擊打開鏈接）等一系列的圖表插件，來到Unity3D居然成為了一個大問題！

總結(jié)

以上是生活随笔為你收集整理的【GraphMaker】Unity3D图表——柱状图、折线图、饼图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。