前提
Chart.js(バージョン2.8.0)で複合グラフを作っています。
横軸:日付("2022-07-01"など)
縦軸:整数と実数
※横軸の表示をすっきりさせるため、xAxes.type='time'にしています。
※xAxes.typeを設定しないとこの問題が生じないことは確認済みです。
目標
このページのグラフのように、すべての棒グラフを完全に描画したい
https://stopcovid19.metro.tokyo.lg.jp/cards/monitoring-number-of-confirmed-cases
現状
両端の棒グラフが、半分切れてしまっている
問題だと思われること
目標のグラフでは目盛りとグラフの両端の間に余裕があるが、現状のグラフでは目盛りがグラフの両端の上に乗っている。このために、両端の棒グラフが半分になっていると思われる。
両端の棒グラフが切れないためにはどうしたらよいでしょうか?
初歩的な質問かもしれないのですが、解決策を教えていただけると大変助かりますm(_ _;)m
以下、ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
</head>
<body>
<canvas class="element1" id="myMixedChart"></canvas>
<script>
///////////////////////グラフに入れる変数///////////////////////
var chartVal_datetime = [<?php echo $datetime ?>];
var chartVal_viewinc = [<?php echo $viewinc ?>];
var chartVal_incmov = [<?php echo $incmov ?>];
////////// display chart//////////
function dischart(xdata,ydata,movdata,canvasid){
var ctx = document.getElementById(canvasid);
window.dailychart = new Chart(ctx, {
type: 'bar',
data: {
labels: xdata,
datasets: [
{
//折れ線グラフ
type: 'line',
data: movdata,
borderColor: "orange",
backgroundColor: "rgba(0,0,0,0)",
pointRadius:0,
lineTension: 0.5
},
{
//棒グラフ
type: 'bar',
data: ydata,
backgroundColor: "green"
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
animation: false,
scales: {
xAxes: [
{
type: 'time',
time:{
unit: 'day'
},
gridLines:{
display: false
}
}
],
yAxes: [
{
ticks: {
suggestedMin: 0,
}
}
]
},
tooltips: {
mode: 'index'
}
},
});
}
dischart(chartVal_datetime,chartVal_viewinc,chartVal_incmov,"myMixedChart");
</script>
</body>
</html>