chart.jsでx軸の表示値をカスタマズする方法
いつもお世話になっております。今回、chart.jsで水平横棒グラフ使ったピラミッドチャートのx軸の片方の系列の値をカスタマイズする方法につて伺います。下記のコードの方法では左側の男の方の値が－表示になってしまいます。これを＋表示に変更する方法についての相談です。目盛表示のカスタマイズには、ticks の callback にコールバックを定義すれば可能だと思いますが、左右違う系列の場合どうすればいいのか分かりません。もし可能ならばその方法をご教授願います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>棒グラフ</title>
</head>
<body>
<canvas id="myBarChart" width="550" height="480"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<script>
var ctx = document.getElementById("myBarChart").getContext('2d');
var myChart = new Chart(ctx, {
type: "horizontalBar", // 水平棒グラフ
data: {
labels: ['90歳以上','85～89歳','80～84歳','75～79歳','70～74歳','65～69歳','60～64歳','55～59歳','50～54歳','45～49歳','40～44歳','35～39歳','30～34歳','25～29歳','20～24歳','15～19歳','10～14歳','5～9歳','0～4歳'],
datasets: [
{
label:'男',data: [-3790,-8605,-14805,-16655,-19641,-29027,-26151,-22360,-19752,-19288,-22510,-20397,-17238,-14645,-12763,-16385,-15610,-14625,-13880,],
backgroundColor: "red"
},
{
label:'女',data: [13400,18358,23241,22544,23231,29351,25690,22067,20064,19011,21714,19305,16677,14028,12091,14741,14919,13973,13049],
backgroundColor: "green"
}
]
},
options: {
responsive: false,
title: {
display: true,
text: 'Pyramide des ages'
},
scales: {
xAxes: [{stacked: true,}],
yAxes: [{stacked: true }]
},
}
});
</script>
</body>
</html>
お礼
返信が遅くなってしまってすみません。。 その後、、Ｃ＃を本格的に使えるようになり、またオメガチャートというオープンソースのチャート描画ソフトがＣ＃で開発されているということで参考にしながら進めています。 ありがとうございました。