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

Question

我在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 标记每个条。

但我认为因为它很长，只有交替的条被标记。

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

谢谢你的建议

Answer 1

您正在引用不存在的数据对象的属性 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>