首先我自己下载了插件，这是网盘链接：
链接：https://pan.baidu.com/s/1pyjTQ16kM8CFVc6UzXllcw
提取码：1234
推荐看看官网文档的教程，虽然里面的代码好像是旧版本插件的，新版本插件用不了，但是一些知识还是有用的。
入门教程：5分钟上手 XCharts 3.0 | XCharts
一、常用模块
1、Therme模块
BackgroundColor和ColorPallette部分的颜色视情况需要调一下，比如不需要背景就把BackgroundColor的alpha值设为0，ColorPallette部分的颜色尤其是第一个有时候会影响最终效果的颜色，先留个心眼。
其它的部分划红线的模块一般经常要用到，尤其是最后的Series模块。
2、Series模块
Series的Size部分可以添加多个Serie，比如两个折线图。Type可以选类型，最常用的就是前三个：Line折线图、Bar柱状图、Pie饼状图。打了勾的子模块一般比较常用，中间那部分数据一般不用改，Symbol表示数据是否有标记点，就是图表中90旁边的实心小圆，AreaStyle表示是否添加面积效果，下图中就加了渐变效果。
Data部分就是要显示的数据，注意数量要跟XAxis的Data部分保持一样。
对于饼状图来说，设置Radius的第一个数和第二个数就能实现下面两种效果，第一个数表示内半径，第二个数表示外半径，第一个数为0就是实心效果，否则就是空心效果。
各个模块的参数函数这些参考配置手册，配置项手册 | XCharts，比如下面是ItemStyle的参数说明，ItemStyle可以设置颜色渐变。
最后还是要看插件的代码的，找到XCharts/Examples/Runtime下的脚本，在空场景里创建UI下的空物体，将脚本一个一个拖上去运行就能看到不同的效果。
二、插件代码学习
打开一个空场景，创建一个空的UI物体，然后一个一个脚本挂上去看效果。
1、Example00_CheatSheet：术语解析，帮助你更好的理解各个模块组件的含义和对应效果，脚本里的代码可以给自己作参考。
2、Example01_UpdateData：对Series里的第一个serie做数据修改。需要自己手动创建一个图表，然后在挂上该脚本来看效果，运行后过了几秒钟，发觉已经有两个数据有了变化。那么总结就是改变图表的数据调用chart组件UpdateData函数就够了。
/************************************************/
/* */
/* Copyright (c) 2018 - 2021 monitor1394 */
/* https://github.com/monitor1394 */
/* */
/************************************************/
using UnityEngine;
namespace XCharts.Examples
{
[DisallowMultipleComponent]
[ExecuteInEditMode]
public class Example01_UpdateData : MonoBehaviour
{
private float updateTime = 0;
BaseChart chart;
void Awake()
{
chart = gameObject.GetComponent<BaseChart>();
}
void Update()
{
updateTime += Time.deltaTime;
if (chart && updateTime > 2)
{
updateTime = 0;
var serie = chart.series.GetSerie(0);
//serie.animation.dataChangeEnable = true;
var dataCount = serie.dataCount;
if (chart is RadarChart)
{
var dimension = serie.GetSerieData(0).data.Count - 1;
chart.UpdateData(0, 0, Random.Range(0, dimension + 1), Random.Range(0, 100));
}
else if (chart is HeatmapChart)
{
var dimension = serie.GetSerieData(0).data.Count - 1;
for (int i = 0; i < dataCount; i++)
{
chart.UpdateData(0, i, dimension, Random.Range(0, 10));
}
}
else
{
chart.UpdateData(0, Random.Range(0, dataCount), Random.Range(10, 90));
}
}
}
}
}3、 Example02_ChartEvent：图表事件响应，如点击事件可以在安卓大屏上触发(猜的)，暂时没发现有什么实用价值。
/************************************************/
/* */
/* Copyright (c) 2018 - 2021 monitor1394 */
/* https://github.com/monitor1394 */
/* */
/************************************************/
using UnityEngine;
using UnityEngine.EventSystems;
namespace XCharts.Examples
{
[DisallowMultipleComponent]
[ExecuteInEditMode]
public class Example02_ChartEvent : MonoBehaviour
{
BaseChart chart;
void Awake()
{
chart = gameObject.GetComponent<BaseChart>();
if (chart == null)
{
chart = gameObject.AddComponent<LineChart>();
}
chart.onPointerEnter = OnPointerEnter;
chart.onPointerExit = OnPointerExit;
chart.onPointerDown = OnPointerDown;
chart.onPointerUp = OnPointerUp;
chart.onPointerClick = OnPointerClick;
chart.onScroll = OnScroll;
}
void OnPointerEnter(PointerEventData eventData, BaseGraph chart)
{
Debug.Log("enter:" + chart);
}
void OnPointerExit(PointerEventData eventData, BaseGraph chart)
{
Debug.Log("exit:" + chart);
}
void OnPointerDown(PointerEventData eventData, BaseGraph chart)
{
Debug.Log("down:" + chart);
}
void OnPointerUp(PointerEventData eventData, BaseGraph chart)
{
Debug.Log("up:" + chart);
}
void OnPointerClick(PointerEventData eventData, BaseGraph chart)
{
Debug.Log("click:" + chart);
}
void OnScroll(PointerEventData eventData, BaseGraph chart)
{
Debug.Log("scroll:" + chart);
}
}
}4、Example03_ChartAnimation：图表动画效果。最终这5个柱子是每隔1秒且用时1秒显示出来。
/************************************************/
/* */
/* Copyright (c) 2018 - 2021 monitor1394 */
/* https://github.com/monitor1394 */
/* */
/************************************************/
using UnityEngine;
namespace XCharts.Examples
{
[DisallowMultipleComponent]
[ExecuteInEditMode]
public class Example03_ChartAnimation : MonoBehaviour
{
BaseChart chart;
void Awake()
{
chart = gameObject.GetComponent<BaseChart>();
if (chart == null)
{
chart = gameObject.AddComponent<BarChart>();
}
var serie = chart.series.GetSerie(0);
serie.animation.enable = true;
//自定义每个数据项的渐入延时
serie.animation.customFadeInDelay = CustomFadeInDelay;
//自定义每个数据项的渐入时长
serie.animation.customFadeInDuration = CustomFadeInDuration;
}
//dataIndex：每个数据下标，插件自动传过来的
float CustomFadeInDelay(int dataIndex)
{
return dataIndex * 1000;
}
//dataIndex：每个数据下标，插件自动传过来的
float CustomFadeInDuration(int dataIndex)
{
return /*dataIndex * 1000 +*/ 1000;
}
}
}5、Example10_LineChart：各种折线图效果。
/************************************************/
/* */
/* Copyright (c) 2018 - 2021 monitor1394 */
/* https://github.com/monitor1394 */
/* */
/************************************************/
using System.Collections;
using UnityEngine;
namespace XCharts.Examples
{
[DisallowMultipleComponent]
public class Example10_LineChart : MonoBehaviour
{
private LineChart chart;
private Serie serie;
private int m_DataNum = 8;
void Awake()
{
LoopDemo();
}
private void OnEnable()
{
LoopDemo();
}
void LoopDemo()
{
StopAllCoroutines();
StartCoroutine(PieDemo());
}
IEnumerator PieDemo()
{
StartCoroutine(AddSimpleLine());
yield return new WaitForSeconds(2);
StartCoroutine(ChangeLineType());
yield return new WaitForSeconds(8);
StartCoroutine(LineAreaStyleSettings());
yield return new WaitForSeconds(5);
StartCoroutine(LineArrowSettings());
yield return new WaitForSeconds(2);
StartCoroutine(LineSymbolSettings());
yield return new WaitForSeconds(7);
StartCoroutine(LineLabelSettings());
yield return new WaitForSeconds(3);
StartCoroutine(LineMutilSerie());
yield return new WaitForSeconds(5);
LoopDemo();
}
IEnumerator AddSimpleLine()
{
chart = gameObject.GetComponent<LineChart>();
if (chart == null) chart = gameObject.AddComponent<LineChart>();
chart.title.text = "LineChart - 折线图";
chart.title.subText = "普通折线图";
chart.yAxis0.minMaxType = Axis.AxisMinMaxType.Custom;
chart.yAxis0.min = 0;
chart.yAxis0.max = 100;
chart.RemoveData();
serie = chart.AddSerie(SerieType.Line, "Line");
for (int i = 0; i < m_DataNum; i++)
{
chart.AddXAxisData("x" + (i + 1));
chart.AddData(0, UnityEngine.Random.Range(30, 90));
}
yield return new WaitForSeconds(1);
}
IEnumerator ChangeLineType()
{
chart.title.subText = "LineTyle - 曲线图";
serie.lineType = LineType.Smooth;
chart.RefreshChart();
yield return new WaitForSeconds(1);
chart.title.subText = "LineTyle - 阶梯线图";
serie.lineType = LineType.StepStart;
chart.RefreshChart();
yield return new WaitForSeconds(1);
serie.lineType = LineType.StepMiddle;
chart.RefreshChart();
yield return new WaitForSeconds(1);
serie.lineType = LineType.StepEnd;
chart.RefreshChart();
yield return new WaitForSeconds(1);
chart.title.subText = "LineTyle - 虚线";
serie.lineType = LineType.Dash;
chart.RefreshChart();
yield return new WaitForSeconds(1);
chart.title.subText = "LineTyle - 点线";
serie.lineType = LineType.Dot;
chart.RefreshChart();
yield return new WaitForSeconds(1);
chart.title.subText = "LineTyle - 点划线";
serie.lineType = LineType.DashDot;
chart.RefreshChart();
yield return new WaitForSeconds(1);
chart.title.subText = "LineTyle - 双点划线";
serie.lineType = LineType.DashDotDot;
chart.RefreshChart();
serie.lineType = LineType.Normal;
chart.RefreshChart();
}
IEnumerator LineAreaStyleSettings()
{
chart.title.subText = "AreaStyle 面积图";
serie.areaStyle.show = true;
chart.RefreshChart();
yield return new WaitForSeconds(1f);
chart.title.subText = "AreaStyle 面积图";
serie.lineType = LineType.Smooth;
serie.areaStyle.show = true;
chart.RefreshChart();
yield return new WaitForSeconds(1f);
chart.title.subText = "AreaStyle 面积图 - 调整透明度";
while (serie.areaStyle.opacity > 0.4)
{
serie.areaStyle.opacity -= 0.6f * Time.deltaTime;
chart.RefreshChart();
yield return null;
}
yield return new WaitForSeconds(1);
chart.title.subText = "AreaStyle 面积图 - 渐变";
serie.areaStyle.toColor = Color.white;
chart.RefreshChart();
yield return new WaitForSeconds(1);
}
IEnumerator LineArrowSettings()
{
chart.title.subText = "LineArrow 头部箭头";
serie.lineArrow.show = true;
serie.lineArrow.position = LineArrow.Position.Start;
chart.RefreshChart();
yield return new WaitForSeconds(1);
chart.title.subText = "LineArrow 尾部箭头";
serie.lineArrow.position = LineArrow.Position.End;
chart.RefreshChart();
yield return new WaitForSeconds(1);
serie.lineArrow.show = false;
}
/// <summary>
/// SerieSymbol 相关设置
/// </summary>
/// <returns></returns>
IEnumerator LineSymbolSettings()
{
chart.title.subText = "SerieSymbol 图形标记";
while (serie.symbol.size < 5)
{
serie.symbol.size += 2.5f * Time.deltaTime;
chart.RefreshChart();
yield return null;
}
chart.title.subText = "SerieSymbol 图形标记 - 空心圆";
yield return new WaitForSeconds(1);
chart.title.subText = "SerieSymbol 图形标记 - 实心圆";
serie.symbol.type = SerieSymbolType.Circle;
chart.RefreshChart();
yield return new WaitForSeconds(1);
chart.title.subText = "SerieSymbol 图形标记 - 三角形";
serie.symbol.type = SerieSymbolType.Triangle;
chart.RefreshChart();
yield return new WaitForSeconds(1);
chart.title.subText = "SerieSymbol 图形标记 - 正方形";
serie.symbol.type = SerieSymbolType.Rect;
chart.RefreshChart();
yield return new WaitForSeconds(1);
chart.title.subText = "SerieSymbol 图形标记 - 菱形";
serie.symbol.type = SerieSymbolType.Diamond;
chart.RefreshChart();
yield return new WaitForSeconds(1);
chart.title.subText = "SerieSymbol 图形标记";
serie.symbol.type = SerieSymbolType.EmptyCircle;
chart.RefreshChart();
yield return new WaitForSeconds(1);
}
/// <summary>
/// SerieLabel相关配置
/// </summary>
/// <returns></returns>
IEnumerator LineLabelSettings()
{
chart.title.subText = "SerieLabel 文本标签";
serie.label.show = true;
serie.label.border = false;
chart.RefreshChart();
while (serie.label.offset[1] < 20)
{
serie.label.offset = new Vector3(serie.label.offset.x, serie.label.offset.y + 20f * Time.deltaTime);
chart.RefreshChart();
yield return null;
}
yield return new WaitForSeconds(1);
serie.label.border = true;
chart.RefreshChart();
yield return new WaitForSeconds(1);
serie.label.textStyle.color = Color.white;
serie.label.textStyle.backgroundColor = Color.grey;
chart.RefreshLabel();
chart.RefreshChart();
yield return new WaitForSeconds(1);
serie.label.show = false;
chart.RefreshChart();
}
/// <summary>
/// 添加多条线图
/// </summary>
/// <returns></returns>
IEnumerator LineMutilSerie()
{
chart.title.subText = "多系列";
var serie2 = chart.AddSerie(SerieType.Line, "Line2");
serie2.lineType = LineType.Normal;
for (int i = 0; i < m_DataNum; i++)
{
chart.AddData(1, UnityEngine.Random.Range(30, 90));
}
yield return new WaitForSeconds(1);
var serie3 = chart.AddSerie(SerieType.Line, "Line3");
serie3.lineType = LineType.Normal;
for (int i = 0; i < m_DataNum; i++)
{
chart.AddData(2, UnityEngine.Random.Range(30, 90));
}
yield return new WaitForSeconds(1);
chart.yAxis0.minMaxType = Axis.AxisMinMaxType.Default;
chart.title.subText = "多系列 - 堆叠";
serie.stack = "samename";
serie2.stack = "samename";
serie3.stack = "samename";
chart.RefreshChart();
yield return new WaitForSeconds(1);
}
}
}6、Example11_AddSinCurve：正弦曲线效果。
/************************************************/
/* */
/* Copyright (c) 2018 - 2021 monitor1394 */
/* https://github.com/monitor1394 */
/* */
/************************************************/
using UnityEngine;
namespace XCharts.Examples
{
[DisallowMultipleComponent]
[ExecuteInEditMode]
public class Example11_AddSinCurve : MonoBehaviour
{
private float time;
public int angle;
private LineChart chart;
void Awake()
{
chart = gameObject.GetComponent<LineChart>();
if (chart == null)
{
chart = gameObject.AddComponent<LineChart>();
}
chart.title.show = true;
chart.title.text = "Sin Curve";
chart.tooltip.show = true;
chart.legend.show = false;
chart.xAxes[0].show = true;//第1个x轴
chart.xAxes[1].show = false;//第2个x轴
chart.yAxes[0].show = true;
chart.yAxes[1].show = false;
chart.xAxes[0].type = Axis.AxisType.Value;
chart.yAxes[0].type = Axis.AxisType.Value;
chart.xAxes[0].boundaryGap = false;
chart.xAxes[0].maxCache = 0;
chart.series.list[0].maxCache = 0;
chart.RemoveData();
var serie = chart.AddSerie(SerieType.Line);
serie.symbol.show = false;
serie.lineType = LineType.Normal;
for (angle = 0; angle < 1080; angle++)
{
float xvalue = Mathf.PI / 180 * angle;
float yvalue = Mathf.Sin(xvalue);
chart.AddData(0, xvalue, yvalue);
}
}
void Update()
{
if (angle > 3000) return;
angle++;
float xvalue = Mathf.PI / 180 * angle;
float yvalue = Mathf.Sin(xvalue);
chart.AddData(0, xvalue, yvalue);
}
}
}7、Example20_BarChart：各种柱状图效果。
/************************************************/
/* */
/* Copyright (c) 2018 - 2021 monitor1394 */
/* https://github.com/monitor1394 */
/* */
/************************************************/
using System.Collections;
using UnityEngine;
namespace XCharts.Examples
{
[DisallowMultipleComponent]
public class Example20_BarChart : MonoBehaviour
{
private BarChart chart;
private Serie serie, serie2;
private int m_DataNum = 5;
void Awake()
{
LoopDemo();
}
private void OnEnable()
{
LoopDemo();
}
void LoopDemo()
{
StopAllCoroutines();
StartCoroutine(PieDemo());
}
IEnumerator PieDemo()
{
StartCoroutine(AddSimpleBar());
yield return new WaitForSeconds(2);
StartCoroutine(BarMutilSerie());
yield return new WaitForSeconds(3);
StartCoroutine(ZebraBar());
yield return new WaitForSeconds(3);
StartCoroutine(SameBarAndNotStack());
yield return new WaitForSeconds(3);
StartCoroutine(SameBarAndStack());
yield return new WaitForSeconds(3);
StartCoroutine(SameBarAndPercentStack());
yield return new WaitForSeconds(10);
LoopDemo();
}
IEnumerator AddSimpleBar()
{
chart = gameObject.GetComponent<BarChart>();
if (chart == null) chart = gameObject.AddComponent<BarChart>();
chart.title.text = "BarChart - 柱状图";
chart.title.subText = "普通柱状图";
chart.yAxis0.minMaxType = Axis.AxisMinMaxType.Default;
chart.RemoveData();
serie = chart.AddSerie(SerieType.Bar, "Bar1");
for (int i = 0; i < m_DataNum; i++)
{
chart.AddXAxisData("x" + (i + 1));
chart.AddData(0, UnityEngine.Random.Range(30, 90));
}
yield return new WaitForSeconds(1);
}
IEnumerator BarMutilSerie()
{
chart.title.subText = "多条柱状图";
float now = serie.barWidth - 0.35f;
while (serie.barWidth > 0.35f)
{
serie.barWidth -= now * Time.deltaTime;
chart.RefreshChart();
yield return null;
}
serie2 = chart.AddSerie(SerieType.Bar, "Bar2");
serie2.lineType = LineType.Normal;
serie2.barWidth = 0.35f;
for (int i = 0; i < m_DataNum; i++)
{
chart.AddData(1, UnityEngine.Random.Range(20, 90));
}
yield return new WaitForSeconds(1);
}
IEnumerator ZebraBar()
{
chart.title.subText = "斑马柱状图";
serie.barType = BarType.Zebra;
serie2.barType = BarType.Zebra;
serie.barZebraWidth = serie.barZebraGap = 4;
serie2.barZebraWidth = serie2.barZebraGap = 4;
chart.RefreshChart();
yield return new WaitForSeconds(1);
}
IEnumerator SameBarAndNotStack()
{
chart.title.subText = "非堆叠同柱";
serie.barType = serie2.barType = BarType.Normal;
serie.stack = "";
serie2.stack = "";
serie.barGap = -1;
serie2.barGap = -1;
chart.RefreshAxisMinMaxValue();
yield return new WaitForSeconds(1);
}
IEnumerator SameBarAndStack()
{
chart.title.subText = "堆叠同柱";
serie.barType = serie2.barType = BarType.Normal;
serie.stack = "samename";
serie2.stack = "samename";
chart.RefreshAxisMinMaxValue();
yield return new WaitForSeconds(1);
float now = 0.6f - serie.barWidth;
while (serie.barWidth < 0.6f)
{
serie.barWidth += now * Time.deltaTime;
serie2.barWidth += now * Time.deltaTime;
chart.RefreshChart();
yield return null;
}
serie.barWidth = serie2.barWidth;
chart.RefreshChart();
yield return new WaitForSeconds(1);
}
IEnumerator SameBarAndPercentStack()
{
chart.title.subText = "百分比堆叠同柱";
serie.barType = serie2.barType = BarType.Normal;
serie.stack = "samename";
serie2.stack = "samename";
serie.barPercentStack = true;
serie.label.show = true;
serie.label.position = SerieLabel.Position.Center;
serie.label.border = false;
serie.label.textStyle.color = Color.white;
serie.label.formatter = "{d:f0}%";
serie2.label.show = true;
serie2.label.position = SerieLabel.Position.Center;
serie2.label.border = false;
serie2.label.textStyle.color = Color.white;
serie2.label.formatter = "{d:f0}%";
chart.RefreshLabel();
chart.RefreshChart();
yield return new WaitForSeconds(1);
}
}
}8、Example30_PieChart：各种饼状图效果。
/************************************************/
/* */
/* Copyright (c) 2018 - 2021 monitor1394 */
/* https://github.com/monitor1394 */
/* */
/************************************************/
using System.Collections;
using UnityEngine;
using UnityEngine.EventSystems;
namespace XCharts.Examples
{
[DisallowMultipleComponent]
public class Example30_PieChart : MonoBehaviour
{
private PieChart chart;
private Serie serie, serie1;
private float m_RadiusSpeed = 100f;
private float m_CenterSpeed = 1f;
void Awake()
{
LoopDemo();
}
private void OnEnable()
{
LoopDemo();
}
void LoopDemo()
{
StopAllCoroutines();
StartCoroutine(PieDemo());
}
IEnumerator PieDemo()
{
StartCoroutine(PieAdd());
yield return new WaitForSeconds(2);
StartCoroutine(PieShowLabel());
yield return new WaitForSeconds(4);
StartCoroutine(Doughnut());
yield return new WaitForSeconds(3);
StartCoroutine(DoublePie());
yield return new WaitForSeconds(2);
StartCoroutine(RosePie());
yield return new WaitForSeconds(5);
LoopDemo();
}
IEnumerator PieAdd()
{
chart = gameObject.GetComponent<PieChart>();
if (chart == null) chart = gameObject.AddComponent<PieChart>();
chart.title.text = "PieChart - 饼图";
chart.title.subText = "基础饼图";
chart.legend.show = true;
chart.legend.location.align = Location.Align.TopLeft;
chart.legend.location.top = 60;
chart.legend.location.left = 2;
chart.legend.itemWidth = 70;
chart.legend.itemHeight = 20;
chart.legend.orient = Orient.Vertical;
chart.RemoveData();
serie = chart.AddSerie(SerieType.Pie, "访问来源");
serie.radius[0] = 0;
serie.radius[1] = 110;
serie.center[0] = 0.5f;
serie.center[1] = 0.4f;
chart.AddData(0, 335, "直接访问");
chart.AddData(0, 310, "邮件营销");
chart.AddData(0, 243, "联盟广告");
chart.AddData(0, 135, "视频广告");
chart.AddData(0, 1548, "搜索引擎");
chart.RefreshLabel();
chart.onPointerClickPie = delegate(PointerEventData e, int serieIndex, int dataIndex){
};
yield return new WaitForSeconds(1);
}
IEnumerator PieShowLabel()
{
chart.title.subText = "显示文本标签";
serie.label.show = true;
chart.RefreshChart();
yield return new WaitForSeconds(1);
serie.label.lineType = SerieLabel.LineType.Curves;
chart.RefreshChart();
yield return new WaitForSeconds(1);
serie.label.lineType = SerieLabel.LineType.HorizontalLine;
chart.RefreshChart();
yield return new WaitForSeconds(1);
serie.label.lineType = SerieLabel.LineType.BrokenLine;
chart.RefreshChart();
yield return new WaitForSeconds(1);
serie.label.show = false;
chart.RefreshChart();
}
IEnumerator Doughnut()
{
chart.title.subText = "圆环图";
serie.radius[0] = 2f;
while (serie.radius[0] < serie.radius[1] * 0.7f)
{
serie.radius[0] += m_RadiusSpeed * Time.deltaTime;
chart.RefreshChart();
yield return null;
}
serie.pieSpace = 1f;
chart.RefreshChart();
yield return new WaitForSeconds(1);
serie.data[0].selected = true;
chart.RefreshChart();
yield return new WaitForSeconds(1);
serie.pieSpace = 0f;
serie.data[0].selected = false;
chart.RefreshChart();
yield return new WaitForSeconds(1);
}
IEnumerator DoublePie()
{
chart.title.subText = "多图组合";
serie1 = chart.AddSerie(SerieType.Pie, "访问来源2");
chart.AddData(1, 335, "直达");
chart.AddData(1, 679, "营销广告");
chart.AddData(1, 1548, "搜索引擎");
serie1.radius[0] = 0;
serie1.radius[1] = 2f;
serie1.center[0] = 0.5f;
serie1.center[1] = 0.4f;
chart.RefreshChart();
while (serie1.radius[1] < serie.radius[0] * 0.75f)
{
serie1.radius[1] += m_RadiusSpeed * Time.deltaTime;
chart.RefreshChart();
yield return null;
}
serie1.label.show = true;
serie1.label.position = SerieLabel.Position.Inside;
serie1.label.textStyle.color = Color.white;
serie1.label.textStyle.fontSize = 14;
serie1.label.border = false;
chart.RefreshLabel();
chart.RefreshChart();
yield return new WaitForSeconds(1);
}
IEnumerator RosePie()
{
chart.title.subText = "玫瑰图";
chart.legend.show = false;
serie1.ClearData();
serie.ClearData();
serie1.radius = serie.radius = new float[2] { 0, 80 };
serie1.label.position = SerieLabel.Position.Outside;
serie1.label.lineType = SerieLabel.LineType.Curves;
serie1.label.textStyle.color = Color.clear;
for (int i = 0; i < 2; i++)
{
chart.AddData(i, 10, "rose1");
chart.AddData(i, 5, "rose2");
chart.AddData(i, 15, "rose3");
chart.AddData(i, 25, "rose4");
chart.AddData(i, 20, "rose5");
chart.AddData(i, 35, "rose6");
chart.AddData(i, 30, "rose7");
chart.AddData(i, 40, "rose8");
}
while (serie.center[0] > 0.25f || serie1.center[0] < 0.7f)
{
if (serie.center[0] > 0.25f) serie.center[0] -= m_CenterSpeed * Time.deltaTime;
if (serie1.center[0] < 0.7f) serie1.center[0] += m_CenterSpeed * Time.deltaTime;
chart.RefreshChart();
yield return null;
}
yield return new WaitForSeconds(1);
while (serie.radius[0] > 3f)
{
serie.radius[0] -= m_RadiusSpeed * Time.deltaTime;
serie1.radius[0] -= m_RadiusSpeed * Time.deltaTime;
chart.RefreshChart();
yield return null;
}
serie.radius[0] = 0;
serie1.radius[0] = 0;
serie.pieRoseType = RoseType.Area;
serie1.pieRoseType = RoseType.Radius;
chart.RefreshChart();
yield return new WaitForSeconds(1);
}
}
}9、Example_Dynamic：不断增加数据的动态效果折线图。
/************************************************/
/* */
/* Copyright (c) 2018 - 2021 monitor1394 */
/* https://github.com/monitor1394 */
/* */
/************************************************/
using System;
using UnityEngine;
namespace XCharts.Examples
{
[DisallowMultipleComponent]
[ExecuteInEditMode]
[RequireComponent(typeof(CoordinateChart))]
public class Example_Dynamic : MonoBehaviour
{
public int maxCacheDataNumber = 100;
public float initDataTime = 2;
public bool insertDataToHead = false;
private CoordinateChart chart;
private float updateTime;
private float initTime;
private int initCount;
private int count;
private bool isInited;
private DateTime timeNow;
void Awake()
{
chart = gameObject.GetComponentInChildren<CoordinateChart>();
chart.RemoveData();
var serie = chart.AddSerie(SerieType.Line);
serie.symbol.show = false;
serie.maxCache = maxCacheDataNumber;
chart.xAxes[0].maxCache = maxCacheDataNumber;
timeNow = DateTime.Now;
timeNow = timeNow.AddSeconds(-maxCacheDataNumber);
serie.insertDataToHead = insertDataToHead;
chart.xAxes[0].insertDataToHead = insertDataToHead;
}
void Update()
{
if (initCount < maxCacheDataNumber)
{
int count = (int)(maxCacheDataNumber / initDataTime * Time.deltaTime);
for (int i = 0; i < count; i++)
{
timeNow = timeNow.AddSeconds(1);
string category = timeNow.ToString("hh:mm:ss");
float value = UnityEngine.Random.Range(60, 150);
chart.AddXAxisData(category);
chart.AddData(0, value);
initCount++;
if (initCount > maxCacheDataNumber) break;
}
chart.RefreshChart();
}
updateTime += Time.deltaTime;
if (updateTime >= 1)
{
updateTime = 0;
count++;
string category = DateTime.Now.ToString("hh:mm:ss");
float value = UnityEngine.Random.Range(60, 150);
chart.AddXAxisData(category);
chart.AddData(0, value);
chart.RefreshChart();
}
}
}
}三、归纳总结
自己项目中需要接收数据进行更新，所以就需要用代码实际操作一下，这里以折线图为主，柱状图和饼状图以后再试试，反正就是那几个插件脚本，多看看就行了。
一、这里先做个总结：
1、获取组件：
private LineChart chart;//折线图
chart = gameObject.GetComponent<LineChart>();
if (chart == null) gameObject.AddComponent<LineChart>();
2、获取/增加serie
var serie = chart.series.GetSerie(0);
var serie = chart.AddSerie(SerieType.Line);
3、获取serie的数据个数
var dataCount = serie.dataCount;
4、更新serie的数据
原型函数： public virtual bool UpdateData(int serieIndex, int dataIndex, double value)
chart.UpdateData(0, Random.Range(0, dataCount), Random.Range(10, 90));
5、移除所有数据
chart.RemoveData();
6、给x轴增加类别
chart.AddXAxisData(category);
7、给serie添加数据
chart.AddData(0, xvalue, yvalue);
可配合AddXAxisData(category)一起使用，就能实现新增曲线效果，适合一些比如随时间变化而变化曲线的效果。
8、下一帧刷新图表
chart.RefreshChart()；
比如chart.AddXAxisData(category);和chart.AddData(0, value);新增一条数据后，就需要刷新图表才能看得到效果。
9、实现柱状图每一项的颜色都可渐变
看Serie.cs脚本，你会有收获的，可以控制每个data数据的特性显示。
void ShowThreeFourData(ThreeFourDataList dataList)
{
if (dataList != null)
{
m_BarChart2.RemoveData();
var serie = m_BarChart2.AddSerie(SerieType.Bar, "Bar");
serie.barType = BarType.Capsule;
serie.itemStyle.show = true;
serie.itemStyle.color0 = Color.white;
serie.itemStyle.toColor2 = Color.white;
Color color1 = new Color(0f, 255f / 255f, 0f);
Color color2 = new Color(255.0f / 255f, 43f / 255f, 61f / 255f);
serie.itemStyle.color = color1;
serie.itemStyle.toColor = color2;
for (int i = 0; i < dataList.dataList.Count; i++)
{
m_BarChart2.AddXAxisData(dataList.dataList[i].name);
m_BarChart2.AddData(0, dataList.dataList[i].temperature);
}
for (int i = 0; i < dataList.dataList.Count; i++)
{
serie.data[i].itemStyle.show = true;
serie.data[i].enableItemStyle = true;
float len = m_ShowMaxTemperature - m_ShowMinTemperature;
float t = (dataList.dataList[i].temperature - m_ShowMinTemperature) / len;
Color c = Color.Lerp(color1, color2, t);
serie.data[i].itemStyle.color0 = Color.white;
serie.data[i].itemStyle.toColor2 = Color.white;
serie.data[i].itemStyle.color = color1;
serie.data[i].itemStyle.toColor = c;
}
}
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
