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配置控制工具提示 popup 的显示，而不是数据集点的显示。点由hover configuration控制。 page you linked（重点是我的）上提到了这一点：

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

如果只希望突出显示悬停的单个点，请使用：

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

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

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

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

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

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

1 个答案: