Unity插件XCharts使用简记之基础属性设置
Unity插件XCharts使用简记XCharts简介插件简介插件下载XCharts使用基础使用长宽主题(`Theme`)标题(`Title`)提示信息(`Tooltip`)数据系列(`Series`)轴(`X Axis`和`Y Axis`)XCharts简介最近项目中需要用到一些数据图表,如曲线图、柱状图等。便到了这个插件,由于该插件的教程较少,所以对其使用都是自己研究的,而且其中每一个图表..
Unity插件XCharts使用简记之基础属性设置
XCharts简介
最近项目中需要用到一些数据图表,如曲线图、柱状图等。便到了这个插件,由于该插件的教程较少,所以对其使用都是自己研究的,而且其中每一个图表脚本的属性都有好几十个,所以这里对插件的使用做一个简记。
注意:我只记录一些我用到的功能和使用,并不算详解,之后有机会再补全。
插件简介
引自插件作者介绍主页:
一款基于UGUI的功能强大、易用、参数可配置的数据可视化图表插件。支持折线图、柱状图、饼图、雷达图、散点图、热力图等常见图表。
特性:
- 内置丰富示例和模板,参数可视化配置,效果实时预览,纯代码绘制。
- 支持折线图、柱状图、饼图、雷达图、散点图、热力图等常见图表。
- 支持直线图、曲线图、面积图、阶梯线图等折线图。
- 支持并列柱图、堆叠柱图、堆积百分比柱图、斑马柱图等柱状图。
- 支持环形图、玫瑰图等饼图。
- 支持折线图—柱状图、散点图-折线图等组合图。
- 支持实线、曲线、阶梯线、虚线、点线、点划线、双点划线等线条。
- 支持自定义主题,内置主题切换。
- 支持自定义图表内容绘制,提供绘制点、直线、曲线、三角形、四边形、圆形、环形、扇形、边框、箭头等绘图API。
- 支持PC端和手机端上的数据筛选、视图缩放、细节展示等交互操作。
- 支持万级大数据绘制。
插件作者主页:
插件下载
插件下载链接:
- https://github.com/monitor1394/unity-ugui-XCharts:插件源项目
- https://download.csdn.net/download/f_957995490/12189881:我自己导出的unitypackage
插件中自带配置项手册和API,以及一些问题问答。
XCharts使用
打开项目或导入插件后,可找到两个demo场景,其中demo_xchart场景为总的效果呈现。
基础使用
注意:有些修改要运行一次或拖拽一下图表的大小等,使其将图表渲染一次的方法,才能看到效果。
当我们想要使用创建某种图表时,可如下图所示,在Hierarchy窗口中直接右键,在弹出的提示框中选择XCharts,便直接可以从延伸出来的提示框中点击选择需要的图表。
LineChart--------->线状图
BarChart--------->柱状图
PieChart--------->饼状图
RadarChart--------->雷达图
ScatterChart--------->散点图
HeatmapChart--------->热力图
GaugeChart--------->仪表盘
长宽
我们可以在创建出来的每一个图表上看到一个对应的总控制脚本,如上图Inspector窗口中的PieChart
脚本组建一样。
其中,脚本上的ChartWidth
和ChartHeight
两个属性是用于设置整个图表的大小长宽的,可以直接设置数值,也可以在Scene窗口中通过拖拽调整。
主题(Theme
)
往下的Theme
属性的下拉列表中都是图表中对应的一些颜色属性,包括所用到的字体(Font
)、背景颜色(BackgroundColor
)、标题的颜色(TitleColor
和TitleSubTextColor
,设置UGUI的两种不同的文字框)、轴文字的颜色(AxisTextColor
)和轴线的颜色(AxisLineColor
和AxisSplitLineColor
),最后属性ColorPalette
是图表中每组数据一次用到的颜色。
如上图,绿色标出的1号数据用到的,便是属性ColorPalette
下的第一个Element1
的颜色;2号的是Element2
;3号的是Element3
,以此类推。
代码上,可以通过BaseChart.themeInfo
直接获取类型为ThemeInfo
的主题信息,其中自带3种不同的主题。
/// <summary>
/// 主题
/// </summary>
public enum Theme
{
/// <summary>
/// 默认主题。
/// </summary>
Default,
/// <summary>
/// 亮主题。
/// </summary>
Light,
/// <summary>
/// 暗主题。
/// </summary>
Dark
}
可以通过BaseChart.UpdateTheme(Theme theme)
更新主题的类型;也可以通过BaseChart.UpdateThemeInfo(ThemeInfo themeInfo)
直接更换主题信息。
ThemeInfo
包含的与组建中Theme
属性的下拉列表中显示的,大致相同。
标题(Title
)
下一项属性为标题Title
。该项选中打上对勾,便会显示标题;反之,亦然。
其中,文字内容在Text
或SubText
中设置;相对应的文字形态设置为TextStyle
或SubTextStyle
,分别包括Rotate
角度、Offset
坐标、Color
颜色(这里的颜色我并未试出有什么用,在这里设置并没有任何效果)、以及字体大小和字体类型等。
提示信息(Tooltip
)
Tooltip
属性为提示信息,如下图所示。
该项选中打上对勾,便会在鼠标移动到相应位置时显示对应的提示信息;反之,亦然。
其中,LineStyle
为提示线的风格设置;TextStyle
为提示文字的风格设置。
数据系列(Series
)
这里面是用来处理数据用的,而且大部分的图标里面的属性大致相同,只有一些特殊图表会有一些不一样的属性在里面。
- 其中,
Size
表示有几组数据。在饼状图中只需要用到一个;而在线状图中则是有几条线就要有几个。 - 然后,每组数据需要注意
Name
这个属性,及这组数据的名字,这个要在代码中用到。 Label
属性,是图表中的文字标签,就如上图中,多出来的3个标签。而标签的内容则是在Data
属性中,每个Element
中的第一栏数据后面的,第二栏里的内容决定的,刚创建时,可能里面并没有第二栏,这时只要点击上面的Name
按钮就会出现,或者通过UpdateDataName
函数,用代码添加数据的名字。- 同时,图表中的数据设置可以在
Data
属性中直接设置;也可以通过代码AddData
函数,添加数据;或通过代码UpdateData
函数,更新数据,其中有很多重载函数,所使用的参数有serieName
就是上面提到的名字(Series名字)、serieIndex
是Series的下标索引、dataIndex
是详细数据的下标索引、value
便是具体的数值等。 Animation
属性,是让图表有一个显示的过程,选中则有,反之亦然。
特有属性
关于一些特有属性的设置:Unity插件XCharts使用简记之特有属性设置
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)