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

あなたは一つの大きなオブジェクトとしてのデータを渡すために予定している場合、あなたは巣 "データ" に必要もう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 
};