Graph Maker
何ができるか
グラフが作成できるよ！円グラフとかも。
NGUIにも対応しているそうです。
環境
mac Unity5.4.1f1
インポートしたところ
DOTweenが一緒にはいるのか。
使い方
では早速なにかつくってみます。
まずは円グラフ.
まず新規シーンに、Canvasを作成します。
次に、prefabフォルダ配下に各グラフのprefabが入っているので今回は
PieGraphをCanvasの下に配置。
各prefabは
- AreaShadingGraph:折れ線グラフに色が塗っているようなグラフ・・・っていうのかな
- BarGraph:棒グラフ
- BezierBandGraph:ベジェ曲線のグラフ
- HexGrid:6角形を並べる・・・これ何に使うのだろう
- HierarchicalTree:フローチャートみたいなものがつくれる
- LineGraph:折れ線グラフ
- PieGraph:円グラフ
- RaderGraph:レーダーグラフ。キャラクター能力とかの表示にぴったり
- RingGraph:えっとなんていうんだろう、これどういうときにつかうの？
- ScatterPlot:散布図
- SquareGrid:グリッド・・・これも何に使うのかな
- StackedLineGraph:積み重ね折れ線グラフ
実行すれば円グラフがもう表示されます。
細かい数字やラベルなどをインスペクタでいじるだけ。
それだけでこんな感じに円グラフが出来ました。
ちなみに仕組みとしてはmaskで円の画像をFill Amountでやってる感じです。
とりあえず円グラフ
では固定表示ではないと思うのでScriptからあたいの変更周りを
インスペクタのvalueなどを0にしておくと追加するだけなので楽です。
scriptからの項目設定はこんな感じ
public WMG_Pie_Graph pieGraph;
void Start()
{
pieGraph.sliceValues.Add(10);
pieGraph.sliceValues.Add(20);
pieGraph.sliceValues.Add(50);
pieGraph.sliceLabels.Add("Test");
pieGraph.sliceLabels.Add("Test2");
pieGraph.sliceLabels.Add("Test3");
pieGraph.sliceColors.Add(Color.blue);
pieGraph.sliceColors.Add(Color.red);
pieGraph.sliceColors.Add(Color.white);
}
するとこんな風にあっという間にできます。
折れ線グラフ
次は折れ線グラフでも
折れ線グラフはLineGraphのprefabです
配置していじるだけで設定できますし、複数のグラフも描けます
ヒエラルキーのSeriesの子が実際のデータのグラフになります。
これを複数にしてWMG_Axis_Graph.csのSeriesのところにセットしてあげれば複数線が引けます。
インスペクタのGraph Typeでいろいろ選べますし、またAxes Typeを変えることでメモリの位置なども変えられます。
さて、グラフを固定で表示することはないと思うのでScriptで作成してみます。
まずヒエラルキーのSeris配下のSeries1 2を削除します。
そしてグラフのインスペクタのGroupsを0にSeriesを０にします。
ここまでが下準備
次にスクリプトを書きます。
今回はあゆめぐ、めぐあゆの10回のテスト結果のグラフを作ってみます。
public WMG_Axis_Graph graph; // グラフをアタッチ
private WMG_Series series1; // あゆめぐテスト結果グラフ
private WMG_Series series2; // めぐあゆテスト結果グラフ
private List<Vector2> series1Data; // テスト結果のデータ
private List<Vector2> series2Data; // テスト結果のデータ
private List<string> groupData; // x軸のラベル
void Start()
{
series1Data = new List<Vector2>();
series2Data = new List<Vector2>();
groupData = new List<string>();
// 10回分のテスト結果の値を作成
for (int i = 1; i <= 10; i++)
{
series1Data.Add(new Vector2(i, Random.Range(0, 101)));
series2Data.Add(new Vector2(i, Random.Range(0, 101)));
groupData.Add(i + "回目");
Debug.LogWarning(new Vector2(i, Random.Range(0, 101)));
}
// あゆめぐのテスト結果セット
series1 = graph.addSeries();
series1.pointValues.SetList(series1Data);
series1.seriesName = "あゆめぐテスト結果";
// めぐあゆのテスト結果セット
series2 = graph.addSeries();
series2.pointValues.SetList(series2Data);
series2.seriesName = "めぐあゆテスト結果";
series2.pointColor = Color.red;
series2.lineColor = Color.yellow;
// x軸の文字を表示する設定
graph.groups.SetList(groupData);
graph.useGroups = true;
graph.xAxis.LabelType = WMG_Axis.labelTypes.groups;
// メモリの数の設定
graph.xAxis.AxisMaxValue = 10;
graph.xAxis.AxisMinValue = 0;
graph.yAxis.AxisMaxValue = 100;
graph.yAxis.AxisMinValue = 0;
}
実行結果
はい、簡単に作成できました〜。
RaderGraphやってみる
最後に個人的に一番使いそうなRaderGraphをやってみます。
うーんっと、あゆめぐのステータスでも。
- あゆめぐへの愛情:100
- Unity:60
- php:60
- Flash:50
- html:50
- データベース:30
- 画力:5
- maya:15 とかの8つのパラメータでつくってみよっかな。
まずはPrefabからRaderGraphをCanvas配下に設置。
今回もScriptで作るので適当にC#のクラスを作ってアタッチ
項目は滅多に変わることないとおもうのでLabelStringsだけインスペクタで設定。
あとはscript
public WMG_Radar_Graph graph;
void Start()
{
// データ
List<float> statusData = new List<float>(){ 100, 60, 60, 50, 50, 30, 5, 15 };
graph.randomData = false; // ランダムでデータ作成はしないのでfalse
graph.numPoints = 8; // 項目数
graph.radarMinVal = 0; // 最低
graph.radarMaxVal = 100; // 最大
graph.numGrids = 5; // グリッドの数
WMG_Series series1 = graph.addSeries();
// データを座標に変換。
List<Vector2> ayumeguStatus = graph.GenRadar(statusData, graph.offset.x, graph.offset.y, graph.degreeOffset);
series1.pointValues.SetList(ayumeguStatus);
series1.hidePoints = true; // 点はいらないので非表示に
series1.connectFirstToLast = true; // 最後と最初の点をつなぐ
series1.lineColor = Color.blue; // 色
}
これでこんな感じで作れます〜。
昔はLineRendererでこれやったことあるけど綺麗に線がでなくて悲しい思いした思い出があるよ。
らくだ〜！
はいここまで