asp.net核心剃刀页面的谷歌图表

<script src="https://www.gstatic.com/charts/loader.js"></script>

// 在.cshtml.cs文件中
public void OnGet()
{
    // 初始化谷歌图表库
    GoogleChartsLoader.InitGoogleCharts();

    // 创建一个柱状图对象
    var chart = new BarChart();

    // 设置图表数据
    var data = new DataTable();
    data.AddColumn("Year", DataType.String);
    data.AddColumn("Sales", DataType.Number);
    data.AddRow("2018", 100);
    data.AddRow("2019", 150);
    data.AddRow("2020", 200);
    chart.Data = data;

    // 设置图表配置选项
    var options = new BarChartOptions();
    options.Title = "Sales Report";
    chart.Options = options;

    // 将图表对象传递给视图模型
    ChartViewModel = chart;
}

<!-- 在.cshtml文件中 -->
@page
@model IndexModel

<div id="chart_div"></div>

@section Scripts {
    <script>
        // 在脚本部分使用谷歌图表库的API绘制图表
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = new google.visualization.DataTable(@Html.Raw(Model.ChartViewModel.Data.GetJson()));
            var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
            chart.draw(data, @Html.Raw(Model.ChartViewModel.Options.GetJson()));
        }
    </script>
}