推荐阅读

• CSDN主页
• GitHub开源地址
• Unity3D插件分享
• 简书地址
• QQ群：398291828

大家好，我是佛系工程师☆恬静的小魔龙☆，不定时更新Unity开发技巧，觉得有用记得一键三连哦。

一、前言

XCharts插件是一款基于UGUI的功能强大、易用、参数可配置的数据可视化图表插件。

【Unity3D插件】XCharts插件完全教程《全网最全》-专栏文章目录

二、正文

2-1、获取和导入插件

获取和导入插件的方式主要有以下几种：

（1）通过XCharts源码导入到项目

XCharts源码：https://github.com/XCharts-Team/XCharts，下载后，直接将所有文件拷贝到Unity的工程的Assets目录下即可。

（2）导入.unitypackage插件包

地址：https://github.com/XCharts-Team/XCharts/releases

下载完直接拖到Unity工程中，或者通过Unity编辑器的菜单栏 Assets–>Import Package–>选中.unitypackage导入都可以。

（3）使用Package Manager导入XCharts

对于Unity 2018.3以上版本，可通过 Package Manager来导入XCharts。

打开Package Manager：

通Add package form git URL：

输入XCharts3.0的GitHub URL：https://github.com/XCharts-Team/XCharts.git#3.0

稍等片刻后即可。

也可以直接将package加入到manifest.json文件：打开Packages目录下的manifest.json文件，在dependencies下加入：

com.monitor1394.xcharts": "https://github.com/XCharts-Team/XCharts.git#3.0

如需更新XCharts，删除manifest.json文件（部分Unity版本可能是packages-lock.json文件）的lock下的com.monitor1394.xcharts相关内容即会重新下载编译。

*注意：如果要确保更新时编译正常，可以导入XCharts守护程序，在更新的时候会刷新asmdef，确保编译正常，不用手动解决bug了。

2-2、创建简单图表

在菜单栏Xcharts下拉选择XCharts->LineChart→Basic Line，即可快速创建一个默认的折线图出来：

2-3、增加组件和数据集

增加组件

通过LIneChart属性面板的Add Main Component添加组件：

增加数据集
通过LIneChart属性面板的Add Serir添加组件：

*注意：关于面板更多的组件介绍和不同类型的数据集介绍会在后面的篇幅介绍，本篇主要讲解如何下载、安装、创建、代码生成简单的折线图。

2-4、代码添加折线图（v3.0）

示例代码：

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

public class TestXCharts : MonoBehaviour
{
    void Start()
    {
        CreateLine();
    }

    private void CreateLine()
    {
        // 添加LineChart
        var chart = gameObject.GetComponent<LineChart>();
        if (chart != null)
        {
            chart=gameObject.AddComponent<LineChart>();
            chart.Init();
        }

        // 调整大小
        chart.SetSize(500,300);

        /* 调整标题
         * 用过XCharts 1.0版本的读者在这里可能发现3.0的不同了。
         * 1.0版本可以直接chart.title = "标题" ，现在还需要先EnsureChartComponent获取组件。
         * 再修改值，这是因为作者将代码进行了优化重构，把Title这些都作为了组件进行控制。
         * 而不是跟原来一样是个属性。
         */
        var title = chart.EnsureChartComponent<Title>();
        title.text = "Simple Line";

        // 设置提示框和图例是否显示
        var tooltip = chart.EnsureChartComponent<Tooltip>();
        tooltip.show = true;

        var legend = chart.EnsureChartComponent<Legend>();
        legend.show = false;

        // 设置坐标轴
        var xAxis = chart.EnsureChartComponent<XAxis>();
        xAxis.splitNumber = 10;
        xAxis.boundaryGap = true;
        xAxis.type = Axis.AxisType.Category;

        var yAxis = chart.EnsureChartComponent<YAxis>();
        yAxis.type = Axis.AxisType.Value;

        // 清空默认数据，添加Line类型的Serie用于接收数据：
        chart.RemoveData();
        chart.AddSerie<Line>("line");

        // 添加10个数据：
        for (int i = 0; i < 10; i++)
        {
            chart.AddXAxisData("x" + i);
            chart.AddData(0, Random.Range(10, 20));
        }
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62

挂载在物体上，运行：

简单的折线图就出来了。

2-5、总结

到这里下载、导入、创建折线图、添加组件、添加数据集、代码添加都完成了。

我们已经可以快速的使用这个插件了，当然，如果要实现更多功能，这些还不够。

我会在：
【XCharts插件】3-3、制作图表及代码生成图表（v3.0）
http://iyenn.com/rec/1661903.html
这篇文章更加详细地介绍3.0接口的功能，使用代码控制各类组件，添加不同种类数据集。

添加新的Serie，修改Serie等操作。

三、后记

如果觉得本篇文章有用别忘了点个关注，关注不迷路，持续分享更多Unity干货文章。

你的点赞就是对博主的支持，有问题记得留言：

博主主页有联系方式。

博主还有跟多宝藏文章等待你的发掘哦：