javascript - Chart.js 条形图鼠标悬停突出显示所有数据集，而不仅仅是选定的数据集

Question

我有一个使用 Chart.js 最新版本的非常简单(水平)的条形图。

https://codepen.io/decho/pen/abZYrxO

它有 3 个数据集，Foo、Bar 和 Baz。问题是，当我将鼠标悬停在一个条形图(数据集)上时，所有 3 个条形图都会突出显示，而不仅仅是鼠标悬停的那个。

当前行为:

预期行为:

我试过使用工具提示设置，但不太明白。那么关于如何实现这一点有什么想法吗？

这是我当前的图表配置，也在 Codepen 上:

const ctx = document.getElementById('canvas').getContext('2d');
new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ['Test'],
        datasets: [
            {
                label: 'Foo',
                data: [1],
                backgroundColor: 'rgba(23, 83, 139, 0.5)',
                borderColor: '#17538b',
                borderWidth: 2,
                hoverBackgroundColor: "#17538b",
                hoverBorderColor: "#4444442b",
            },
            {
                label: 'Bar',
                data: [2],
                backgroundColor: 'rgba(255, 85, 33, 0.5)',
                borderColor: '#ff5521',
                borderWidth: 2,
                hoverBackgroundColor: "#ff5521",
                hoverBorderColor: "#4444442b",
            },
            {
                label: 'Baz',
                data: [3],
                backgroundColor: 'rgba(62, 211, 241, 0.5)',
                borderColor: '#3ed3f1',
                borderWidth: 2,
                hoverBackgroundColor: "#3ed3f1",
                hoverBorderColor: "#4444442b",
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
            position: 'bottom',
        },
        tooltips: {
            mode: 'dataset',
            intersect: true
        },
        scales: {
            xAxes: [
                {
                    display: true,
                    ticks: {
                        beginAtZero: true,
                    },
                },
            ],
            yAxes: [{
                display: false,
                ticks: {
                    beginAtZero: true,
                },
            }],
        }

    },
});

如有任何帮助，我们将不胜感激。

---

我自己解决了这个问题:显然有一个悬停模式的全局选项:

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

Answer 1

如果有人像我一样想知道如何为 type: 'line' 图表完成此操作，只需添加以下选项:

options: {
    elements: {
        point: {
            hitRadius: 1,
        }
    },
    tooltips: {
        mode: 'single',
    },
    hover: {
        mode: 'dataset',
        intersect: false
    }
}

并且不要忘记为突出显示添加颜色(显然对于每个数据集):

datasets: [
    {
        label: "A",
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 3,
        borderColor: '#ec5e5f',
        hoverBorderColor: '#e41a1c',
        pointHoverBackgroundColor: "#fff",
        lineTension: 0.5,
    }
]

有关完整示例，请查看此 codepen