ASP.NET MVC中使用Chart.js时数组仅返回单个数据点的问题

核心问题 #

图表只显示一个数据点，主要是三个原因：

1. 标签数量不匹配：你设置的labels: ['Dollars']只有1个标签，Chart.js只会把dollars数组的第一个值对应到这个标签上，剩下的76个值没有对应的标签位置，自然不会显示。
2. 数据类型错误：你用单引号把@item.startingDollars包裹起来，把数值变成了字符串，Chart.js处理数值型数据才会正常渲染，字符串可能导致解析异常。
3. JS语法错误：foreach循环生成的push语句之间没有分隔符，最终会变成dollars.push('100')dollars.push('200')这种非法代码，浏览器只会执行第一个push，后面的都报错失效。

修复后的代码 #

var dollars = [];
var labels = [];
@foreach(var item in Model.OrderBy(m => m.TimeReceived))
{
    @:dollars.push(@item.startingDollars);
    @:labels.push('@item.TimeReceived.ToString("yyyy-MM-dd HH:mm")');
}

const ctx = document.getElementById('myChart');

new Chart(ctx, {
    type: 'line',
    data: {
        labels: labels,
        datasets: [{
            label: 'Dollars',
            data: dollars,
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: false
            }
        }
    }
});

修复说明 #

• 匹配标签数量：新增labels数组，循环填充每条记录的TimeReceived（格式化后）作为标签，保证标签数量和数据数量完全一致，Chart.js就能逐个对应渲染。
• 修正数据类型：去掉@item.startingDollars的单引号，让数据保持数字类型，避免Chart.js解析错误。
• 修复语法错误：每个push语句末尾加分号，确保生成的JS代码语法正确，所有数据都能被正常添加到数组中。

内容的提问来源于stack exchange，提问作者Bean0341