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

Question

我正在使用Chart.js库制作图表。

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

这是它的控制台日志： 数据

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

我当前的代码如下：

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

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

这是输出屏幕： 图表

我检查了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'
        }],

    },

});