ChartJSを使用して個々のバーの背景色を設定しますか？

Question

私はChart.JSの例の後に棒グラフをモデル化しようとしていますが、運が上手くいかなかったのです。これは私が再作成するために抱き合わせてるものです：

http://www.chartjs.org/docs/#bar-chart-introduction

何らかの理由で、グラフ上の私のバーのは、単に濃い灰色を出てきます。私はこれを解決することができませんでした。私のコードは以下の通りです。誰もがこの問題を解決するために私のコードを変更する方法を知っていますか？

ありがとうございます！

  // bar chart data 
      var barData = { 
       labels : ["Counselor","Examiner","Rock","Seeker","Uniter"], 

       backgroundColor: [ 
       'rgba(255, 99, 132, 0.2)', 
       'rgba(54, 162, 235, 0.2)', 
       'rgba(255, 206, 86, 0.2)', 
       'rgba(75, 192, 192, 0.2)', 
       'rgba(153, 102, 255, 0.2)', 

      ], 
      borderColor: [ 
       'rgba(255,99,132,1)', 
       'rgba(54, 162, 235, 1)', 
       'rgba(255, 206, 86, 1)', 
       'rgba(75, 192, 192, 1)', 
       'rgba(153, 102, 255, 1)', 

      ], 
      borderWidth: 1, 


       datasets : [ 
        { 
         // fillColor : "#48A497", 
         // strokeColor : "#48A4D1", 
         data : [100, 200, 300, 400, 500, ] 
        } 
       ] 
      } 
      // get bar chart canvas 
      var income = document.getElementById("income").getContext("2d"); 
      // draw bar chart 
      new Chart(income).Bar(barData); 

Answer 1

私は問題は色が私は公式ドキュメントリンクで読んだことに応じて、データセットの一部であるべきということだと思う、これを試してみてください。

var barData = { 
       labels : ["Counselor","Examiner","Rock","Seeker","Uniter"], 
       datasets : [{ 
         // fillColor : "#48A497", 
         // strokeColor : "#48A4D1", 
         data : [100, 200, 300, 400, 500], 
         backgroundColor: [ 
          'rgba(255, 99, 132, 0.2)', 
          'rgba(54, 162, 235, 0.2)', 
          'rgba(255, 206, 86, 0.2)', 
          'rgba(75, 192, 192, 0.2)', 
          'rgba(153, 102, 255, 0.2)', 
          ], 
         borderColor: [ 
          'rgba(255,99,132,1)', 
          'rgba(54, 162, 235, 1)', 
          'rgba(255, 206, 86, 1)', 
          'rgba(75, 192, 192, 1)', 
          'rgba(153, 102, 255, 1)', 
          ], 
         borderWidth: 1 
       }] 
      } 

フィドル例が追加さ： https://jsfiddle.net/hdr4uuLy/

Answer 2

誰かがこれを使用している場合、追加情報のビット...あなたの頭のタグにあることを確認してください。 Charts.JS CDNだけを使用していましたが、これにはバンドルが必要です：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>