javascript - 无法在 Chart.js 上显示数据

Question

我正在尝试使用chart.js 创建一个非常简单的图表。但我不明白为什么它不起作用。这是我到目前为止所尝试的。我用的是2.4版本。谢谢

fiddle :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  
 };