chart.jsのコードを2.9から4.2に変換
以前使っていたchart.jsのバージョン2.9系から最新の4.2系に変えたいと思い試行しています。基本的なサンプルはなんとかなるのですが、3系統に変わってから大きく変化した部分が全く理解しないまま2系統を使い続けて来たのが現況です。今回、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;" >
<canvas id="myChart1" width="300" height="450"></canvas></div>
<div class="chart2" style="left: 300px">
<canvas id="myChart2" width="350" height="450"></canvas></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script>
Chart.defaults.global.defaultFontColor = 'black';
var ctx = document.getElementById("myChart1").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"
}
]
},
options: {
responsive: false,
title: {
display: true,
text: 'Pyramide des ages'
},
scales: {
xAxes: [{
stacked: true,
ticks: {
callback: function (v){ return Math.abs(v) }
}
}],
yAxes: [{stacked: true,
ticks: {
display: false
}
}]
}
}
});
var ctx = document.getElementById("myChart2").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: [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: ''
},
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{stacked: true }]
},
}
});
</script>
</body>
</html>
これは、Y軸のラベル表示を真ん中に置きたいがため2個のcanvasを強引に並べています。
ちなみに、canvas分けないで一つだけにしてY軸を左端にした場合で試したところ。
"horizontalBar"の部分を
type: "bar",
options: {
indexAxis: "y",
},
に代えても 肝心の「xAxes」の部分をどう変えていいか分からないためそままにしておいたら、当然のごとく
Invalid scale configuration for scale: xAxes
Invalid scale configuration for scale: yAxes
のエラーメッセージが出てグラフも左右でなく上下の状態となります。
コピペだけで既存のコードを利用している者として不勉強で申し訳ありませんがご教授お願いいたします。
お礼
早速の回答ありがとうありがとうございます。なるほど複数系列の有無に関わらず絶対値を指定すればいいのか。系列毎に指定しなければいけないかと思っていた自分が情けない。 ついでに伺いますがy軸の表示部分を中心に左右に振り分ける方法についてですがExcelでは簡単に出来るのですがchart.jsでは左右別方向の水平棒グラフを並列に並べる等の面倒な方法をとらなければいけないでしょうか。