erreur Chart.js: Bar est pas une fonction

Question

 <canvas id="chart" width="600" height="600"></canvas> 
     <script> 
      var barData = { 
      labels : [{% for item in labels %} 
          "{{item}}", 
         {% endfor %}], 
      datasets : [ 
       { 
        fillColor: "rgba(151,187,205,0.2)", 
        strokeColor: "rgba(151,187,205,1)", 
        pointColor: "rgba(151,187,205,1)", 
       data : [{% for item in values %} 
           {{item}}, 
          {% endfor %}] 
       } 
       ] 
      }; 

      var mychart = document.getElementById("chart").getContext("2d"); 

      steps = 10; 
      max = 10;  
      // draw bar chart 
      new Chart(mychart).Bar(barData, { 
       scaleOverride: true, 
       scaleSteps: steps, 
       scaleStepWidth: Math.ceil(max/steps), 
       scaleStartValue: 0, 
       scaleShowVerticalLines: true, 
       scaleShowGridLines : true, 
       barShowStroke : true, 
       scaleShowLabels: true 
      }); 
     </script> 

Il fait une erreur: (index): 61

Uncaught TypeError: (intermediate value).Bar is not a function at (index):61

J'essaie déjà chart.js, chart.min.js et Chart.bundle. js, en vain!

Answer 1

C'est parce que vous utilisez l'ancienne syntaxe (utilisée dans 1.x ChartJS) pour créer votre thème natal, et vous pourriez utiliser la dernière version (2.7.0) de la bibliothèque ChartJS.

Dans la dernière version de ChartJS, vous devez créer votre graphique comme suit:

var mychart = document.getElementById("chart").getContext("2d"); 

new Chart(mychart, { 
    type: 'bar', 
    data: { 
     labels: [{% for item in labels %} 
        "{{item}}", 
       {% endfor %}], 
     datasets: [{ 
     data: [{% for item in values %} 
        {{item}}, 
       {% endfor %}], 
     backgroundColor: 'rgba(151,187,205,0.2)', 
     borderColor: 'rgba(151,187,205,1)', 
     pointBackgroundColor: 'rgba(151,187,205,1)' 
     }] 
    }, 
    options: { 
     scales: { 
     yAxes: [{ 
      ticks: { 
       beginAtZero: true, 
       stepSize: 10 
      } 
     }] 
     } 
    } 
}); 

Référez-vous au official documentation pour en savoir plus.