【Unity】unity-ugui-XChartsを使ってみる

2020/09/17スクリプト修正・追記


久しぶりの更新ですが、いつものようにサボり…
ではなくて、作りたい物ができたので集中しておりました。

作っていた物なんですが…
最近、何もしてないので激太りしてまして(..*) オハズカシイ…
ダイエットしなきゃ！となりました。

以前、体重管理アプリを作ったのですが、
カレンダーに体重を入力して保存するだけのものでした。

アプリで作ったCSVファイルを、Excelでグラフ化していたのですが、
非常に面倒でアプリの意味が無いと言うか…

当時は、カレンダー作成や保存処理で手一杯だったので、
グラフなんて無理と諦めていました。

すっかり忘れていた体重管理アプリなんですが、
グラフを追加したくなったので、勉強しておりました。
そんな訳で、ブログの更新が…　　(;^_^A アセアセ・・・


グラフを作るならLineRendererなんですが、
World座標管理、uGUIに乗せれない…　使いづらい所です。

ただ線を引くだけなら良いのですがね～　(￣~￣；) ウーン
仕方が無いのでアセットに頼る事にしたのですが…

GraphMaker　＄45
GraphAndChart　＄70
DynamicLineChart　Free

有料アセットは、回避したいので、DynamicLineChartを入れてみました。
ただ、少し思っていたのと違ったので、保留にして違うのを探す事に…

ヒットしたのが、
unity-ugui-XCharts
https://github.com/monitor1394/unity-ugui-XCharts
折れ線グラフ⑩.jpg
中国の方がGitHubで公開されているプラグインです。
このスクショをみても分かりますが、いろいろなグラフが作成できるようです。

これは入れない手はないと言う事で、早速インポートをします。

まず、上にもリンク先を書いておきましたが、
GitHubのunity-ugui-XChartsでファイルをDLしておきます。

ZIPファイルの場合は、分かり易い場所に解凍します。
今回は、デスクトップに解凍しました。
折れ線グラフ⑭.jpg

ファイルが準備できたので、Unityを立ち上げて、適当なプロジェクトを作成します。
今回は、ChartTestにしておきます。
余談ですが、プラットホームはおなじみのandroidでっす。

Unityの準備ができたらXChartsをインポートします。
インポートには、PackageManagerを使います。

タブメニューのウィンドウ→PackageManagerをクリックすると
折れ線グラフ⑪.jpg
PackageManagerが開くので、左上の+ボタンをクリックします。

折れ線グラフ⑬.jpg
項目の中からAddPackagefromdisk…をクリックして、ファイルを指定します。
折れ線グラフ⑯.jpg
解凍したunity-ugui-XCharts-masterから
Assets→XChartsと開いて、その中にあるpackage.jsonを選択してインポートします。

インポートが終わると
折れ線グラフ⑰.jpg
XChartsが表示されます。

PackageManagerを閉じて確認します。
折れ線グラフ⑱.jpg
タブと右クリックメニューにXChartsの項目が出来ていればOKでっす。

このXChartsの良いところは、uGUIで設定できるところです。
Canvasを用意してUIとして追加できます。

移動やスライドが可能になるのがありがたいんですね～ヽ(´▽｀)/～♪

早速、UI用のCanvasを設置してグラフを追加してみます。
折れ線グラフ⑲.jpg
体重管理なので、折れ線グラフを作ります。
UI→XCharts→LineChart
折れ線グラフ⑳.jpg
少し小さめのグラフが表示されて
ヒエラルキーにLineChart、_xcharts_が作成されます。

_xcharts_オブジェクトは触らないので、そのままにしておいて、
LineChartの方を触っていきます。

LineChartの幅1000×高さ500にするとスクショの大きさになります。

続いて、LineChartのコンポーネントを見ると
折れ線グラフ㉑.jpg
何やら項目がいろいろとあますが…
全部を説明しきれないので、簡単に使う所だけ

・Theme
　グラフの見た目です。３タイプから選択できます。
・Title
　グラフ上部に小さい文字がありますが、それです。
・Tooltip
　折れ線のプロットされてる部分の情報を表示
・XAxix0、YAxis0
　X軸とY軸に表示する文字やレンジを設定


この項目を、スクリプトから更新すれば
グラフを作る事ができるようになっています。

XChartsの使い方は、チュートリアル：XChartsを使い始める5分
ここを参考にしてみます。

最初にmanifestファイルを変更するになっていますが、
私、読み飛ばしていました。
変更しなくても使えるのですが、Unityでエラーが出ます。
気になる方は、manifestファイルの変更をして下さい。

スクリプトは、ChartManagerとしておきます。
ChartManager

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using XCharts;

public class ChartManager : MonoBehaviour
{
    /// <summary>
    /// ゲームオブジェクト・コンポーネント
    /// -----------------------------------------
    /// </summary>

    //パブリック
    [Header("LineChart本体")]
    public GameObject LineChart;       //LineChart本体

    //プライベート
    private LineChart linechart;       //LineChartコンポーネント



    /// <summary>
    /// メソッド
    /// -----------------------------------------
    /// </summary>

    // Start is called before the first frame update
    void Start()
    {
        linechart = LineChart.GetComponent<LineChart>();
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}

LineChartをスクリプトから操作する為に、
using XCharts;を宣言します。

LineChartのデータ変更には、コンポーネントにアクセスする必要があるので、
スタートで取得してキャッシュしておきます。

Unityに戻って、スクリプト用のオブジェクトと変数の設定をします。
折れ線グラフ㉒.jpg
空のオブジェクトを作ってChartManagerにリネームしてスクリプトをアタッチします。
設定した変数にLineChartをアタッチすれば準備OK！

続いて初期化をします。
LineChartは、デフォルトで数値が入力されているようで、
このままグラフを作成すると初期のグラフデータも残っていて、
反映されてしまいます。

このデータを削除します。
ChartManager


    // Start is called before the first frame update
    void Start()
    {
        linechart = LineChart.GetComponent<LineChart>();
        linechart.RemoveData();
        linechart.AddSerie(SerieType.Line);
    }

コンポーネント取得後にリムーブとラインタイプをセットします。

続いて、タイトルの編集をします。
タイトル表示は、コンポーネントのチェックをON・OFFでも切り替えられます。
今回は、タイトルONと文字の大きさや色をスクリプトから編集します。
ChartManager


    // Start is called before the first frame update
    void Start()
    {
        linechart = LineChart.GetComponent<LineChart>();
        linechart.RemoveData();
        linechart.AddSerie(SerieType.Line);

        TitleSet();
    }

    //タイトル編集
    private void TitleSet()
    {
        linechart.title.show = true;
        linechart.title.textStyle.fontSize = 60;
        linechart.title.textStyle.color = new Color(0f, 0.2f, 1f, 1f);
        linechart.title.text = "体重";
    }

これを実行すると
折れ線グラフ㉓.jpg
殺風景ですが無事にタイトルの編集ができました。

続いて、体重と言う事でY軸のレンジを設定します。
LineChartのインスペクターからYAxis0をクリックすると中身が見れるので、
折れ線グラフ㉔.jpg
タイプを値にするとMinMaxTypeの項目がでてきます。
ここをカスタムにする事で上下限の設定ができるようになります。
手動でもできますがスクリプトから変更してみます。
ChartManager

    // Start is called before the first frame update
    void Start()
    {
        linechart = LineChart.GetComponent<LineChart>();
        linechart.RemoveData();
        linechart.AddSerie(SerieType.Line);

        TitleSet();
        YAxisSet();
    }

    //Y軸のレンジ設定
    private void YAxisSet()
    {
        linechart.yAxises[0].type = Axis.AxisType.Value;
        linechart.yAxises[0].minMaxType = Axis.AxisMinMaxType.Custom;
        linechart.yAxises[0].min = 50;
        linechart.yAxises[0].max = 70;
        linechart.yAxises[0].splitNumber = 5;
    }

50kg～70kgまでを5分割してみました。

これでPLAYすると
折れ線グラフ㉕.jpg
5kg単位のY軸が設定されます。
スプリット数で細かく表示を変えられるので好みで調整します。

後は、体重データを上書きすればグラフは完成です。
データを用意するのが大変なので、チュートリアルの方法で入力してみます。

30日間を想定してみました。
ChartManager

    // Start is called before the first frame update
    void Start()
    {
        linechart = LineChart.GetComponent<LineChart>();
        linechart.RemoveData();
        linechart.AddSerie(SerieType.Line);

        TitleSet();
        YAxisSet();
        XAxisSet();
    }

    //30日間を想定して入力
    private void XAxisSet()
    {
        linechart.xAxises[0].splitNumber = 30;
        linechart.xAxises[0].boundaryGap = false;

        for(int i = 1; i < 31; i++)
        {
            linechart.AddXAxisData(i + "日");
            linechart.AddData(0, Random.Range(55, 65));
        }
    }

・splitNumber　分割数
・boundaryGap　X軸の文字表示位置
・AddXAxisData　X軸の文字表示
・AddData　X軸のデータ


データは適当ですが、グラフは無事に作成されました。
折れ線グラフ㉖.jpg
TooltipをONにしておくと
折れ線グラフ㉗.jpg
カーソルをグラフの上に移動すると、プロットされた部分の内容が、
表示されるようになります。

スクリプトのコマンドは多いのですが、uGUIとして使えるのは便利かと思います。

少し難点もあります。
この方法では、連続データしかグラフ化できない点です。

5日目だけ修正するとかができません。
再度、データ修正後に一からグラフを書き直す必要があります。

また、データが歯抜けの場合、飛ばす事ができません。
なので、歯抜けの部分が無くなって左詰めにプロットされます。

この辺りは、タイプをカテゴリにすると分離データとして扱えるみたいですが、
勉強不足でまだ使えません(ノ_<。)うっうっうっ

とは言え、グラフが使えるのは大きいので覚えると活用できそうです。

もう少し使い方を勉強して分かったら記事にしたいと思います。
ただUnityでグラフって、ニーズがなさそうですが…　(;^_^A

ま、ニッチな情報を提供するのもアリと言うことで、
今後もマニアック路線を突き進めたらいいなと思います。
(;^o^) ＼(ToT )あんたほんとにそれでいいの


長くなりましたが今回はこのへんで
( ^ 0 ^ )/~~~~see you again


2020/09/17追記
X軸にデータを入力するスクリプトを修正しました。

X軸のsplitNumberは、一度でいいのでループに入れてる意味が
ありませんでした。(゜゜;）ゴメンネ・・・

boundaryGapの設定を追加しました。
Gapがあると等分線の間に日付が表示されます。
falseで等分線上に日付が表示されます。

この記事へのコメント

コメントを書く