Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@yaaConfeito

【Unity】グラフ描画用ライブラリ"XCharts"入門

Unityでグラフを描画するためのライブラリ"XCharts"の使い方(自分用)まとめ
インストール〜シーンに配置〜スクリプトで操作するまで

環境

OS: MacOS Mojave 10.14.6
Unity Editor: 2018.4.18f1 Personal
XCharts: v1.2.0

XChartsの取得

はじめに

配布元はここ
https://github.com/monitor1394/unity-ugui-XCharts

中国語は全く読めないのでGoogle翻訳先生に頼る

README(「使用」の項)によると、Unityのパッケージマネージャ1でダウンロードするのが推奨とのこと

Unityパッケージマネージャでダウンロード

グラフを入れる対象のプロジェクトをxChartsTest(2Dプロジェクト)とする
xChartsTest/Packages/manifest.jsonを開いて、"dependencies"の範囲に"com.monitor1394.xcharts": "https://github.com/monitor1394/unity-ugui-XCharts.git#package",を追記する

こんな感じ

manifest.json
{
  "dependencies": {
    "com.monitor1394.xcharts": "https://github.com/monitor1394/unity-ugui-XCharts.git#package",
    "com.unity.ads": "2.0.8",
    (中略)
    "com.unity.modules.xr": "1.0.0"
  }
}

Unity Editorに戻る(該当のプロジェクトを開く)と、自動的にダウンロード、コンパイルが走る

manifest.jsonには、バージョン情報が自動的に追加される

manifest.json
{
  "dependencies": {
    "com.monitor1394.xcharts": "https://github.com/monitor1394/unity-ugui-XCharts.git#package",
    "com.unity.ads": "2.0.8",
    (中略)
    "com.unity.modules.xr": "1.0.0"
  },
  "lock": {
    "com.monitor1394.xcharts": {
      "revision": "package",
      "hash": "a286b231444e5ef2afbb729ed1a0a9f663bf40bc"
    }
  }
}

パッケージマネージャで確認

UnityトップメニューでWindow > Package Managerと選択

スクリーンショット 2020-03-07 18.09.17.png

インストールはできていそう

Warning解消

warningが出てる

スクリーンショット 2020-03-07 18.12.22.png

Library/PackageCache/com.monitor1394.xcharts@a286b231444e5ef2afbb729ed1a0a9f663bf40bc/Runtime/Utility/XChartsMgr.cs(124,27): warning CS0618: 'WWW' is obsolete: 'Use UnityWebRequest, a fully featured replacement which is more efficient and has additional features'

WWWじゃなくてUnityWebRequestを使えとのこと

該当のソースはこのへん

XChartsMgr.cs
        IEnumerator GetVersion()
        {
            var url = "https://raw.githubusercontent.com/monitor1394/unity-ugui-XCharts/master/Assets/XCharts/version.json";
            var web = new WWW(url);
            yield return web;
            if (!string.IsNullOrEmpty(web.error))
                Debug.LogError(web.error);
            else
            {
                var cv = JsonUtility.FromJson<XChartsVersion>(web.text);
                m_NewVersion = cv.version + " (" + cv.date + ")";
                newDate = cv.date;
                newCheckDate = cv.checkdate;
                desc = cv.desc;
                homepage = cv.homepage;
                web.Dispose();
                isCheck = false;
            }
        }

        IEnumerator GetChangeLog()
        {
            isCheck = true;
            var url = "https://raw.githubusercontent.com/monitor1394/unity-ugui-XCharts/master/Assets/XCharts/CHANGELOG.md";
            var web = new WWW(url);
            yield return web;
            if (!string.IsNullOrEmpty(web.error))
                Debug.LogError(web.error);
            else
            {
                CheckLog(web.text);
                web.Dispose();
                isCheck = false;
            }
        }

XChartsはMITライセンスなので改変OK
ただ、中身をあんまりいじりたくないのでとりあえずここでwarningが出ないようにしちゃう
XChartsMgr.csの冒頭に下記追記(参考:Warningメッセージを消す

XChartsMgr.cs
#pragma warning disable 0618

これでとりあえずwarning CS0618の警告は出なくなる

チュートリアルに従ってグラフを生成してみる

シーンに折れ線グラフを追加

[Hierarchy] -> [Create]と選択すると[XCharts]のメニューが追加されている
[XCharts] -> [LineChart]と選択すると、シーンにグラフが追加される

スクリーンショット 2020-03-08 20.21.59.png

カメラの設定変更

Sceneビューでグラフが見づらいのでカメラの設定を変える
[Hierarchy]から[Canvas]を選択、[Inspectorウィンドウ] -> [Canvas] -> [Render Mode] -> [Screen Space - Camera]を選択
[Render Camera]欄に[Main Camera]を追加

スクリーンショット 2020-03-08 20.22.08.png

真ん中に配置したい!

[LineChart]の[Inspectorウィンドウ] -> [Rect Transform]でアンカーを設定
[Alt]を押しながらcenter-middleを選択
[Shift]を押しながらleft-bottomを選択するといい感じ?

スクリーンショット 2020-03-08 20.34.34.png
スクリーンショット 2020-03-08 20.38.38.png

スクリプトから操作

チュートリアルを参考に

LineChartオブジェクトにスクリプトをアタッチして、Start()にこう追記してみる

LineChartController.cs
    void Start()
    {
        var chart = gameObject.GetComponent<LineChart>();
    }

コンパイルエラーが出ちゃった

Assets/Scripts/LineChartController.cs(10,45): error CS0246: The type or namespace name 'LineChart' could not be found (are you missing a using directive or an assembly reference?)

どうやらusingディレクティブに何かを追加する必要がありそう

using XCharts;を追加して、タイトルに"Line Simple"と表示されるようにしてみた

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

public class LineChartController : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        var chart = gameObject.GetComponent<LineChart>();
        if(null == chart)
        {
            chart = gameObject.AddComponent<LineChart>();
        }

        chart.title.show = true;
        chart.title.text = "Line Simple";
    }

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

    }
}

実行してみた

スクリーンショット 2020-03-08 21.30.12.png

成功〜


  1. Unityパッケージマネージャの公式マニュアルはここ 

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
6
Help us understand the problem. What are the problem?