Unity接入ChartAndGraph图表插件

说明

  最近项目上需要实现部分图表数据显示，因为需要用到一些3D图表，所以选择了ChartAndGraph这款图表插件，图表数据是通过后台接口读取Json并解析,然后调用图表插件API将数据显示出来。

一、实现柱状图

实现效果

实现步骤

1. 创建柱形图预设如下图，Tools-Charts-Bar-Canvas-Simple创建一个柱形图预设。
   
2. 通过在Insperctor面板中设置相关参数
   在上述步骤创建的柱形图预设中找到Canvas Bar Chart脚本组件，列举一下常用设置
   柱形图数据设置：其中Categories就是X轴向的内容（但不是在图表下X轴显示的数据），Groups是组名，点击对应后面三个点可以修改移出等操作。
   
   Y轴数据设置：Y轴数据实在柱形图组件上的Vertical Axis脚本组件上控制,常用设置如下：
   Format：包含四种数据类型Number、Time、Date、Date Time四种数据（这里是只能选取这四种数据类型，如果Y轴的值，上述四种类型满足不了，可能需要扩展一下插件来支持动态指定）
   Text Prefix:Y轴值的前缀
   Text Suffix：Y轴文本的后缀
   Main Divisions:是主分区的设置，其下的Total是设置有Y轴有多少个数据
   Sub Divisions:是子分区的设置，其下的Total是设置有Y轴有多少个数据
   
3. 通过脚本动态加载数据，其余的一些设置也可以通过代码获取到，大家可以试一下。

  		canvasBarChart_LDSCL=this.GetComponent<CanvasBarChart>();

        //数据加载
        canvasBarChart_LDSCL.DataSource.StartBatch();
        canvasBarChart_LDSCL.DataSource.SetValue("1月", "all", 10);
        canvasBarChart_LDSCL.DataSource.SetValue("2月", "all", 10);
        canvasBarChart_LDSCL.DataSource.SetValue("3月", "all", 10);
        canvasBarChart_LDSCL.DataSource.SetValue("4月", "all", 10);
        canvasBarChart_LDSCL.DataSource.SetValue("5月", "all", 10);
        canvasBarChart_LDSCL.DataSource.SetValue("6月", "all", 10);
        canvasBarChart_LDSCL.DataSource.SetValue("7月", "all", 10);
        canvasBarChart_LDSCL.DataSource.EndBatch();

二、实现折线图

实现效果

实现步骤

1. 创建折线图预设如下图，点击Tools-Charts-Graph-Canvas-Simple创建预设。
   

2. 通过在Insperctor面板中设置相关参数。
   在上述步骤创建的柱形图预设中找到Graph Chart脚本组件，列举一下常用设置
   Graph Chart脚本组件：
   Fit Margin:可以设置X/Y轴的显示起点范围
   Categories:折线图数据，可以设置每组数据
   Horizontral View: 如勾选自动，起始数值跟结束数值会自动适配，如不想从0开始，就取消勾选通过设置Horizontal View Origin来设置起始点，通过Horizontal View Size 来设置数据的数量
   Vertical View：同理

   
   Verical Axis(Y轴设置)

   基本使用跟上述柱形图一样，不再列举
   
   3.通过脚本动态加载数据

        graphChart_MJXY=this.GetComponent<GraphChart>();

        graphChart_MJXY.DataSource.StartBatch();
        graphChart_MJXY.DataSource.ClearCategory("main");
        graphChart_MJXY.DataSource.AddPointToCategory("main", 1, 1);
        graphChart_MJXY.DataSource.AddPointToCategory("main", 2, 2);
        graphChart_MJXY.DataSource.AddPointToCategory("main", 4, 3);
        graphChart_MJXY.DataSource.AddPointToCategory("main", 5, 5);
        graphChart_MJXY.DataSource.EndBatch();

遇到的问题

在开发中也遇到的问题，就是X轴的内容显示，因为这个插件X/Y轴的内容只包含了Number、Time、Date、DateTime四种预设类型，开发过程中需要显示不连续的数字，如10、11、12、1、2、3，我是动态添加了一种枚举类型，然后动态的设置X轴的值。还有就是扩展了一些方法。