chart.jsを使用した円グラフの描画

Question

http://www.chartjs.org/からchart.jsを使用しています。

円グラフを描きたいが、何も表示されていない。折れ線グラフを描くことができたので、Javascriptが読み込まれました。

<!-- Chart --> 
<script type="text/javascript" src="_javascripts/chart/Chart.min.js"></script> 
<!-- //Chart--> 


    <canvas id="browsersChart" width="400" height="100"></canvas> 
    <script> 
    var ctx = document.getElementById("browsersChart"); 
    var myChart = new Chart(ctx, { 
     type: 'pie', 
     data: { 
      datasets: [{ 
       label: 'Browsers', 
       data: [14, 2, 2, 2, 1], 
       backgroundColor: [ 
        window.chartColors.red, 
        window.chartColors.orange, 
        window.chartColors.yellow, 
        window.chartColors.green, 
        window.chartColors.blue, 
       ], 
      }], 
      labels: [ 
       "Chrome" 
       "Firefox" 
       "" 
       "MSIE" 
       "Mobile Safari" 
       ] 
      }, 
      options: { 
        responsive: true 
      } 
     }; 
    </script> 

Answer 1

HTMLは、あなたのコード内のいくつかのタイプミスを持っています。

は、ラベルのセクションでは、各ラベルの後にカンマが必要です

labels: [ 
    "Chrome", // These commas at the end need added. 
    "Firefox", 
    "", 
    "MSIE", 
    "Mobile Safari" 
] 

ます。また、チャートの宣言の最後に)を追加する必要があります。

options: { 
     responsive: true 
    } 
}); // The rounded bracket here needs added 

将来的にはブラウザで開発ツールを使用する必要があります。 [コンソール]タブには、これらのようなエラーが表示されます。どのラインにエラーがあるのか​​を正確に説明しました。

これらのタイプミスを修正した後、私は予想どおりの円グラフを得ました。