如何在mvc剃刀中使用viewbag实现chart js

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

public ActionResult Chart()
{
    // 生成图表数据
    var chartData = new
    {
        labels = new[] { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" },
        datasets = new[]
        {
            new
            {
                label = "My Dataset",
                data = new[] { 12, 19, 3, 5, 2, 3 },
                backgroundColor = "rgba(255, 99, 132, 0.2)",
                borderColor = "rgba(255, 99, 132, 1)",
                borderWidth = 1
            }
        }
    };

    // 将图表数据存储在ViewBag中
    ViewBag.ChartData = chartData;

    return View();
}

<div>
    <canvas id="myChart"></canvas>
</div>

<script>
    // 获取图表数据
    var chartData = @Html.Raw(Json.Encode(ViewBag.ChartData));

    // 创建图表
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: chartData,
        options: {
            // 图表配置选项
        }
    });
</script>