# unity-ugui-XCharts **Repository Path**: dingxinghui/unity-ugui-XCharts ## Basic Information - **Project Name**: unity-ugui-XCharts - **Description**: A charting and data visualization library for Unity. 一款基于UGUI的数据可视化图表插件。 - **Primary Language**: C# - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 43 - **Created**: 2021-02-18 - **Last Updated**: 2021-02-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

XCharts

A powerful, easy-to-use, configurable charting and data visualization library for Unity.
一款基于UGUI的数据可视化图表插件。
English Doc

一款基于`UGUI`的功能强大、易用、参数可配置的数据可视化图表插件。支持折线图、柱状图、饼图、雷达图、散点图、热力图、仪表盘、环形图、极坐标、水位图等常见图表。 [XCharts问答](https://github.com/monitor1394/unity-ugui-XCharts/blob/master/Assets/XCharts/Documentation/XCharts问答.md) [XChartsAPI手册](https://github.com/monitor1394/unity-ugui-XCharts/blob/master/Assets/XCharts/Documentation/XChartsAPI.md) [XCharts配置项手册](https://github.com/monitor1394/unity-ugui-XCharts/blob/master/Assets/XCharts/Documentation/XCharts配置项手册.md) [XCharts更新日志](https://github.com/monitor1394/unity-ugui-XCharts/blob/master/Assets/XCharts/CHANGELOG.md) [教程:5分钟上手XCharts](https://github.com/monitor1394/unity-ugui-XCharts/blob/master/Doc/教程:5分钟上手XCharts.md) ## XCharts 2.0 * 底层重构,分层绘制,优化可扩展性,支持更多数据。 * 支持TextMeshPro。 * 支持多组件模式。 * 支持大部分图表的任意组合。 * 支持主题定制、导入和导出,更多的主题配置参数。 * 支持全局配置参数调整。 * 更友好的编辑界面。 * 其他细节优化。 ## 特性 * 内置丰富示例和模板,参数可视化配置,效果实时预览,纯代码绘制。 * 支持折线图、柱状图、饼图、雷达图、散点图、热力图、热力图、仪表盘、环形图、极坐标、水位图等十种常见图表。 * 支持直线图、曲线图、面积图、阶梯线图等折线图。 * 支持并列柱图、堆叠柱图、堆积百分比柱图、斑马柱图等柱状图。 * 支持环形图、玫瑰图等饼图。 * 支持大部分图表的任意组合,同一图表中可同时显示多个相同或不同类型的图表。 * 支持实线、曲线、阶梯线、虚线、点线、点划线、双点划线等线条。 * 支持主题定制、导入和导出,内置三种默认主题。 * 支持自定义图表内容绘制,提供绘制点、直线、曲线、三角形、四边形、圆形、环形、扇形、边框、箭头等绘图API。 * 支持PC端和手机端上的数据筛选、视图缩放、细节展示等交互操作。 * 支持万级大数据绘制。 * 支持`TexMeshPro`。 ## 截图 ![linechart](Doc/screenshot/xcharts-line.png) ![barchart](Doc/screenshot/xcharts-bar.png) ![piechart](Doc/screenshot/xcharts-pie.png) ![radarchart](Doc/screenshot/xcharts-radar.png) ![scatterchart](Doc/screenshot/xcharts-scatter.png) ![heatmapchart](Doc/screenshot/xcharts-heatmap.png) ![gaugechart](Doc/screenshot/xcharts-gauge.png) ![ringchart](Doc/screenshot/xcharts-ring.png) ![polarchart](Doc/screenshot/xcharts-polar.png) ![liquidchart](Doc/screenshot/xcharts-liquid.png) ![combinations](Doc/screenshot/xcharts-combinations.png) ## 术语 ![cheatsheet](Doc/screenshot/xcharts-cheatsheet.gif) XCharts的图表由组件和数据组成。不同的组件和数据可以组合成不同类型的图表。组件分为主组件和子组件,主组件包含子组件。 `XCharts` 支持的主组件: * `Theme` 主题组件:可以配置图表各组件默认的颜色、字体等。 * `Title` 标题组件:包含主标题和副标题。 * `Legend` 图例组件:图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。 * `Grid` 网格组件:直角坐标系内绘图网格。一个网格组件内最多可以放置上下两个 X 轴,左右两个 Y 轴。可以在网格上绘制折线图,柱状图,散点图。 * `Axis` 坐标轴组件:直角坐标系的坐标轴。支持上下两个 X 轴,左右两个 Y 轴。 * `Series` 系列组件:系列列表。一个图表可以包含多个不同的系列,每个系列通过 type 决定自己的图表类型。 * `Tooltip` 提示框组件:反馈当时鼠标所指示数据的更多细节。 * `DataZoom` 区域缩放组件:用于区域缩放,从而能自由关注细节的数据信息,或者概览数据整体,或者去除离群点的影响。 * `VisualMap` 视觉映射组件:可以对数据进行不同颜色的映射。 * `Radar` 雷达组件:雷达图坐标系组件,只适用于雷达图。 * `Settings` 全局设置组件:可以对一些全局的参数进行调整。一般情况下使用默认值即可,当有需要时可进行调整。 `XCharts` 支持的图表: * `LineChart` 折线图:折线图是用折线将各个数据点标志连接起来的图表,用于展现数据的变化趋势。 * `BarChart` 柱状图:柱状图 通过 柱形的高度/条形的宽度 来表现数据的大小,用于有至少一个类目轴或时间轴的直角坐标系上。 * `PieChart` 饼图:饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。饼图更适合表现数据相对于总数的百分比等关系。如果只是表示不同类目数据间的大小,建议使用 柱状图。 * `RadarChart` 雷达图:雷达图主要用于表现多变量的数据,例如球员的各个属性分析。依赖 radar 组件。 * `ScatterChart` 散点图:直角坐标系上的散点图可以用来展现数据的 x,y 之间的关系,如果数据项有多个维度,其它维度的值可以通过不同大小的 symbol 展现成气泡图,也可以用颜色来表现。 * `HeatmapChart` 热力图:热力图主要通过颜色去表现数值的大小,必须要配合 visualMap 组件使用。 * `GuageChart` 仪表盘。 * `RingChart` 环形图。区别于`PieChart`中的环形图,`RingChart`只支持一个数据,一般用于表示百分比。 以下是LineChart折线图和主组件、子组件的关系结构: ``` js . ├── LineChart . ├── ThemeInfo ├── Title │ └── Location ├── Legend │ └── Location ├── Tooltip ├── DataZoom ├── VisualMap ├── Grid ├── Axis │ ├── AxisLine │ ├── AxisName │ ├── AxisLabel │ ├── AxisTick │ └── AxisSplitArea ├── Series │ ├── ItemStyle │ ├── AreaStyle │ ├── SerieSymbol │ ├── LineStyle │ ├── LineArrow │ ├── SerieLabel │ ├── Emphasis │ ├── Animation │ └── SerieData └── Settings ``` ## 开发环境 * Unity2017.4.27f1, .Net 3.5 * macOS 10.15.4 ## 使用 * 本项目在`Unity 2017.4.27f1`和`.Net 3.5`下开发,在 `Unity 5`、`Unity 2018`、`Unity 2019`上测试正常。理论上可运行于任何支持`UGUI`的`Unity`版本。 * 通过下载源码或`unitypackage`包导入到你的项目中。如果你是`2018.3`及以上版本,可通过`Package Manager`的`Git`来导入包: 1. 打开`Packages`目录下的`manifest.json`文件,在`dependencies`下加入: ``` json "com.monitor1394.xcharts": "https://github.com/monitor1394/unity-ugui-XCharts.git#2.0-upm", ``` 2. 回到`Unity`,可能会花3到5分钟进行下载和编译,成功后就可以开始使用`XCharts`了。 3. 如果要删除`XCharts`,删除掉1步骤所加的内容即可。 4. 如果要更新`XCharts`,删除`manifest.json`文件的`lock`下的`com.monitor1394.xcharts`相关内容即会从新下载编译。在 `Component -> XCharts -> Check For Update`可以检测是否有新版本可更新。 * 在Editor上快速创建一个图表: 1. 在`Hierarchy`试图下右键或菜单栏`GameObject`下拉:`XCharts->LineChart`,即可快速创建一个简单的折线图出来。 2. `Inspector` 视图下可以调整各个组件的参数,`Game` 视图会实时反馈调整的效果。各个组件的详细参数说明可查阅[XCharts配置项手册](https://github.com/monitor1394/unity-ugui-XCharts/blob/master/Assets/XCharts/Documentation/XCharts配置项手册.md)。 * 更多的代码动态控制的例子请参考[教程:5分钟上手XCharts](https://github.com/monitor1394/unity-ugui-XCharts/blob/master/Doc/教程:5分钟上手XCharts.md) 。 ## 文档 * 常见问题看这里☞ [XCharts问答](https://github.com/monitor1394/unity-ugui-XCharts/blob/master/Assets/XCharts/Documentation/XCharts问答.md) * 接口文档看这里☞ [XChartsAPI手册](https://github.com/monitor1394/unity-ugui-XCharts/blob/master/Assets/XCharts/Documentation/XChartsAPI.md) * 参数配置看这里☞ [XCharts配置项手册](https://github.com/monitor1394/unity-ugui-XCharts/blob/master/Assets/XCharts/Documentation/XCharts配置项手册.md) * 更新日志看这里☞ [XCharts更新日志](https://github.com/monitor1394/unity-ugui-XCharts/blob/master/Assets/XCharts/CHANGELOG.md) * 新手教程看这里☞ [教程:5分钟上手XCharts](https://github.com/monitor1394/unity-ugui-XCharts/blob/master/Doc/教程:5分钟上手XCharts.md) ## 更新日志 [更新日志](https://github.com/monitor1394/unity-ugui-XCharts/blob/master/Assets/XCharts/CHANGELOG.md) ## Licenses [MIT License](https://github.com/monitor1394/unity-ugui-XCharts/blob/master/Assets/XCharts/LICENSE.md) ## 其他 邮箱:monitor1394@gmail.com QQ群:XCharts交流群(`202030963`) VIP群:XCharts技术支持VIP群(`867291970`) 捐助和技术支持:[☞ 看这里](SUPPORT.md)