Unity 可视化插件XCharts

XCharts简介

引用插件作者介绍主页：

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

特性：

• 内置丰富示例和模板，参数可视化配置，效果实时预览，纯代码绘制

• 支持折线图、柱状图、饼图、雷达图、散点图、热力图等常见图表

• 支持直线图、曲线图、面积图、阶梯线图等折线图

• 支持并列柱图、堆叠柱图、堆积百分比柱图、斑马柱图等柱状图

• 支持环形图、玫瑰图等饼图

• 支持折线图—柱状图、散点图-折线图等组合图

• 支持实线、曲线、阶梯线、虚线、点线、点划线、双点划线等线条

• 支持自定义主题，内置主题切换

• 支持自定义图表内容绘制，提供绘制点、直线、曲线、三角形、四边形、圆形、环形、扇形、边框、箭头等绘图API

• 支持PC端和手机端上的数据筛选、视图缩放、细节展示等交互操作

• 支持万级大数据绘制

作者主页：https://blog.csdn.net/monitor1394/article/details/102762068

插件下载

XCharts 主页：https://github.com/monitor1394/unity-ugui-XCharts

在插件中包含了配置项手册、API 以及一些相关问题的问答。

XCharts 使用

打开项目或者导入插件后，可以找到两个 Demo 场景（需下载包含Demo的资源包）,呈现了插件所包含的可视化图表。

创建图表

当我们想要使用创建某种图表时，可以直接在 Hierarchy 窗口中右键，在弹出的提示框中选择 XCharts，便可以从延伸出来的提示框中点击选择需要的图表。

也可以在左上角的工具栏中选择 XCharts，从延伸出来的列表中点击选择需要的图表。

主要图表：

LineChart：线状图
BarChart：柱状图
PieChart：饼状图
RadarChart：雷达图
ScatterChart：散点图
HeatmapChart：热力图
GaugeChart：仪表盘

图表设置

长宽：

我们可以直接在 Inspector 视图上通过 Rect Transform 设置整个图表的大小长宽，也可以在 Scene 窗口中通过拖拽调整。

主题（Theme）：

插件本身自带了三种不同的主题：Default、Light、Dart

而 Theme 属性的下拉列表中都是图表中对应的一些颜色属性，包括所用到的字体（Font）、背景颜色（BackgroundColor）、标题的颜色（TitleColor 和 TitleSubTextColor，设置 UGUI 的两种不同的文字框）、轴文字的颜色（AxisTextColor）和轴线的颜色（AxisLineColor和AxisSplitLineColor），最后属性 ColorPalette 是图表中每组数据一次用到的颜色。

标题（Title）：

在该选项中打上对勾，便会在图表中显示标题；否则就不会显示。

其中，文字内容在 Text 或 SubText 中设置；相对应的文字形态设置为 TextStyle或 SubTextStyle，分别包括 Rotate 角度、Offset坐标、Color 颜色、以及字体大小和字体类型等。

提示信息（Tooltip）：

在该选项上打上对勾，便会在鼠标移动到相应位置时显示对应的提示信息；否则便不会显示。

其中，LineStyle 为提示线的风格设置；TextStyle 为提示文字的风格设置。

数据系列（Series）：

这里面是用来处理数据用的，而且大部分的图表里面的属性大致相同，只有一些特殊图表会有一些不一样的属性在里面。

• 其中，Size 表示有几组数据。在饼状图中只需要用到一个；而在线状图中则是有几条线就要有几个。

• 然后，每组数据需要注意 Name 这个属性，及这组数据的名字，这个要在代码中用到。

• Label 属性，是图表中的文字标签，就如上图中，多出来的3个标签。而标签的内容则是在 Data 属性中，每个 Element 中的第一栏数据后面的，第二栏里的内容决定的，刚创建时，可能里面并没有第二栏，这时只要点击上面的 Name 按钮就会出现，或者通过 UpdateDataName 函数，用代码添加数据的名字。

• 同时，图表中的数据设置可以在 Data 属性中直接设置；也可以通过代码 AddData 函数，添加数据；或通过代码 UpdateData 函数，更新数据，其中有很多重载函数，所使用的参数有serieName 就是上面提到的名字（Series名字）、serieIndex 是 Series 的下标索引、dataIndex 是详细数据的下标索引、value 便是具体的数值等。

• Animation 属性，是让图表有一个显示的过程，选中则有，反之亦然。

访问跳转：

• XCharts 主页

• XCharts 问答

• XCharts API手册

• XCharts 配置项手册

*** |  以上内容仅为学习参考、学习笔记使用  | ***