Question

我制作了一张双条图表.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。

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

＆＃13;

var des = [];

＆＃13;

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
});

＆＃13;

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

1 个答案: