棒グラフの棒ごとに異なる色。ChartJS

90

作業中のプロジェクトでChartJSを使用していますが、棒グラフの棒ごとに異なる色が必要です。

棒グラフのデータセットの例を次に示します。

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]
  }]
};

各バーを異なる方法でペイントする方法はありますか？

javascript  chart.js 
— BoooYaKa
ソース
3
スクロールを節約するために、この回答ではfillColor、データセットのを配列に設定できると述べています。chart.jsは配列を反復処理して、描画される各バーの次の色を選択します。
— ハートリーブロディ

回答:

69

v2以降、backgroundColorプロパティを使用して、各バーの色に対応する値の配列を指定するだけです。

datasets: [{
  label: "My First dataset",
  data: [20, 59, 80, 81, 56, 55, 40],
  backgroundColor: ["red", "blue", "green", "blue", "red", "blue"], 
}],

これは、も可能ですborderColor、hoverBackgroundColor、hoverBorderColor。

棒グラフのデータセットプロパティに関するドキュメントから：

一部のプロパティは配列として指定できます。これらが配列値に設定されている場合、最初の値は最初のバーに適用され、2番目の値は2番目のバーに適用されます。

— ありがとう
ソース
66

解決策：updateメソッドを呼び出して新しい値を設定します：

var barChartData = {
    labels: ["January", "February", "March"],
    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]
        }
    ]
};

window.onload = function(){
    var ctx = document.getElementById("mycanvas").getContext("2d");
    window.myObjBar = new Chart(ctx).Bar(barChartData, {
          responsive : true
    });

    //nuevos colores
    myObjBar.datasets[0].bars[0].fillColor = "green"; //bar 1
    myObjBar.datasets[0].bars[1].fillColor = "orange"; //bar 2
    myObjBar.datasets[0].bars[2].fillColor = "red"; //bar 3
    myObjBar.update();
}
— ジェリー
ソース
1
myObjBarはwindow.onloadで定義されているため、このコードは現在の形式では機能しませんが、メインスクリプトフローで使用されるため、色を変更しようとするときにはmyObjBarは定義されません。ただし、下部の色変更コードを棒グラフが生成される場所と同じスコープに移動しました。これは完全に機能します。簡単に動作するようにchart.jsを変更する必要は本当になかったので、この方法には非常に満足しています。編集：修正を適用するために回答に編集を送信しました。承認されるまで待つ必要があります。
— Joshua Walsh
残念ながら、これはFirefox、IE 10または11では機能しないようです。JSFiddleは次のとおりです：jsfiddle.net/3fefqLko/1。ブラウザ間で機能させる方法について何か考えはありますか？
— サム・フェン
訂正：それはブラウザ間で機能します。fillColor = "#FFFFFF;"Chromeでできることだけですが、最後のセミコロンは存在しないはずであり、FFとIEはそれを受け入れません。
— サム・フェン
5
更新：「。_saved.fillColor」と「.fillColor」を割り当てる必要があります-マウスオーバー（ハイライト）後に復元するために_saved値を使用します-たとえば、新しい色を割り当てない場合は元の色を復元しますそれに
4
更新：これは最新バージョン（2.0以降）では機能しませんが、1.0.2では機能します
— Madan Bhandari 2016年
51

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);

そしてそれは私が各バーのために異なる色を得るように働きます。

— BoooYaKa
ソース
1
完全なソリューションを投稿できますか（データやデータセット変数などを使用）？私は似たようなことをしたいと思っていますが、あなたの解決策を再現できないようです。ありがとう
— caseklim 2014
ちょっと@casey、これは完全なChart.Bar.jsファイル（置き換える必要があるファイル）です。pastebin.com/G2Rf0BBn、違いを生む線を強調しました。下部には、インデックス「i」に従って配列から異なる色を返す関数があることに注意してください。データセットは同じままです（質問のデータセットのように）。お役に立てば幸いです。
— BoooYaKa 2014
それは間違いなく役立ちます、ありがとう！自分のコードではなく、実際のChart.jsファイルを変更していることに気づきませんでした。
— caseklim 2014
これは優れたソリューションであり、ChartJSに固有のものではありません。
— crooksey
24

Chart.js上に構築されたライブラリ「ChartNew」を見ると、次のように値を配列として渡すことでこれを行うことができます。

var data = {
    labels: ["Batman", "Iron Man", "Captain America", "Robin"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: ["rgba(220,220,220,0.5)", "navy", "red", "orange"],
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [2000, 1500, 1750, 50]
        }
    ]
};
— Muhammad Mohsin Muneer
ソース
あなたの簡単な解決策は私のために働きました、ありがとうそしてchartNew.jsは私のために完全にうまく働きます
— Pratswinz 2015年
chartnew jsでingraphdatashowの色を変更するにはどうすればよいですか？
— Pratswinz 2015年
— Muhammad Mohsin Muneer 2016年
どうもありがとう！fillColorが配列を受け入れることを知りませんでした。
— フランシスコキンテロ2016年
18

バーごとにランダムな色を生成するこの関数を呼び出すことができます 

var randomColorGenerator = function () { 
    return '#' + (Math.random().toString(16) + '0000000').slice(2, 8); 
};

var barChartData = {
        labels: ["001", "002", "003", "004", "005", "006", "007"],
        datasets: [
            {
                label: "My First dataset",
                fillColor: randomColorGenerator(), 
                strokeColor: randomColorGenerator(), 
                highlightFill: randomColorGenerator(),
                highlightStroke: randomColorGenerator(),
                data: [20, 59, 80, 81, 56, 55, 40]
            }
        ]
    };
— スダーシャン
ソース
2
ちょっと@Sudharshan答えてくれてありがとう、これは各チャートで異なる色になりますが、棒グラフ内の各単一のバーではありません。これは私の望ましい結果です。何かアイデアがありますか？
— BoooYaKa 2014
1
このコードをありがとう。バー自体の色を変えることができました。backgroundColorオプションはこれを可能にします。
— spyke01 2016年
バージョン2.8では、関数backgroundColor: randomColorGenerator,の結果ではなく、関数を使用してbackgroundColorを設定できますbackgroundColor: randomColorGenerator(),。関数は、すべてに対して1回ではなく、アイテムごとに呼び出されます。
— ネガス
13

2019年8月の時点で、Chart.jsにはこの機能が組み込まれています。

さまざまな色の棒で成功した棒グラフ

あなたは単にbackgroundColorに配列を提供する必要があります。

https://www.chartjs.org/docs/latest/getting-started/からの例

前：

  data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },

後：

  data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: ['rgb(255, 99, 132)','rgb(0, 255, 0)','rgb(255, 99, 132)','rgb(128, 255, 0)','rgb(0, 255, 255)','rgb(255, 255, 0)','rgb(255, 255, 128)'],
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },

この方法をテストしたところ、機能しました。各バーの色は異なります。

— レゴブロック
ソース
12

ここでは、2つの関数を作成することでこの問題を解決しました。

1.ランダムな色を生成するdynamicColors（）

function dynamicColors() {
    var r = Math.floor(Math.random() * 255);
    var g = Math.floor(Math.random() * 255);
    var b = Math.floor(Math.random() * 255);
    return "rgba(" + r + "," + g + "," + b + ", 0.5)";
}

2.色の配列を作成するためのpoolColors（）

function poolColors(a) {
    var pool = [];
    for(i = 0; i < a; i++) {
        pool.push(dynamicColors());
    }
    return pool;
}

次に、それを渡すだけです 

datasets: [{
    data: arrData,
    backgroundColor: poolColors(arrData.length),
    borderColor: poolColors(arrData.length),
    borderWidth: 1
}]
— アブドゥルハメド
ソース
10

ランダムな色を生成します。

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

レコードごとに呼び出します。

function getRandomColorEachEmployee(count) {
    var data =[];
    for (var i = 0; i < count; i++) {
        data.push(getRandomColor());
    }
    return data;
}

最後に色を設定します。

var data = {
    labels: jsonData.employees, // your labels
    datasets: [{
        data: jsonData.approvedRatios, // your data
        backgroundColor: getRandomColorEachEmployee(jsonData.employees.length)
    }]
};
— マルティンシュナイダー
ソース
4

カラーハッシュを使用して一貫したランダムカラーを生成する方法は次のとおりです

const colorHash = new ColorHash()

const datasets = [{
  label: 'Balance',
  data: _.values(balances),
  backgroundColor: _.keys(balances).map(name => colorHash.hex(name))
}]

ここに画像の説明を入力してください

— TeNNoX
ソース
3

これが私が対処した方法です：データの数と同じ数のエントリを持つ配列「colors」をプッシュしました。このために、スクリプトの最後に関数「getRandomColor」を追加しました。それが役に立てば幸い...

for (var i in arr) {
    customers.push(arr[i].customer);
    nb_cases.push(arr[i].nb_cases);
    colors.push(getRandomColor());
}

window.onload = function() {
    var config = {
        type: 'pie',
        data: {
            labels: customers,
            datasets: [{
                label: "Nomber of cases by customers",
                data: nb_cases,
                fill: true,
                backgroundColor: colors 
            }]
        },
        options: {
            responsive: true,
            title: {
                display: true,
                text: "Cases by customers"
            },
        }
    };

    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx, config);
};

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
— Jean-FrançoisRullier
ソース
2

NewChart.jsを使用できない場合は、代わりに配列を使用して色を設定する方法を変更する必要があります。Chart.js内でヘルパーの反復を見つけます。

この行を置き換えます：

fillColor : dataset.fillColor,

これについて：

fillColor : dataset.fillColor[index],

結果のコード：

//Iterate through each of the datasets, and build this into a property of the chart
  helpers.each(data.datasets,function(dataset,datasetIndex){

    var datasetObject = {
      label : dataset.label || null,
      fillColor : dataset.fillColor,
      strokeColor : dataset.strokeColor,
      bars : []
    };

    this.datasets.push(datasetObject);

    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,
        //Replace this -> fillColor : dataset.fillColor,
        // Whith the following:
        fillColor : dataset.fillColor[index],
        highlightFill : dataset.highlightFill || dataset.fillColor,
        highlightStroke : dataset.highlightStroke || dataset.strokeColor
      }));
    },this);

  },this);

そしてあなたのjsで：

datasets: [
                {
                  label: "My First dataset",
                  fillColor: ["rgba(205,64,64,0.5)", "rgba(220,220,220,0.5)", "rgba(24,178,235,0.5)", "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: [2000, 1500, 1750, 50]
                }
              ]
— アルマンドレイナ
ソース
棒グラフコードのカスタムサブクラスを作成し、これを行うためにイニシャライザーに同様のコードを追加しました。
— デビッドレイノルズ
1

これを試して ：

  function getChartJs() {
        **var dynamicColors = function () {
            var r = Math.floor(Math.random() * 255);
            var g = Math.floor(Math.random() * 255);
            var b = Math.floor(Math.random() * 255);
            return "rgb(" + r + "," + g + "," + b + ")";
        }**

        $.ajax({
            type: "POST",
            url: "ADMIN_DEFAULT.aspx/GetChartByJenisKerusakan",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var labels = r.d[0];
                var series1 = r.d[1];
                var data = {
                    labels: r.d[0],
                    datasets: [
                        {
                            label: "My First dataset",
                            data: series1,
                            strokeColor: "#77a8a8",
                            pointColor: "#eca1a6"
                        }
                    ]
                };

                var ctx = $("#bar_chart").get(0).getContext('2d');
                ctx.canvas.height = 300;
                ctx.canvas.width = 500;
                var lineChart = new Chart(ctx).Bar(data, {
                    bezierCurve: false,
                    title:
                      {
                          display: true,
                          text: "ProductWise Sales Count"
                      },
                    responsive: true,
                    maintainAspectRatio: true
                });

                $.each(r.d, function (key, value) {
                    **lineChart.datasets[0].bars[key].fillColor = dynamicColors();
                    lineChart.datasets[0].bars[key].fillColor = dynamicColors();**
                    lineChart.update();
                });
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });
    }
— ファニーカウナン
ソース
1

これは現在のバージョンで私のために働きます2.7.1：

function colorizePercentageChart(myObjBar) {

var bars = myObjBar.data.datasets[0].data;
console.log(myObjBar.data.datasets[0]);
for (i = 0; i < bars.length; i++) {

    var color = "green";

    if(parseFloat(bars[i])  < 95){
        color = "yellow";
    }
    if(parseFloat(bars[i])  < 50){
         color = "red";
    }

    console.log(color);
    myObjBar.data.datasets[0].backgroundColor[i] = color;

}
myObjBar.update();

}

— ダミアン
ソース
1

他の答えをとると、各バーのランダムな色のリストを取得したい場合の簡単な修正は次のとおりです。

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

これで、データのbackgroundColorフィールドでこの関数を使用できます。

data: {
        labels: count[0],
        datasets: [{
            label: 'Registros en BDs',
            data: count[1],
            backgroundColor: getRandomColor(count[1].length)
        }]
}
— エドゥアルドルイスサントス
ソース
1
この答えには作業が必要です。それは私にとって問題につながります。私はそれをとして書き直さなければなりませんでしたfunction getRandomColor(n) { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; }。
— セドリック
0

私は最近この問題を抱えています、そしてここに私の解決策があります

var labels = ["001", "002", "003", "004", "005", "006", "007"];
var data = [20, 59, 80, 81, 56, 55, 40];
for (var i = 0, len = labels.length; i < len; i++) {
   background_colors.push(getRandomColor());// I use @Benjamin method here
}

var barChartData = {
  labels: labels,
  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)",
    backgroundColor: background_colors,
    data: data
  }]
};
— フェイユ・チェン
ソース
0

次のプルリクエストに基づくコード：

datapoint.color = 'hsl(' + (360 * index / data.length) + ', 100%, 50%)';
— ヴォオ
ソース
非常に便利なアイデア-ランダムな色を選択するだけではありません。これをさらに改善するために、バーの数が多い場合は、彩度の値も調整できるため、カラーホイールを一周するだけでなく、スパイラルインすることができます。
— マーティン
0

必要な色がわかっている場合は、次のように配列で色のプロパティを指定できます。

    backgroundColor: [
    'rgba(75, 192, 192, 1)',
    ...
    ],
    borderColor: [
    'rgba(75, 192, 192, 1)',
    ...
    ],
— frostbyyte
ソース
0

私がやったことは、ここで多くの人が示唆しているように、ランダムカラージェネレータを作成することです

function dynamicColors() {
        var r = Math.floor(Math.random() * 255);
        var g = Math.floor(Math.random() * 255);
        var b = Math.floor(Math.random() * 255);
        return "rgba(" + r + "," + g + "," + b + ", 0.5)";
    }

そしてこれをコーディングしました

var chartContext = document.getElementById('line-chart');
    let lineChart = new Chart(chartContext, {
        type: 'bar',
        data : {
            labels: <?php echo json_encode($names); ?>,
            datasets: [{
                data : <?php echo json_encode($salaries); ?>,
                borderWidth: 1,
                backgroundColor: dynamicColors,
            }]
        }
        ,
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            },
            responsive: true,
            maintainAspectRatio: false,
        }
    });

関数呼び出しには括弧がないことに注意してください。これにより、コードは配列を作成する代わりに毎回関数を呼び出すことができます。これにより、コードがすべてのバーに同じ色を使用することも防止されます。

— カピル
ソース
-8

ライブギャップチャートで 簡単に生成でき
ますバーメニューからマルチカラーを選択します


（ソース：livegap.com）

**使用されるチャートライブラリはchartnew.js
ですchartnew.jsコードを含むchart.jsライブラリの修正バージョンは次の ようになります

var barChartData = {
        labels: ["001", "002", "003", "004", "005", "006", "007"],
        datasets: [
            {
                label: "My First dataset",
                fillColor: ["rgba(0,10,220,0.5)","rgba(220,0,10,0.5)","rgba(220,0,0,0.5)","rgba(120,250,120,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]
            }
        ]
    };
— オマールセドキ
ソース
3
「ライブラリを捨てて、この他のライブラリを使用する」とコメントすると、質問のポイントが完全に失われます。
— jlh 2017年
chartnew.jsは、chart.jsの修正バージョンです。今回は、マルチカラーはchart.jsではサポートされていませんでしたが、chartnew.jsで利用できました
— Omar
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.