使用Chart.js与Razor实现在线投票图表展示遇JSON转换问题

看起来你遇到的核心问题是Chart.js需要的labels和data是分开的数组类型，但你把整个DataPoint对象数组同时传给了这两个属性，导致Chart.js无法正确解析标签和数值，所以出现了空柱子的情况。

问题根源分析 #

你的前端代码中，labels和datasets[0].data都使用了@Html.Raw(ViewBag.DataPoints)，但这个变量序列化后是包含labels和data字段的对象数组（比如[{labels:"选项1", data:5}, {labels:"选项2", data:3}]）。而Chart.js要求：

• labels必须是字符串数组（比如["选项1", "选项2"]）
• data必须是数值数组（比如[5, 3]）

直接传入对象数组会让Chart.js无法识别，所以柱子既没有标签也没有数值。

方案一：修改控制器，拆分数据传递 #

在控制器里把标签和投票数分别提取成数组，再序列化传给前端：

// 替换原来的DataPoint列表代码
List<string> answerLabels = new List<string>();
List<double> voteCounts = new List<double>();

foreach (var resposta in poolDbContext.Answers)
{
    answerLabels.Add(resposta.Text);
    voteCounts.Add(resposta.Votes.Count()); // 注意这里你原来写的是answer，应该是resposta吧？
}

ViewBag.Labels = JsonConvert.SerializeObject(answerLabels);
ViewBag.Votes = JsonConvert.SerializeObject(voteCounts);
ViewBag.Data = question.Answers;
ViewBag.ObjectName = question.Text;

然后修改前端代码，分别使用这两个变量：

<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: @Html.Raw(ViewBag.Labels),
        datasets: [{
            label: 'Numero de respostas',
            data: @Html.Raw(ViewBag.Votes),
            borderWidth: 1,
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

方案二：前端直接处理对象数组（无需修改控制器） #

如果你不想改动后端代码，可以在前端用JavaScript从DataPoint对象数组中提取需要的标签和数值：

<script>
// 先把序列化后的对象数组转为JS对象
var dataPoints = @Html.Raw(ViewBag.DataPoints);
// 提取标签数组
var answerLabels = dataPoints.map(item => item.labels);
// 提取投票数数组
var voteCounts = dataPoints.map(item => item.data);

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: answerLabels,
        datasets: [{
            label: 'Numero de respostas',
            data: voteCounts,
            borderWidth: 1,
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

额外注意点 #

检查你的控制器代码里的变量名：answer.Votes.Count()应该是resposta.Votes.Count()吧？不然会报变量未定义的错误。

这样修改后，Chart.js就能正确识别标签和投票数值，显示正常的柱状图了。

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