Chart.js v4.2.1工具提示修正：还原调度与小时真实数值

要实现工具提示显示真实数值，只需在tooltip.callbacks中添加label回调函数，根据数据集标签判断需要还原的倍数：

callbacks: {
  label: function(context) {
    let label = context.dataset.label || '';
    let value = context.parsed.y;
    
    // 根据数据集类型还原真实数值
    if (label === 'Dispatches') {
      value = value / 100; // 还原调度次数真实值
    } else if (label === 'Hours') {
      value = value / 10; // 还原时长真实值
    }
    
    return `${label}: ${value}`;
  }
}

逻辑说明 #

• context.dataset.label获取当前悬停的数据集名称（Stops/Dispatches/Hours）
• context.parsed.y是图表上显示的放大后数值，按对应倍数除法还原即可
• Stops数据集无需处理，直接返回原始值

修改后的完整代码 #

<div>
   <canvas id="myChart" style="width:100%;max-width:700px"></canvas>
</div>

<script>
const arrayObjects = [["2023-02-02","889","11",1100,704],["2023-02-03","2282","20",2000,1407],["2023-02-04","2268","20",2000,1298],["2023-02-06","2054","20",2000,1378],["2023-02-07","1890","17",1700,1213],["2023-02-08","1789","16",1600,1156],["2023-02-09","1910","17",1700,1274],["2023-02-10","1761","17",1700,1225],["2023-02-11","1129","12",1200,818],["2023-02-13","1832","17",1700,1194],["2023-02-14","1397","14",1400,995],["2023-02-15","1681","16",1600,1111]];

var datesArray = arrayObjects.map(function(tuple) {
    return tuple[0];
});
var stopsArray = arrayObjects.map(function(tuple) {
    return tuple[1];
});
var dispArray = arrayObjects.map(function(tuple) {
    return tuple[2];
});
var dispamountArray = arrayObjects.map(function(tuple) {
    return tuple[3];
});
var hoursArray = arrayObjects.map(function(tuple) {
    return tuple[4];
});

const weekday = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
// the chart values
var theDispatches = dispamountArray;
var theDates = datesArray;
var theStops = stopsArray;
var theHours = hoursArray;
for (var i = 0; i < theDates.length; i++) {
    
var dateArray = theDates[i].split("-");
var year = dateArray[0];
var month = parseInt(dateArray[1], 10) - 1;
var date = dateArray[2];
var newDate = new Date(year, month, date);
var today = new Date(newDate);
var dd = today.getDate();
var mm = today.getMonth()+1;
md = ' '+mm+'/'+dd;
const d = new Date(newDate);
let theDay = weekday[d.getDay()];
theDates[i] = theDay+md;
}

new Chart(document.getElementById("myChart"), {
  type: 'line',
  data: {
    labels: theDates,
    datasets: [{ 
        data: theStops,
        label: "Stops",
        borderColor: "blue",
        fill: false,
        trendlineLinear: {
            colorMin: "blue",
            lineStyle: "dotted|solid",
            width: 2
        }
      },
     { 
        data: theDispatches,
        label: "Dispatches",
        borderColor: "red",
        fill: false
      },
     { 
        data: theHours,
        label: "Hours",
        borderColor: "green",
        fill: false
      }
    ]
  },
  options: {
    elements: {
        line: {
            tension: 0.5
            }
    },
    title: {
      display: true,
      text: 'Stops per day in timespan selected'
    },
    responsive: false,
    plugins: {
      tooltip: {
        callbacks: {
          label: function(context) {
            let label = context.dataset.label || '';
            let value = context.parsed.y;
            
            if (label === 'Dispatches') {
              value = value / 100;
            } else if (label === 'Hours') {
              value = value / 10;
            }
            
            return `${label}: ${value}`;
          }
        }
      }
    }
  }
});
</script>

内容的提问来源于stack exchange，提问作者drodsher