c# - Chart.JS 标签字符串不能接受 ViewBag 数据

Question

我正在 ASP.NET Core MVC 中开发一个简单的应用程序，我正在应用 Chart.js 来呈现图形图表。
问题出现在 x 轴的标签上。当我像这样用 JavaScript 手动编写时，一切都完成了:

labels: ['January', 'February', 'March'],

但是当我像这样调用@ ViewBag.Exponate 时它不会显示:

@Html.Raw(ViewBag.Exponate)

Controller 代码如下:

 var recordList = _db.OrderHeader.Where(u=>u.UserId==sain.Value && u.ShopId==Convert.ToInt32(_LoadSessions)).GroupBy(x => x.OrderDate.ToString("MMMM"))
                .Select(x => x.FirstOrDefault())
                .ToList();
            List<string> monthlists = recordList.Select(x => x.OrderDate.ToString("MMMM")).ToList();
                ViewBag.Exponate = string.Join(",", monthlists);

            var summation = _db.OrderHeader.Where(u => u.UserId == sain.Value && u.ShopId == Convert.ToInt32(_LoadSessions)).GroupBy(x => x.OrderDate)
                .Select(x => new
                {
                    countIf = x.Sum(y => y.OrderTotal)
                }).ToList();

            List<string> values = summation.Select(x => x.countIf.ToString()).ToList();
            ViewBag.valuesX= string.Join(",", values);

这是 View :

<script src="~/Charts/Chart.bundle.js"></script>
<script src="~/Charts/utils.js"></script>

<style>

    canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
</style>

<div style="width:100%; color:white">
    <canvas id="canvas" style="background-color:#e8e2e2"></canvas>
</div>
<br>
<br>

<script>
        var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
        var config = {
            type: 'bar',
            data: {
                labels: [@Html.Raw(ViewBag.Exponate)],
                datasets: [{
                    label: 'My First dataset',
                    backgroundColor: window.chartColors.red,
                    borderColor: window.chartColors.red,
                    data: [
                      @ViewBag.valuesX
                    ],
                    fill: false,
                }, {
                    label: 'My Second dataset',
                    fill: false,
                    backgroundColor: window.chartColors.blue,
                    borderColor: window.chartColors.blue,
                    data: [
                        @ViewBag.valuesX 
                    ],
                }]
            },
            options: {
                responsive: true,
                title: {
                    display: true,
                    text: 'Chart.js Line Chart'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Month'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Value'
                        }
                    }]
                }
            }
        };

        window.onload = function () {
            var ctx = document.getElementById('canvas').getContext('2d');
            window.myLine = new Chart(ctx, config);
        };


</script>

那么问题来了:

labels: [@Html.Raw(ViewBag.Exponate)],

如果我这样输入:

labels: ['January', 'February', 'March'],

有效。

但我不想这样。我希望从我的 Controller 列表对象中加载标签，如下所示:

labels: [@Html.Raw(ViewBag.Exponate)],

我怎样才能做到这一点？

Answer 1

您的序列化没有生成有效的 JavaScript 数组。相反，它产生这样的输出:

<script type="text/javascript">
    let data = {
        labels : January,February,March
    };
</script>

你想要的是一个 JavaScript 字符串数组:

<script type="text/javascript">
    let data = {
        labels : ["January","February","March"]
    };
</script>

解决方案:使用 Newtonsoft.Json 进行序列化。例如。

public IActionResult Index()
{
    var monthlists = new List<string> { "January", "February", "March" };

    // ViewBag.Exponate = string.Join(",", monthlists);

    ViewBag.Exponate = 
        Newtonsoft.Json.JsonConvert.SerializeObject(monthlists);

    return View();
}

当您这样做时，以下内容将生成有效的 JavaScript 数组。

<script type="text/javascript">
    let data = {
        labels : @Html.Raw(ViewBag.Exponate)
    };
</script>