chart.js4.2でカラー設定をする方法
過去にこのサイトでchart.js2.9を使い複数グラフを表示する方法(https://okwave.jp/qa/q9834370.html)を教えてもらいましが、今回v.4.2にそれを適用するにあたりプラグインのカラー設定に代わる方法がないかと試行を繰り返し、素人のため無理筋の方法ですが下記のコードまで至りました。そこで、このお粗末なコードを適切なものに手直ししていただきたくお願い申し上げます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>multiグラフ</title>
</head>
<body>
<div class="row" style="width: 100%;" >
<div class="chart1" style="float: left;width:300px; height:250px" >
<canvas id="myChart1"></canvas></div>
<div class="chart2" style="float: right;width:300px; height:250px">
<canvas id="myChart2"></canvas></div>
<div class="chart3" style="bottom: 0;float: left;width:300px; height:250px">
<canvas id="myChart3"></canvas></div>
<div class="chart4" style="bottom: 0;float: right;width:300px; height:250px">
<canvas id="myChart4"></canvas></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js"></script>
<script>
function displayChart(canvasId, chartType, datasets, options) {
var ctx = document.getElementById(canvasId);
var myPieChart = new Chart(ctx, {
type: chartType,
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
// Ｘ軸のラベル
datasets: datasets
},
options: {
plugins: {
//responsive: false,
title: {
display: options.title.length > 0,
// タイトルがあれば表示
text: options.title
},
legend: {
// 凡例
display: true,
// 表示の有無
position: options.legendPosition,
// 表示位置
labels: {
usePointStyle: options.usePointStyle // 円の凡例スタイルを使うか
}
}
}
}
});
}
const color1 = ['red','green','skyblue'];
const mycolor = ['rgb(221,160,221)','rgb(228,0,127)','rgb(160,216,239)','rgb(146,7,131)','rgb(0,153,68)','rgb(255, 215, 0)','rgb(0,158,150)'];
const label1 = [
{label: '仙台',data: [320000, 590000, 400000, 420000, 380000, 250000, 420000],backgroundColor:mycolor},
{label: '札幌',data: [520000, 450000, 380000, 280000, 590000, 400000, 530000],backgroundColor:mycolor},
{label: '渋谷',data: [650000, 230000, 480000, 600000, 620000, 700000, 760000],backgroundColor:mycolor}
];
const datasets = [
{label: label1[0].label,data: label1[0].data,backgroundColor:color1[0]},
{label: label1[1].label,data: label1[1].data,backgroundColor:color1[1]},
{label: label1[2].label,data: label1[2].data,backgroundColor:color1[2]}
];
displayChart('myChart1', 'bar', datasets,{
title: '',
usePointStyle: false,
legendPosition: 'top',
});
for (var i = 0; i < 3; i++) {
displayChart("myChart".concat(i + 2), 'pie', [label1[i]], {
title: label1[i].label,
backgroundColor:mycolor,
usePointStyle: true,
legendPosition: 'left'
});
}
</script>
</body>
</html>
特にbackgroundColorの設定をoptionで設定出来ないかと思いましたが方法が分かりませんでしたのでこのようなコードをに成り果てました。
また、カラースキーム組み合わせは別の手段を使って作りコピペしているのですがこれも貧弱なものですので、使えるプラグインがあればご教授お願いいたします。
お礼
アドバイスを参考にやってみたところ、ちょっと試行錯誤しましたがなんとかできた感じです。ありがとうございました。