在工具提示中添加时间之前的文本答案

【问题标题】：Add text before time in tooltip在工具提示中添加时间之前的文本
【发布时间】：2018-09-14 14:46:08
【问题描述】：

我的数据集基于每周数据，并且我已将 xAxes 配置为仅显示月份和年份（避免标签过多）。现在我想在工具提示中的日期之前添加文本。这是默认的TT：

如何将工具提示更改为：Week ending: 25/03/18

我尝试添加工具提示回调，但无法修改日期，只能修改标签。

options: {
  scales: {
    xAxes: [{
      type: 'time',
      position: 'bottom',
      time: {
        displayFormats: {'day': 'MM/YY'},
        tooltipFormat: 'DD/MM/YY',
        unit: 'month'
      }
    }]
  },
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        var label = data.datasets[tooltipItem.datasetIndex].label || ''
        if (label) {
          label = 'Week ending: ' + label
        }
        return label
      }
    }
  }
}

【问题讨论】：

在下面查看我的答案
周末是什么意思？
数据点代表7天（一周）累积的数据。工具提示仅显示一个日期。我的目的是更清楚地说明数据是针对一周的，而不仅仅是 1 天。我想更清晰的措辞是“周结束于：d/m/y”
更合适的应该是截止日期而不是周末。
我仍然无法理解你的问题.. 解决方案可以很容易地从回调函数中得出

标签： chart.js

【解决方案1】：

下面是一个有效的演示，但是你可以更好地提高周末值的查找，因为如果周末值大于 30，这并不适用

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>


<head>
  <title>Bar Chart</title>
  <style>
    canvas {
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
    }
  </style>
</head>

<body>
  <div id="container" style="width: 100%;">
    <canvas id="canvas"></canvas>
  </div>
  <script>
    var MONTHS = ['January', 'February'];

    var barChartData = {
      labels: ['03/20/2018', '03/10/2018'],
      datasets: [{
        label: 'Dataset 1',
        borderWidth: 1,
        data: [
          1,
          2
        ]
      }, {
        label: 'Dataset 2',
        borderWidth: 1,
        data: [
          3,
          4
        ]
      }]

    };

    window.onload = function() {
      var ctx = document.getElementById('canvas').getContext('2d');
      window.myBar = new Chart(ctx, {
        type: 'bar',
        data: barChartData,
        options: {
          responsive: true,
          legend: {
            position: 'top',
          },
          tooltips: {
            callbacks: {
                label: function(tooltipItems, data) {
                var xLabel = tooltipItems.xLabel;
                var dt = new Date(xLabel);
                
                var lastday = dt.getDate() - (dt.getDay() - 1) + 6;  
                    var label = "Weekend Is: "+lastday;
                    return label;
                }
            }
        },
          title: {
            display: true,
            text: 'Chart.js Bar Chart'
          }
        }
      });

    };
  </script>
</body>

【讨论】：

我将编辑我的帖子以使其更加清晰。 TT 顶部的时间戳是周末。我想从：dd/mm/yyyy 到 Weed 结尾：dd/mm/yyyy