1. ホーム
  2. javascript

[解決済み] 棒グラフの各バーに異なる色を付ける;ChartJS

2022-02-10 10:43:17

質問

現在進行中のプロジェクトでChartJSを使用していますが、Bar Chartの各バーに異なる色を付ける必要があります。

棒グラフのデータセットの例です。

var barChartData = {
  labels: ["001", "002", "003", "004", "005", "006", "007"],
  datasets: [{
    label: "My First dataset",
    fillColor: "rgba(220,220,220,0.5)", 
    strokeColor: "rgba(220,220,220,0.8)", 
    highlightFill: "rgba(220,220,220,0.75)",
    highlightStroke: "rgba(220,220,220,1)",
    data: [20, 59, 80, 81, 56, 55, 40]
  }]
};

それぞれのバーを異なる色で塗る方法はありますか?

どのように解決するのですか?

Chart.Bar.js ファイルを調べた結果、解決策を見つけることができました。 この関数を使って、ランダムな色を生成しています。

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

ファイルの末尾に追加し、"fillColor:"のすぐ内側でこの関数を呼び出すようにしました。

helpers.each(dataset.data,function(dataPoint,index){
                    //Add a new point for each piece of data, passing any required data to draw.

ということで、今はこんな感じになっています。

helpers.each(dataset.data,function(dataPoint,index){
                    //Add a new point for each piece of data, passing any required data to draw.

                    datasetObject.bars.push(new this.BarClass({
                        value : dataPoint,
                        label : data.labels[index],
                        datasetLabel: dataset.label,
                        strokeColor : dataset.strokeColor,
                        fillColor : getRandomColor(),
                        highlightFill : dataset.highlightFill || dataset.fillColor,
                        highlightStroke : dataset.highlightStroke || dataset.strokeColor
                    }));
                },this);

を実行すると、各バーに異なる色が表示されます。