無法在Chart.js上顯示數據

Question

我正在嘗試使用chart.js創建一個非常簡單的圖表。但我不明白爲什麼它不起作用。這是我到目前爲止所嘗試的。我正在使用2.4版本。由於

小提琴：https://jsfiddle.net/8zb4nr44/

的Html

<div id="wasted-budget-chart"> 
    <canvas width="500" height="150" id="wasted-budget-chart-canvas"/> 
</div> 

JS：

var options = { 
     responsive: true, 
     maintainAspectRatio: false, 
     datasetStrokeWidth : 3, 
     pointDotStrokeWidth : 4, 
     tooltipFillColor: "rgba(0,0,0,0.8)", 
     tooltipFontStyle: "bold", 


    }; 

    var ctx = document.getElementById('wasted-budget-chart-canvas').getContext("2d"); 
    var gradient = ctx.createLinearGradient(0, 0, 0, 400); 
    gradient.addColorStop(0, 'rgba(151,187,205,0.7)'); 
    gradient.addColorStop(1, 'rgba(151,187,205,0)'); 
    var data = { 
     type:'line', 
     labels : ["02:00","04:00","06:00","08:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","00:00"], 
     datasets: [ 
     { 
      fillColor : gradient, // Put the gradient here as a fill color 
      strokeColor : "#ff6c23", 
      pointColor : "#fff", 
      pointStrokeColor : "#ff6c23", 
      pointHighlightFill: "#fff", 
      pointHighlightStroke: "#ff6c23", 
      data : [25.0,32.4,22.2,39.4,34.2,22.0,23.2,24.1,20.0,18.4,19.1,17.4] 
     }] 
     , 
     options: options 
    }; 



    new Chart(ctx,data); 

Answer 1

如果你要傳遞的數據作爲一個大的目標，你需要鳥巢 「數據」在裏面多一次，像這樣：

var data = { 
    type:'line', 
    data: {  // add this here, and its closing brace of course 
     labels : ["02:00","04:00","06:00","08:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","00:00"], 
     datasets: [ 
     { 
      fillColor : gradient, // Put the gradient here as a fill color 
      strokeColor : "#ff6c23", 
      pointColor : "#fff", 
      pointStrokeColor : "#ff6c23", 
      pointHighlightFill: "#fff", 
      pointHighlightStroke: "#ff6c23", 
      data : [25.0,32.4,22.2,39.4,34.2,22.0,23.2,24.1,20.0,18.4,19.1,17.4] 
     }] 
    }, 
    options: options 
};