Chartjs - ツールチップタイトルなしでx軸ティックをトリミングする

Question

私は単純な棒グラフを持っています。 xAxesのティック/ラベルの場合、私は月の初めの3レターだけを表示したい。しかし、もし私が 'Jan、Feb、Mar、...'のようなラベルを設定すると、それはツールチップのタイトルにも影響します。私はツールチップのタイトルでは1月のような完全な月を表示したいが、ラベルは表示しない。

どうすればこの問題を解決できますか？私を助けてください。ありがとう！

は、ここであなたがticksとtooltipsの両方にcallback機能を使用することができそして、ラベルの最初の3つの文字を取るString#substr方法を使用するように私のチャートコード

var ctx = document.getElementById("chart").getContext("2d"); 
var myChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
     labels: ['January', 'February', 'March', 'April', 'May', 'June'], 
     datasets: [{ 
      label: '# of votes', 
      data: [5, 9, 2, 4 ,7, 3], 
      backgroundColor: 'rgba(255, 99, 132, 0.2)', 
      borderColor: 'rgba(255,99,132,1)', 
      borderWidth: 1 
     }] 
    }, 
    options: { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero: true 
       } 
      }] 
     } 
    } 
}); 

Answer 1

です。

var ctx = document.getElementById("chart").getContext("2d"); 
 
var myChart = new Chart(ctx, { 
 
    type: 'bar', 
 
    data: { 
 
     labels: ['January', 'February', 'March', 'April', 'May', 'June'], 
 
     datasets: [{ 
 
      label: '# of votes', 
 
      data: [5, 9, 2, 4, 7, 3], 
 
      backgroundColor: 'rgba(255, 99, 132, 0.2)', 
 
      borderColor: 'rgba(255,99,132,1)', 
 
      borderWidth: 1 
 
     }] 
 
    }, 
 
    options: { 
 
     scales: { 
 
      xAxes: [{ 
 
       ticks: { 
 
        callback: function(e) { 
 
         return e.substr(0, 3); 
 
        } 
 
       } 
 
      }], 
 
      yAxes: [{ 
 
       ticks: { 
 
        beginAtZero: true 
 
       } 
 
      }] 
 
     }, 
 
     tooltips: { 
 
      callbacks: { 
 
       title: function(e, d) { 
 
        return d.labels[e[0].index]; 
 
       } 
 
      } 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<canvas id="chart"></canvas>