javascript - chart.js中条形图中的交替条没有标记

我做了一个双柱形图chart.js，代码如下：

$(document).ready(function () {
    $.ajax({
        url : "http://studyleagueit.com/prashant/data.php",
        method : "GET",
        success : function (data) {
            console.log(data);
            var player = [];
            var des = [];
            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);

            }

            var densitydata = {
                label : 'Player Score',
                backgroundColor : 'rgba(200, 200, 200, 0.75)',
                borderColor : 'rgba(200, 200, 200, 0.75)',
                hoverBackgroundColor : 'rgba(200, 200, 200, 1)',
                hoverBorderColor : 'rgba(200, 200, 200, 1)',
                data : score
            }

            var gravitydata = {
                label : 'Player Score',
                backgroundColor : 'rgba(200, 200, 200, 0.75)',
                borderColor : 'rgba(200, 200, 200, 0.75)',
                hoverBackgroundColor : 'rgba(200, 200, 200, 1)',
                hoverBorderColor : 'rgba(200, 200, 200, 1)',
                data : score1
            }

            var chartdata = {
                labels : player,
                datasets : [densitydata, gravitydata]
            };

            var ctx = $("#mycanvas");

            var barGraph = new Chart(ctx, {
                    type : 'bar',
                    data : chartdata
                });
        },
        error : function (data) {
            console.log(data);
        }
    });
});

我用data[i].playerid+" "+data[i].des标记每个条。

但是我认为，因为很长一段时间，只有交替条才被贴上标签。

有什么方法可以正确标记所有图形吗？

谢谢您的建议

最佳答案

您引用的数据对象的属性des不存在，并将其与字符串连接。因此，如果删除+ data[i].des，则标签应恢复正常。您的代码中还有其他小问题，例如var des = [];从未使用过。

我简化了您的代码，并直接添加了通过ajax获取的数据：

data = [{
  "playerid": "Thane ",
  "score": "10",
  "score1": "15"
}, {
  "playerid": "Dombivli ",
  "score": "20",
  "score1": "25"
}, {
  "playerid": "Byculla",
  "score": "25",
  "score1": "5"
}, {
  "playerid": "CST",
  "score": "20",
  "score1": "2"
}, {
  "playerid": "mumbai cen",
  "score": "25",
  "score1": "4"
}]
var player = [], score = [], score1 = [];

for (var i in data) {
  player.push(data[i].playerid); // data[i].des doesn't exist
  score.push(data[i].score);
  score1.push(data[i].score1);
}

var densitydata = {
  label: 'Player Score',
  backgroundColor: 'rgba(200, 200, 200, 0.75)',
  borderColor: 'rgba(200, 200, 200, 0.75)',
  hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
  hoverBorderColor: 'rgba(200, 200, 200, 1)',
  data: score
}

var gravitydata = {
  label: 'Player Score',
  backgroundColor: 'rgba(230, 230, 230, 0.75)',
  borderColor: 'rgba(200, 200, 200, 0.75)',
  hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
  hoverBorderColor: 'rgba(200, 200, 200, 1)',
  data: score1
}

var chartdata = {
  labels: player,
  datasets: [densitydata, gravitydata]
};

var ctx = $("#mycanvas");
var barGraph = new Chart(ctx, {
  type: 'bar',
  data: chartdata
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="mycanvas" width="100" height="100"></canvas>

关于javascript - chart.js中条形图中的交替条没有标记，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49504697/