【Unity】Unity学习之XChart2.7.0_unity xchart

BarChart介绍

以柱状图为例介绍此插件。应该包含所有图表的功能了。

下图为插件中BarChart的解释面板，以下将重点介绍开发过程中，所涉及到的重点内容。

Theme

Theme

控制的就是图表的整体色彩形式。基本开发过程中，没有用到。

Background Color

用来控制背景颜色。
通常为了更方便的控制图表，我会在图表上设置一个父对象Image，以这个父对象为背景，然后能够更方便的调控背景颜色。
所以一般会将Background Color属性透明度调为0。

Color Palette

Color Palette 属性用到比较多。不过一般在折线图中用的比较多，因为这里的颜色控制，控制的是默认状态图表的数据色彩，如：柱状图的柱体颜色，折线图线条颜色。

由于柱状图通常会设置渐变色，从Color到To Color的颜色变化，因此普通默认色，并不能满足此功能。

Color Palette是一个颜色数组，图中11个色彩控制属性，分别对应图表的series（如果有11个，就会自动对应）。

若使用此默认色彩功能，需要设置series中的line style 颜色为默认状态，即全黑且透明度为0。

Theme其他属性

其他属性基本上都是控制默认状态的表格中，标题、子标题、标注的字体或颜色的设置。

若需要更细致的控制表格的这些设置，其实这一块并不是特别重要，在下面其他属性进行设计就可以了。这里默认即可。

Background

Background控制的是图表的背景，上文中说了，由于设计方便，所以基本上没有用到这个功能，直接设置父对象的图片，作为背景。

Title

Title属性控制图表的标题，下方第二个图为第一个图中的设计效果。

Title一般用的也比较少，他是整个表格的标题，同时也能设置子标题。

Text：标题的文字。
Sub Text：子标题的文字。
Item Gap：两个文字之间的间隙。
Location：设置这两个文字的位置。Top Center等等设置，是相对于整个图表而言的，因此相对应的设置就会在整个图表相对应的位置出现。点开Location则会出现边界控制，可以细化文字位置。
Text Style：标题风格控制，可以设置颜色等。
Sub Text Style：子标题风格控制。

类似这种不需要数据驱动的，不会怎么变化的文本，我都是喜欢直接新建一个Text对象，然后想放在哪就放在哪，想怎么控制就怎么控制。所以也用的不多。

Legend

Legend就是表格的标注。

下面第一个图就是Legend的解释面板，也是对标注的各种样式进行设计。第二个图就是标注的样式例子。其中数据一、数据二的文字是根据Series的Name属性自动绑定的，要修改的话，只能去修改表名。

不过这种文字图片，习惯使用另设文本、图片对象进行设置。

Tooltip

Tooltip就是提示工具。{a}：系列名；{b}：数据名；{c}：数据值；{d}：百分比。

其中，0.##% 表示数值 *100 后加上百分号%。

N1、N2、N3 分别表示数值 保留一位、两位、三位小数。

其余设置就是对字体、文字、背景等属性的设置。不再多做介绍。

DataZoom

DataZoom用于区域缩放等功能。

Orient：控制水平还是垂直滚动。
Support Inside：控制是否能内部操作。
Support Inside Drag：拖拽滚动。
Support Slider：滚动条。
Start：图表开始位置。
End：图表结束位置。
Min Show Num：最小展示图表柱状个数。pass：这里设置最小数后，上方设置图表开始与结束位置，存在bug，在区间内展示的数量达不到最小展示数，就会报错，所以这个属性建议不用，直接用上方位置控制数量。

VisualMap

这个还没用到过。

Grid

控制图表里面的X轴Y轴所表示的图表格子，控制它的位置还有背景色。

XAxis

x轴设置。

Split Number：坐标轴分割段数。
Axis Line：x轴线的设置。
Axis Name：x轴坐标轴名。
Axis Tick：x轴分割点。
Axis Label：x轴下方文字。可以调整角度以及偏移量等等。
Split Line：以x轴为标准的分割线。
Split Area：分割区域。
Icon Style：x轴下方文字前的小图标。
Data：x轴数据。

YAxis

y轴设置。

与x轴类似，不过增加了个Interval间隔，即y轴数值间隔。

Series

表格列表。可以设置多个表格，进行组合。

Item Style：柱状图是itemstyle，折线图是linestyle。设置了色彩值的话，上面Theme中的颜色设置将没有显示。
Mark Line：设置标记线，可以设置平均值、最大、最小值的横线，或自定义大小。
Label：图表上的数值标签显示，在柱状图中，若同时存在正值与负值，那么会导致标签无法正常显示（正值标签在图形上方，负值标签在图形下方）。
解决办法：
修改CoordinateChart脚本下Internal_RefreshLabelPosition(Serie, SerieData, SerieLabel, Vector3, bool , bool )方法。

//假设现在有个柱状图表长宽分别是2、2。
//在这里pos.x、pos.y表示当前标签的位置，位置的大小是依据表格位置计算的。
//即当前标签到中线的距离（可能正数或负数），则其区间范围是（-1，1）
//bottomPos.x、bottomPos.y分别表示y轴到图表中线的距离、x轴到图表中线的距离，区间范围是（-1，1）。

//判断是否是y轴的标签（y轴作为底）
//是，那就标签纵坐标为pos.y，横坐标为坐标轴x轴位置bottomPos.x+（横坐标pos.y-bottomPos.x）。
//即为中间位置（此处为原始取中间位置算法）。

//不是，那就标签横坐标为pos.x，纵坐标为pos.y+ ((pos.y - bottomPos.y) >= 0 ? 10f : -10f));
//对标签位置进行判断，如果位置在坐标轴上方，那就给它加上10的偏移量，反之加上-10的偏移量。
//这样就可以让正值标签在图形上方，负值标签在图形下方。
case SerieLabel.Position.Center:
	pos = isYAxis ? new Vector3(bottomPos.x + (pos.x - bottomPos.x) / 2, pos.y) :
					new Vector3(pos.x, pos.y+ ((pos.y - bottomPos.y) >= 0 ? 10f : -10f));
	break;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16