2本の折れ線グラフは今年の売上と去年の売上を表示しています。
$xlabelThis = '20/03','20/04','20/05','20/06';
$xlabelLast = '19/03','19/04','19/05','19/06';
一方の折れ線グラフはPHPで宣言した $xlabelThis
をそのままツールチップのTitleとして用いますが、もう一方の折れ線グラフは $xlabelLast
の内容を反映させたいです。
ご教示いただけると幸いです。
var ctx = document.getElementById("uriageChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: [{$xlabelThis}],
datasets: [
{
label: '今年(万円)',
lineTension: 0,
data: [3000,7000,4000,3000],
borderColor: "rgba(255,0,0,1)",
backgroundColor: "rgba(0,0,0,0)"
},
{
label: '去年(万円)',
lineTension: 0,
data: [1000,3000,5000,2000],
borderColor: "rgba(0,0,255,1)",
backgroundColor: "rgba(0,0,0,0)"
}
],
},
options: {
tooltips: {
mode: 'nearest',
intersect: false,
callbacks: {
title: function (tooltipItem, data){
return '';
},
label: function(tooltipItem, data){
return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' 円';
}
}
},
title: {
display: true,
text: '売上'
},
scales: {
yAxes: [{
ticks: {
callback: function(value, index, values){
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' 円';
}
}
}]
},
}
});