XCharts 属性解析，代码示例（十分钟上手XCharts）

一款基于UGUI的功能强大、易用、参数可配置的数据可视化图表插件。支持折线图、柱状图、饼图、雷达图、散点图、热力图等常见图表。

XChart  作者主页 

XCharts GitHub地址 

不多逼逼，直接干货！！！

1.通用属性

 红色区域内的参数是所有图标公用的属性，我们从上到下依次解析：

1.Theme 主题设置

默认有三种主题风格 Defaule、Light、Dark，具体详情如下图 很多属性很常见。

主题设置效果的前提是在下面开启了对应的功能模块，建议在下面对应模块中进行对应功能的详细设置。

2.Setting 模块设置

Setting主要是可以设置 材质球来美化图表，没标注的地方，暂时还不知道具体在哪里展示，不影响图表。

3.Background 设置

设置很简单，设置时记得勾选

 

4 Title 设置

设置很简单，设置时记得勾选

 

5.Legend 图例设置

 

 6.Tooltip 提示框设置

 

 

2.适用于带有 X、Y 轴的图表的功能模块

1.DataZoom 滑动区域设置

勾选后可以通过 鼠标滑动来控制图标移动。可以调整滑动块的样式

 

 2.Visual Map 可视映射 （渐变颜色控制）

 

 

3.Grid 网格管理

坐标轴内的的网格部分 位置和背景颜色控制，可以控制坐标轴的宽高和背景颜色，如同下图 绿色部分：

 

4.XAxis 和 YAxis 轴 模块设置

可以自定义设置轴的样式和内容

 

Gird ： 指定就是 图中 蓝绿部分

Spilt Line ： 橙色

Tick :黄色

 

补充一下，轴常用的Value类型参数： 

 

3.数据添加设置及样式调整

通过Series可以对数据样式进行样式和类型调整，在Data是可以增删改查数据。

 

 

如果多条数据需要单独设置时，可以的勾选上面的参数，比如：添加两个Y轴，只要数据的index对应改数据轴时就可以设置。

 

4.代码的简单使用

可以获取改图表后，对具体参数进行调整。

   //获取该图表类后，即可对指定参数设置
        LineChart chart = GetComponent<LineChart>();
        string name1 = "test";
        string name2 = "test2";
        //设置标题，注意设置为显示状态
        chart.title.show = true;
        chart.title.text = "Line Text";
        //设置提示，注意设置为显示状态
        chart.tooltip.show = true;
        //显示图例注释
        chart.legend.show = true;
        chart.legend.data.Clear();
        chart.legend.data.Add(name1);
        chart.legend.data.Add(name2);
        /*图表默认有两个X轴和两个Y轴,默认显示一对xy*/
        //控制轴的显隐
        chart.xAxis0.show = true;
        chart.xAxis1.show = false;
        chart.yAxis0.show = true;
        chart.yAxis1.show = false;

        //x轴数据显示类型 
        chart.xAxis0.type = Axis.AxisType.Category;
        //x轴数据显示类型 
        chart.yAxis0.type = Axis.AxisType.Value;


        int[] data1 = { 10, 20, 30, 10, 50 };
        int[] data2 = { 50, 60, 10, 50, 10 };

        //x轴显示的区域数
        chart.xAxis0.splitNumber = data1.Length;

        //添加之前先清除默认的表的数据
        chart.RemoveData();

        //根据主题类，对轴的Style进行调整
        //文字颜色
        chart.theme.axis.textColor = Color.white;
        //轴的颜色
        chart.theme.axis.lineColor = Color.white;
        //分割线颜色
        chart.theme.axis.splitLineColor = Color.white;

        //添加X轴数据
        for (int i = 0; i < data1.Length; i++)
        {
            chart.AddXAxisData(i.ToString());
        }

        //创建该数据表 1  获取当前系列，可对系列线标类型就行调整
        Serie serie = chart.AddSerie(SerieType.Line, name1);
        //关键点图像是否显示
        serie.symbol.show = true;
        //关键点的样式调整
        serie.symbol.type = SerieSymbolType.Circle;
        //当前折线的风格调整
        serie.lineStyle.show = true;
        //当前折线的透明度
        serie.lineStyle.opacity = 1;
        //创建该数据表 2
        chart.AddSerie(SerieType.Line, name2);

        //添加数据
        foreach (int i in data1)
        {
            chart.AddData(name1, i);
        }

        foreach (int i in data2)
        {
            chart.AddData(name2, i);
        }

自己一个人研究的，如有错误欢迎指正。

访问跳转：

• XCharts 主页

• XCharts 问答

• XCharts API手册

• XCharts 配置项手册