

2本の折れ線グラフは今年の売上と去年の売上を表示しています。

[code]

    $xlabelThis = '20/03','20/04','20/05','20/06';
    $xlabelLast = '19/03','19/04','19/05','19/06';
    
[/code]

一方の折れ線グラフはPHPで宣言した `$xlabelThis` をそのままツールチップのTitleとして用いますが、もう一方の折れ線グラフは
`$xlabelLast` の内容を反映させたいです。  
ご教示いただけると幸いです。

[code]

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


CC BY-SA 4.0
2020-06-17T02:04:11.287
67746
2020-06-18T13:23:41.700
2020-06-17T05:28:42.163
40694
40694
question
javascript chart.js
2本の折れ線グラフのツールチップのTitleに、それぞれ別の文字列を表示させたい。


[Chart.js Tooltip
Callback](https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-
callbacks)

や
[サンプルページ](https://www.chartjs.org/samples/latest/tooltips/callbacks.html)を見るとわかりますが

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

改造したところは

[code]

    var xlabelThis  = [ '20/03', '20/04', '20/05', '20/06'];
    var xlabelLast = ['19/03', '19/04', '19/05', '19/06'];
    var titles = [xlabelThis, xlabelLast];
    
[/code]

[code]

    tooltips: {
    callbacks: {
     title: function (tooltipItem, data) {
      var title = titles[tooltipItem[0].datasetIndex];
      return title[tooltipItem[0].index];
    }
    
[/code]

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

[![画像の説明をここに入力](https://i.stack.imgur.com/JV3ea.png)](https://i.stack.imgur.com/JV3ea.png)  
[![画像の説明をここに入力](https://i.stack.imgur.com/cxqDo.png)](https://i.stack.imgur.com/cxqDo.png)


CC BY-SA 4.0
2020-06-18T13:23:41.700
67790
2020-06-18T13:23:41.700
18851
67746
answer