Unity中画2D图表（1）——用XChart包绘制折线图

做一些数据处理和数据分析的时候，把数据可视化是一项重要的工作，本例以画一个包含两条温度曲线的图开始…

一、折线图的绘制效果

二、用到的包

1、XChart介绍

2、XChart官方链接

https://github.com/XCharts-Team/XCharts

三、如何用代码来设置线条的多个参数

• 1、设置图表的大小
• 2、设置主标题，副标题
• 3、设置Tooltip和Legend
• 4、设置XY的刻度标签值
• 5、在一个chart里画多条折线，比如2根折线
• 6、x轴刻度标签旋转(倾斜)设置
• 7、设置线条的颜色
• 8、线条粗细设置
• 9、线条平滑设置

四、示例代码

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Cysharp.Threading.Tasks; // https://github.com/Cysharp/UniTask
using XCharts.Runtime;         // https://github.com/XCharts-Team/XCharts 
using System;
using System.Linq;
using UnityEngine.UI;

public class ExampleLineChart : MonoBehaviour
{
    
    
    /// <summary>
    /// 测试按钮——画线
    /// </summary>
    public Button StartBtn;

    private void Start()
    {
    
    
        StartBtn.onClick.AddListener(()=> 
        {
    
    
            DrawLineFlow();
        });
    }

    /// <summary>
    /// 
    /// </summary>
    /// <returns></returns>
    private async UniTask DrawLineFlow()
    {
    
    
        //【1】添加一个LineChart图表
        Debug.Log("添加一个默认的折线图");
        var chart = gameObject.GetComponent<LineChart>();
        if (chart == null)
        {
    
    
            chart = gameObject.AddComponent<LineChart>();
            chart.Init();
        }

        //【2】设置图表的大小：SetSize(x,y)
        Debug.Log("设置图表的大小(580, 300) ");
        chart.SetSize(580, 300);//代码动态设置尺寸，或直接操作chart.rectTransform，或直接在Inspector上改

        Debug.Log("2秒后重新设置大小(1102, 519) ");
        await UniTask.Delay(TimeSpan.FromSeconds(2.0f));
        chart.SetSize(1102, 519);

        //【3】设置标题：chart.Title.text|subText = ""
        Debug.Log("2秒后:设置标题 ");
        await UniTask.Delay(TimeSpan.FromSeconds(2.0f));
        var title = chart.GetOrAddChartComponent<Title>();
        title.text = "森林小气候与碳通量的关系";            //主标题
        title.subText = "温度湿度数据";                     //副标题

        //【4】设置提示框【Tooltip】和图例【Legend】是否显示
        //Tooltip - 鼠标悬停在曲线节点上的时候，显示数据信息 
        //Legend  - 图上数据系列的类别信息【例如[red-白天温度]、[black-晚上温度]】
        Debug.Log("2秒后:设置提示框和图例是否显示");
        await UniTask.Delay(TimeSpan.FromSeconds(2.0f));
        var tooltip = chart.GetOrAddChartComponent<Tooltip>();
        tooltip.show = true;                                //在数据节点上，鼠标悬停时显示的信息框
        var legend = chart.GetOrAddChartComponent<Legend>();
        legend.show = true;

        //【5】设置坐标轴的数据刻度信息
        Debug.Log("2秒后:设置坐标轴");
        await UniTask.Delay(TimeSpan.FromSeconds(2.0f));

        //x轴设置
        var xAxis = chart.GetOrAddChartComponent<XAxis>();
        xAxis.splitNumber = 24;                            //数据的个数-参数硬编码
        xAxis.boundaryGap = true;
        xAxis.type = Axis.AxisType.Category;
       

        //y轴设置
        var yAxis = chart.GetOrAddChartComponent<YAxis>();
        yAxis.type = Axis.AxisType.Value;
        
        //【6】清空默认数据，添加Line类型的Serie用于接收数据
        Debug.Log("2秒后:清空默认数据，添加Line类型的Serie用于接收数据");
        await UniTask.Delay(TimeSpan.FromSeconds(2.0f));
        chart.RemoveData();

        //【7】添加数据
        chart.AddSerie<Line>("林内温度");
        chart.AddSerie<Line>("林外温度");

        Debug.Log("2秒后:添加数据");
        await UniTask.Delay(TimeSpan.FromSeconds(2.0f));
        var series1_24 = Enumerable.Range(1, 24).ToList();
        var xTicks = series1_24.Select(x=>$"{
      
      x}:00").ToList();
        var yTicks = series1_24.Select(x => UnityEngine.Random.Range(10, 20)).ToList();  //[min,max) 前开后闭
        var yTicks2 = series1_24.Select(x => UnityEngine.Random.Range(10, 20)).ToList();

        //数据添加到图表上
        series1_24.ForEach(idx=> 
        {
    
    
            chart.AddXAxisData(xTicks[idx-1]);   //X轴的刻度标签
            chart.AddData(0, yTicks[idx-1]);     //Y1,第一根线的数据
            chart.AddData(1, yTicks2[idx - 1]);  //Y2,第二根线的数据
        });

        //【8】x轴刻度标签旋转(倾斜)设置
        Debug.Log("2秒后:x轴刻度标签旋转设置");
        await UniTask.Delay(TimeSpan.FromSeconds(2.0f));
        xAxis.axisLabel.rotate = 45;

        //【9】x轴的含义【轴的标签】——没有发现
        //xAxis.axisName = ?

        //【10】设置线条的颜色
        Debug.Log("0.4秒后:线条的颜色设置");
        await UniTask.Delay(TimeSpan.FromSeconds(0.4f));

        //第一根线的颜色，包含整体渐变过度的颜色
        chart.series[0].lineStyle.color = Color.green;        //  【color】【toColor】【toColor2】三个颜色，相当于渐变过度
        //chart.series[0].lineStyle.toColor = Color.black;
        //chart.series[0].lineStyle.toColor2 = Color.blue;

        //第二根线的颜色
        chart.series[1].lineStyle.color = Color.blue;         //  【color】【toColor】【toColor2】三个颜色，相当于渐变过度

        //【11】线条粗细设置：线条太粗会显得比较粗制滥造，调细一些显得比较精美
        await UniTask.Delay(TimeSpan.FromSeconds(2.0f));
        Debug.Log("2秒后:设置线条的粗细为1");
        chart.series[0].lineStyle.width = 1.0f; //第一条线的颜色，在编辑器running模式下调试，选取合适的参数
        chart.series[1].lineStyle.width = 1.0f; //第二条线的颜色

        //【12】线条平滑设置：折现符合逻辑，但是看起来比较尖锐，平滑线优美些
        chart.series[0].lineType = LineType.Smooth; //Smooth-平滑线，Normal-折线
        chart.series[1].lineType = LineType.Smooth; //Smooth-平滑线，Normal-折线
    }

#if UNITY_EDITOR
    [ContextMenu("测试")]
#endif
    void Test()
    {
    
    
        DrawLineFlow();
    }
}