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
のエラーメッセージが出てグラフも左右でなく上下の状態となります。
コピペだけで既存のコードを利用している者として不勉強で申し訳ありませんがご教授お願いいたします。
お礼
補足
自己解決しました！ 1.ポイントスタイルを四角形から円形に変更 2.ラベルの文字サイズを小さくする これで、１行に表示できました！