Chart.js双数据集柱状图第二个数据集tooltips不显示如何修复

你的代码有两个直接导致异常的问题：

• 变量引用错误：你提前定义了存储实际完成值的realisasi数组，但Realisasi数据集的data属性错误引用了未定义的testArr变量，数据集加载时就会抛出引用错误，直接导致该数据集的tooltip渲染中断。
• Tooltip交互模式未配置：Chart.js默认tooltip触发模式为nearest，由于Target列数值固定为100，远高于Realisasi列的个位数/十位数数值，柱体高度差极大，鼠标悬浮时默认只会识别到离指针最近的Target柱，不会同时触发同月份下两个数据集的提示。另外你写的tooltip回调里货币符号逻辑不一致，数值小于1000时会错误显示$，和Y轴统一用Rp的规则冲突。

1. 修正Realisasi数据集的变量引用，将data: testArr替换为data: realisasi
2. 在tooltips配置中添加mode: 'index'和intersect: false属性，实现悬浮到对应月份任意位置时，自动展示该月两个数据集的全部提示
3. 统一tooltip的货币格式化逻辑，和Y轴保持一致全部使用Rp作为单位，避免符号显示错误

修复后的完整可运行代码如下：

<div><canvas id="myChart"></canvas></div>

<script>
const target = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100];
const realisasi = [0, 0, 0, 0, 0, 10, 0, 10, 1, 0, 0, 0];
const ctx = document.getElementById("myChart").getContext("2d"); 
const dataset = {
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        datasets: [
            { label: "Target", data: target, backgroundColor: "#3d8ef8" },
            // 修正变量引用错误
            { label: "Realisasi", data: realisasi, backgroundColor: "#11c46e" },
        ],
    }       
const myChart = new Chart(ctx, {
    type: 'bar',
    data: dataset,
    options: {
        tooltips: {
          // 新增tooltip触发模式配置
          mode: 'index',
          intersect: false,
          callbacks: {
                data (t, d) {
                    const xLabel = d.datasets[t.datasetIndex].label;
                    // 统一货币格式化逻辑，和Y轴保持一致
                    const yLabel = 'Rp.' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                    return xLabel + ': ' + yLabel;
                }
            }
        },
        scales: {
            yAxes: [
              {
                ticks: {
                beginAtZero: true,
                callback: (label, index, labels) => {
                        return 'Rp.' + label.toFixed(0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                }
              }
            }
          ]
        },
    },
});
</script>

修改完成后刷新页面，悬浮到任意月份的柱条上，就会同时展示Target和Realisasi两个数据集的数值提示，不会再出现Realisasi提示缺失的问题。

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