將數據從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'
        }],

    },

});