将鼠标悬停在 Chart.js 中活动的折线图数据上的其他数据集上

Question

我正在使用 Chart.js 创建折线图。该图表有两个数据集。x 轴是日期，y 轴是值。当我将鼠标悬停在数据集 1 中的第一个数据时，数据集 2 中的第一个数据也处于活动状态（缩放）。这不是我所期望的。有没有办法只激活悬停的数据。有没有办法通过 y 值而不是索引来激活所有数据。

我尝试过编辑工具提示模式，但结果不是我预期的。它显示具有相同索引的不同数据集中的工具提示。 https://www.chartjs.org/docs/latest/general/interactions/modes.html

var ctx = document.getElementById("myChart");
var barChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'Dataset 1',
            data: [{
                x: '2019-01-15',
                y: 100
            }, {
                x: '2019-02-03',
                y: 300
            }],
            backgroundColor: 'rgba(0, 0, 0, 0)',
            borderColor: 'rgba(255, 0, 0, 1)',
            borderWidth: 1
        }, {
            label: 'Dataset 2',
            data: [{
                x: '2019-01-03',
                y: 150
            }, {
                x: '2019-01-15',
                y: 200
            }, {
                x: '2019-02-06',
                y: 250
            }],
            backgroundColor: 'rgba(0, 0, 0, 0)',
            borderColor: 'rgba(0, 255, 255, 1)',
            borderWidth: 1
        }],
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                }
            }],
            xAxes: [{
                type: 'time',
                position: 'bottom',
                time: {
                    min: "2019-1-1",
                    max: "2019-2-28",
                    unit: "month",
                    displayFormats: {
                        "month": "YYYY-MM",
                    }
                }
            }]
        }
    }
});

https://jsfiddle.net/t1gmrujo/2/

Answer 1

我尝试过编辑工具提示模式，但结果不是我预期的。它显示具有相同索引的不同数据集中的工具提示。

配置tooltip控制工具提示弹出窗口的显示，而不是数据集点的显示。hover点由配置控制。您链接的页面上提到了这一点（强调我的）：

通过悬停或工具提示配置与图表的交互时，可以使用多种不同的模式。

如果您只想突出显示悬停在其上的单个点，请使用：

options: {
  hover: {
    mode: 'point'
  }
}

如果您希望在悬停任何单个数据集点时突出显示整个数据集，请使用：

options: {
  hover: {
    mode: 'dataset'
  }
}

如果要突出显示数据集并在工具提示中查看所有数据集值，请使用：

options: {
  hover: {
    mode: 'dataset'
  },
  tooltips: {
    mode: 'dataset'
  }
}