ASP.netCore中使用ChartJS显示图表时,图表显示但没有数据
创始人
2024-09-18 16:00:38
0
  1. 确认数据是否正确传递到前端。可以在控制器中打印出数据,并在前端使用console.log()查看。
  2. 确认数据格式是否符合ChartJS的要求。ChartJS要求数据传入为数组形式。
  3. 确认ChartJS的配置是否正确。例如,x轴和y轴的标签是否正确设置,数据点和线的样式是否正确设置。
  4. 确认是否引入了正确的ChartJS或ChartJS插件版本。可以在控制台查看是否有错误提示。 代码示例:

控制器代码(使用C#语言):

public IActionResult ChartData()
{
    // 生成随机数据
    var labels = new List { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" };
    var data = new List { 12, 19, 3, 5, 2, 3 };

    // 将数据转换为JSON格式
    var chartData = new
    {
        labels,
        datasets = new List
        {
            new
            {
                label = "Chart Data",
                data,
                backgroundColor = new List
                {
                    "rgba(255, 99, 132, 0.2)",
                    "rgba(54, 162, 235, 0.2)",
                    "rgba(255, 206, 86, 0.2)",
                    "rgba(75, 192, 192, 0.2)",
                    "rgba(153, 102, 255, 0.2)",
                    "rgba(255, 159, 64, 0.2)"
                },
                borderColor = new List
                {
                    "rgba(255, 99, 132, 1)",
                    "rgba(54, 162, 235, 1)",
                    "rgba(255, 206, 86, 1)",
                    "rgba(75, 192, 192, 1)",
                    "rgba(153, 102, 255, 1)",
                    "rgba(255, 159, 64, 1)"
                },
                borderWidth = 1
            }
        }
    };

    // 返回JSON数据
    return new JsonResult(chartData);
}

前端代码: