一、折线图的绘制效果

二、用到的包

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("测试")]
#endifvoid Test(){DrawLineFlow();}
}