chart.js4.2でマウスオーバー情報の変更
char.js4.2.1で下記のコードを使い人口ピラミッドを作ることは出来たのですがマウスオーバー時に
80～84歳
■男: -14,805
の形で表示されますがこの数値を絶対値で処理する方法をお教えください。
<script>
var ctx = document.getElementById("myBarChart").getContext('2d');
var 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'
}]
};
var options = {
indexAxis: 'y',
scales: {
y:{
beginAtZero: true,
stacked: true,
display: true,
title:{
display: true,
text: '年齢'
}
},
x:{
stacked: true,
display: true,
//min: 300,
title:{
display: true,
text: '人数'
},
ticks: {
callback: function (v) { return Math.abs(v) }
}
},
},
plugins: {
title: {
display: true,
text: 'Pyramide des ages'
}
}
};
var ex_chart = new Chart(ctx, {
type: 'bar',
data: data,
options: options,
});
</script>
お礼
返事が遅くなりすみません。 どうもありがとうございます。 リファレンス、ちょっとだけわかりました。