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>

出错:(索引）：61

未捕获的TypeError :(中间值）.Bar不是函数在（指数）：61

我已经尝试了chart.js，chart.min.js和Chart.bundle.js，徒劳无功！

Answer 1

这是因为您使用旧语法（在ChartJS 1.x中使用）来创建图表，并且您可能正在使用最新版本（2.7.0） ChartJS库。

在最新版本的ChartJS中，您应该按如下方式创建图表：

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
            }
         }]
      }
   }
});

请参阅official documentation了解详情。

Chart.js错误：Bar不是函数

1 个答案: