如何更改chartjs中圖例的顏色並能夠添加更多圖例？

Question

我想改變圖例的顏色，因爲我想用不同的顏色來表示不同的情況。但是現在圖例只使用我在條形圖上設置的第一種顏色。

我也想問一下，它能夠設置一個更多的傳說嗎？像粉紅色是情境A，藍色是B？

Here is the link: 

Code is here 誰能幫助？謝謝你這麼多。

Answer 1

要設置更多的圖例，您需要添加多個數據集。每個數據集將代表一個圖例，並且圖例的顏色將根據數據集的背景顏色自動設置。

Chart.plugins.register({ 
 
    beforeDraw: function(c) { 
 
     var legends = c.legend.legendItems; 
 
     legends.forEach(function(e) { 
 
     e.fillStyle = '#07C'; 
 
     }); 
 
    } 
 
}); 
 

 
var canvas = document.getElementById('myChart'); 
 

 
var data = { 
 
    labels: ["January", "February", "March", "April", "May", "June"], 
 
    datasets: [{ 
 
     label: "My First dataset", 
 
     backgroundColor: "rgba(255,99,132,0.4)", 
 
     hoverBorderColor: "rgba(255,99,132,1)", 
 
     data: [65, 59, 20, 81, 56, 55], 
 
    }, { 
 
     label: "My Second dataset", 
 
     backgroundColor: "rgba(25,25,255,0.4)", 
 
     hoverBorderColor: "rgba(255,99,132,1)", 
 
     data: [65, 59, 20, 81, 56, 55], 
 
    }] 
 
}; 
 

 
var option = { 
 
    scales: { 
 
     xAxes: [{ 
 
     stacked: true 
 
     }], 
 
     yAxes: [{ 
 
     stacked: true, 
 
     gridLines: { 
 
      display: true, 
 
      color: "rgba(255,99,132,0.2)" 
 
     } 
 
     }] 
 
    } 
 
}; 
 

 
var myBarChart = Chart.Bar(canvas, { 
 
    data: data, 
 
    options: option 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<canvas id="myChart" width="400" height="200"></canvas>