Question

我使用Chart.js lib制作图表。

我有一个json数组，我从数据库中获取。

以下是它的控制台日志：Data

我需要获取列表中每个元素的地址，速度和速度限制，并在图表中使用它。

我目前的代码如下：

function ShowChart() {
   var popCanvas = document.getElementById("speedLimitsChart");
   console.dir(speeddata);

   var labels = speeddata.map(function (e) {
       return e.Adress;
   });
   var speed = speeddata.map(function (e) {
       return e.Speed;
   });

   var speedlimits = speeddata.map(function (e) {
       return e.SpeedLimits;
   });

   console.dir(labels);
    var barChart = new Chart(popCanvas, {
        type: 'bar',

        data: {
            datasets: [{
                label: 'Speed',
                data: speed,
                backgroundColor: '#1E90FF'
            }, {
                label: 'Speed Limits',
                data: speedlimits,
                backgroundColor: '#B22222',
                type: 'line'
            }],

        },
        labels: labels 
    });
}

但是在结果中我只有我的图表中的第一个元素，并且没有标签。

以下是输出屏幕：Chart

我检查了speed，speedlimits和labels，所有这些都有2个元素。你能告诉我问题在哪里吗？

Answer 1

我发现我的问题在哪里

我需要在数据中写标签

喜欢这个

var barChart = new Chart(popCanvas, {
    type: 'bar',

    data: {
        labels: labels ,
        datasets: [{
            label: 'Speed',
            data: speed,
            backgroundColor: '#1E90FF'
        }, {
            label: 'Speed Limits',
            data: speedlimits,
            backgroundColor: '#B22222',
            type: 'line'
        }],

    },

});

将数据从json推送到Chart.js标签和数据

1 个答案: