chart.js

Question

var myChart = new Chart(ctx, { 
type: 'horizontalBar', 
data: { 
    labels:cmpny_timing, 
    datasets: [{ 
     label: 'Hourly Attendance', 
     data: d, 
     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 
    }] 
}, 

を使用すると、私は私のデータI内のデータに基づいて背景色を作りたい....データに基づいて各バーの色を変更することができますとにかくあり長さの配列を持っている15ので、私は、あなたがあなた自身のbackgroundColor & borderColorプロパティを作成することができますChart.js pluginsを使用chart.js

Answer 1

の背景色プロパティをハードコーディングするのではなく、動的に15色のバーを作成し、それらを割り当てることができますとにかくありチャート：

var randomColorPlugin = { 

    // We affect the `beforeUpdate` event 
    beforeUpdate: function(chart) { 
     var backgroundColor = []; 
     var borderColor = []; 

     // For every data we have ... 
     for (var i = 0; i < chart.config.data.datasets[0].data.length; i++) { 

      // We generate a random color 
      var color = "rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ","; 

      // We push this new color to both background and border color arrays 
      // .. a lighter color is used for the background 
      backgroundColor.push(color + "0.2)"); 
      borderColor.push(color + "1)"); 
     } 

     // We update the chart bars color properties 
     chart.config.data.datasets[0].backgroundColor = backgroundColor; 
     chart.config.data.datasets[0].borderColor = borderColor; 
    } 
}; 

---

実例 on this jsFiddleを見ることができます。コードを実行するたびに、さまざまな色が表示されます。ここで
は、結果のいずれかです。すべての