Chart.js双条形图中交替条形未显示标签问题求助

看起来你遇到的问题是双条形图中第二个系列的条形没有被正确标记或渲染，这大概率是因为你只配置了一个数据集，而双条形图需要两个独立的数据集来分别展示score和score1的数据。我来帮你修正代码并解释关键要点：

修正后的完整代码 #

$(document).ready(function () {
    $.ajax({
        url: "http://studyleagueit.com/prashant/data.php",
        method: "GET",
        success: function (data) {
            console.log(data);
            var player = [];
            var score = [];
            var score1 = [];

            // 遍历数据，提取所需字段
            for (var i in data) {
                player.push(data[i].playerid + " " + data[i].des);
                score.push(data[i].score);
                score1.push(data[i].score1);
            }

            // 配置Chart.js的选项和数据
            var chartData = {
                labels: player, // x轴的类别标签
                datasets: [
                    {
                        label: 'Player Score', // 第一个系列的标签
                        backgroundColor: 'rgba(200, 200, 200, 0.75)',
                        data: score // 对应score数组
                    },
                    {
                        label: 'Player Score 1', // 第二个系列的标签（你之前缺失的部分）
                        backgroundColor: 'rgba(54, 162, 235, 0.75)', // 区分第一个系列的颜色
                        data: score1 // 对应score1数组
                    }
                ]
            };

            var ctx = $("#myChart")[0].getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: chartData,
                options: {
                    responsive: true,
                    scales: {
                        x: {
                            stacked: false, // 双条形图不需要堆叠
                            beginAtZero: true
                        },
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        },
        error: function (err) {
            console.error('获取数据失败:', err);
        }
    });
});

关键修正点说明 #

• 添加第二个数据集：你之前只定义了一个数据系列，双条形图需要在datasets数组中添加第二个对象，对应score1的数据和标签，这样第二个系列的条形才会被正确标记和渲染。
• 明确x轴类别：确保labels属性设置为player数组，这样每个条形都会对应正确的玩家标签。
• 区分数据集样式：给第二个数据集设置不同的backgroundColor，方便直观区分两个系列的条形。
• 基础容器检查：确保你的页面中有一个id为myChart的canvas元素（比如<canvas id="myChart"></canvas>），这是Chart.js渲染图表的必要容器。

额外排查建议 #

如果修正后还是有问题，可以检查：

• 确认data.php返回的数据格式是JSON数组，且每个元素都包含playerid、des、score、score1字段，可通过浏览器控制台的console.log(data)输出确认。
• 检查是否引入了正确版本的Chart.js和jQuery库，避免版本不兼容导致的渲染问题。

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