0

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, ',') +' 円';
            }
          }
        }]
      },
    }
  });

1 件の回答 1

1

Chart.js Tooltip Callback

サンプルページを見るとわかりますが

Tooltips の callback の中で タイトル等を書き換える事ができます。

改造したところは

var xlabelThis  = [ '20/03', '20/04', '20/05', '20/06'];
var xlabelLast = ['19/03', '19/04', '19/05', '19/06'];
var titles = [xlabelThis, xlabelLast];
tooltips: {
callbacks: {
 title: function (tooltipItem, data) {
  var title = titles[tooltipItem[0].datasetIndex];
  return title[tooltipItem[0].index];
}

のように tooltipItem[0].datasetIndex が 0 または 1 で 今年、昨年が切り替えられ
tooltipItem[0].index で 何番目の要素なのかがわかるので、
あとは 表示したいタイトルを文字列で返すだけです。

画像の説明をここに入力
画像の説明をここに入力

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。