Unityでいろんなグラフを作ってみよう(Graph Maker)

<h2>Graph Maker</h2>
<a href="https://www.assetstore.unity3d.com/jp/#!/content/11782"  target="_blank" rel="lightbox"><img src="http://ayumegu.jp/wp-content/uploads/2016/10/blog7-1.png" width="500px" alt="blog7-1" title="blog7-1" /></a>

<h2>何ができるか</h2>
グラフが作成できるよ！円グラフとかも。
NGUIにも対応しているそうです。
<img src="http://ayumegu.jp/wp-content/uploads/2016/10/blog7-4.png" width="200px"/><img src="http://ayumegu.jp/wp-content/uploads/2016/10/blog7-5.png" width="200px"/><img src="http://ayumegu.jp/wp-content/uploads/2016/10/blog7-6.png" width="200px"/>
<h2>環境</h2>
mac Unity5.4.1f1

<h2>インポートしたところ</h2>
<img src="http://ayumegu.jp/wp-content/uploads/2016/10/blog7-2.png" width="300px"/>
DOTweenが一緒にはいるのか。

<h2>使い方</h2>
では早速なにかつくってみます。
まずは円グラフ.

まず新規シーンに、Canvasを作成します。
次に、prefabフォルダ配下に各グラフのprefabが入っているので今回は
PieGraphをCanvasの下に配置。
<img src="http://ayumegu.jp/wp-content/uploads/2016/10/blog7-7.png" width="200px"/>

各prefabは

- AreaShadingGraph:折れ線グラフに色が塗っているようなグラフ・・・っていうのかな
- BarGraph:棒グラフ
- BezierBandGraph:ベジェ曲線のグラフ
- HexGrid:6角形を並べる・・・これ何に使うのだろう
- HierarchicalTree:フローチャートみたいなものがつくれる
- LineGraph:折れ線グラフ
- PieGraph:円グラフ
- RaderGraph:レーダーグラフ。キャラクター能力とかの表示にぴったり
- RingGraph:えっとなんていうんだろう、これどういうときにつかうの？
- ScatterPlot:散布図
- SquareGrid:グリッド・・・これも何に使うのかな
- StackedLineGraph:積み重ね折れ線グラフ


実行すれば円グラフがもう表示されます。
細かい数字やラベルなどをインスペクタでいじるだけ。
<img src="http://ayumegu.jp/wp-content/uploads/2016/10/blog7-8.png" width="300px"/>

それだけでこんな感じに円グラフが出来ました。
ちなみに仕組みとしてはmaskで円の画像をFill Amountでやってる感じです。
<img src="http://ayumegu.jp/wp-content/uploads/2016/10/blog7-9.png" width="400px"/>

<h2>とりあえず円グラフ</h2>
では固定表示ではないと思うのでScriptからあたいの変更周りを

インスペクタのvalueなどを0にしておくと追加するだけなので楽です。
<img src="http://ayumegu.jp/wp-content/uploads/2016/10/blog7-10.png" width="300px">

scriptからの項目設定はこんな感じ

```csharp
    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);
    }
```

するとこんな風にあっという間にできます。
<img src="http://ayumegu.jp/wp-content/uploads/2016/10/blog7-11.png" width="300px">

<h2>折れ線グラフ</h2>
次は折れ線グラフでも
折れ線グラフはLineGraphのprefabです
<img src="http://ayumegu.jp/wp-content/uploads/2016/10/blog7-14.png" width="300px">
配置していじるだけで設定できますし、複数のグラフも描けます
ヒエラルキーのSeriesの子が実際のデータのグラフになります。
これを複数にしてWMG_Axis_Graph.csのSeriesのところにセットしてあげれば複数線が引けます。
<img src="http://ayumegu.jp/wp-content/uploads/2016/10/blog7-15.png" width="200px">

<img src="http://ayumegu.jp/wp-content/uploads/2016/10/blog7-1.gif" width="400px">
インスペクタのGraph Typeでいろいろ選べますし、またAxes Typeを変えることでメモリの位置なども変えられます。

さて、グラフを固定で表示することはないと思うのでScriptで作成してみます。
まずヒエラルキーのSeris配下のSeries1 2を削除します。
そしてグラフのインスペクタのGroupsを0にSeriesを０にします。
ここまでが下準備
<img src="http://ayumegu.jp/wp-content/uploads/2016/10/blog7-17.png" width="300px">

次にスクリプトを書きます。
今回はあゆめぐ、めぐあゆの10回のテスト結果のグラフを作ってみます。

```csharp

    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;

    }
```

実行結果
<img src="http://ayumegu.jp/wp-content/uploads/2016/10/blog7-16.png" width="300px">

はい、簡単に作成できました〜。

<h2>RaderGraphやってみる</h2>
最後に個人的に一番使いそうなRaderGraphをやってみます。
うーんっと、あゆめぐのステータスでも。

- あゆめぐへの愛情:100
- Unity:60
- php:60
- Flash:50
- html:50
- データベース:30
- 画力:5
- maya:15
とかの8つのパラメータでつくってみよっかな。

まずはPrefabからRaderGraphをCanvas配下に設置。
今回もScriptで作るので適当にC#のクラスを作ってアタッチ

項目は滅多に変わることないとおもうのでLabelStringsだけインスペクタで設定。
<img src="http://ayumegu.jp/wp-content/uploads/2016/10/blog7-18.png" width="300px">

あとはscript

```csharp
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;         // 色

    }
```

これでこんな感じで作れます〜。
<img src="http://ayumegu.jp/wp-content/uploads/2016/10/blog7-19.png" width="400px">

昔はLineRendererでこれやったことあるけど綺麗に線がでなくて悲しい思いした思い出があるよ。
らくだ〜！

はいここまで