unity XCharts 柱状图 折线图 相关代码

1.XChart的使用

1.先将XChart的资源导入

2.创建一个场景，在Canvas 右键 XCharts --> LineChart 就创建好了一个 折线图

2.挂载脚本

1.创建脚本，并将脚本挂在到1.中创建的LineChart上。

2.上代码

Using XCharts;

void LineXChartShow()
    {
        //获取LineChart组件
        var chart = gameObject.GetComponent<LineChart>();
        if (chart == null)
        {
            chart = gameObject.AddComponent<LineChart>();
            chart.SetSize(600, 300);//代码动态添加图表需要设置尺寸
        }

        //设置标题：
        chart.title.show = true;//标题显示
        chart.title.text = "测试趋势图";//标题内容

        //设置提示框和图例是否显示
        chart.tooltip.show = true;//鼠标移到折线图上显示的该点横纵坐标的值
        chart.legend.show = false;

        //设置是否使用双坐标轴和坐标轴类型
        chart.xAxes[0].show = true;
        chart.xAxes[1].show = false;
        chart.yAxes[0].show = true;
        chart.yAxes[1].show = false;
        chart.xAxes[0].type = Axis.AxisType.Category;
        chart.yAxes[0].type = Axis.AxisType.Value;

        //设置坐标轴分割线
        chart.xAxes[0].splitNumber = 10;
        chart.xAxes[0].boundaryGap = true;
        chart.xAxes[0].axisLabel.textLimit.maxWidth = 120;//设置坐标轴标签最大宽度

        //清空数据，添加`Line`类型的`Serie`用于接收数据
        chart.RemoveData();
        chart.AddSerie(SerieType.Line);

        // 订阅tooltip的事件回调
        chart.tooltip.show = true;
        chart.tooltip.formatter = "日期: {b}\n得分: {c}\nlevel:";//修改提示框展示的格式 
    
        //添加10个数据
        for (int i = 0; i < 10; i++)
         {
             chart.AddXAxisData("x" + i);
             chart.AddData(0, Random.Range(0, 101));
         }       
             
        //修改第一个折线的3个数据
         chart.UpdateData(0, 3, 15);

    }
    
}

 3.创建柱状图

1.在场景中 右键 创建 XCharts  --> BarChart

2.创建脚本，并将脚本挂在到1.中创建的BarChart上。

3.上代码

void BarXChartShow()
    {
        //1.添加柱状图
        var chart = gameObject.GetComponent<BarChart>();

        //2.设置标题
        chart.title.show = false;
        chart.title.text = "测试训练成绩趋势图";

        //3.清空默认数据，添加Bar类型的Serie用于接收数据
        chart.RemoveData();

        var serie1 = chart.AddSerie(SerieType.Bar, "最高训练成绩");//字符串会出现在提示框中
        var serie2 = chart.AddSerie(SerieType.Bar, "当天训练成绩");

        //4.改变柱状图柱体颜色（创建两个柱状图）效果如下图
        chart.series.list[0].itemStyle.color = Color.red;
        chart.series.list[1].itemStyle.color = Color.blue;

        //5.改变柱状图柱体宽度
        chart.series.list[0].barWidth = 0.2f;
        chart.series.list[1].barWidth = 0.2f;

        //6.添加数据
        for (int i = 0; i < 4; i++)
        {
            
            chart.AddXAxisData("x" + i);
            chart.AddData(0, Random.Range(10, 200));
            chart.AddData(1, Random.Range(10, 200));
        }
    }

柱状图效果图：

注：以上为个人应用记录，如有问题可提出。