☰

chart.js で円グラフにカラー ファミリを設定する方法 質問する

tag-icon • tag-icon charts chart.js
chart.js で円グラフにカラー ファミリを設定する方法 質問する

Chart.js を使用して円グラフを描画しようとしています。値はデータベースから取得されるため、データベースにいくつの値があるかわかりません。ここでは、各値に一意の色を設定したいと考えています。以下は私の例です。

var pieData = [
    {
        value: 20,
        color:"#878BB6"
    },
    {
        value : 40,
        color : "#4ACAB4"
    },
    {
        value : 10,
        color : "#FF8153"
    },
    {
        value : 30,
        color : "#FFEA88"
    }
];

var pieOptions = {
    segmentShowStroke : false,
    animateScale : true
}

var countries= document.getElementById("countries").getContext("2d");
        new Chart(countries).Pie(pieData, pieOptions);

現在、上記の例ではハードコードされた値を設定していますが、私の例ではデータ (Json) は DB から取得されています。

ベストアンサー1

15 種類の異なる色を含むシンプルなカラー ファミリーを作成しました。
これらの色はランダムに選択されたものではありません。近い色間の違いが最大になるように色が選択されています。

15 個未満のデータ ポイントでグラフを作成することもできます。警告は生成されません。

コードは次のとおりです:

ctx = document.getElementById('myChart').getContext('2d');
chart = new Chart(ctx, {
    type: 'pie',
    data: {
        datasets: [{
            label: 'Colors',
            data: [9, 8, 7, 6, 5, 4, 3, 2, 1],
            backgroundColor: ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"]
        }],
        labels: ['a','b','c','d','e','f','g','h','i']
    },
    options: {
        responsive: true,
        title:{
            display: true,
            text: "Color test"
        }
    }
});

これは HTML です:

<canvas id="myChart" width="600" height="400"></canvas>

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

試してみたい方は、こちらのコードをご覧ください。jsfiddle。

これが役に立つことを願っています:)

おすすめ記事