错误的 chart.js 点在悬停时突出显示

Question

我正在使用 chart.js 在 vue.js 组件中为一些长度不均匀的数据集渲染堆叠折线图。我得到的效果是，将鼠标悬停在数据点上时，其他堆叠行中的错误数据点会突出显示。

预期的行为应该是始终突出显示具有相同时间戳的数据点。这里的例子：

我认为这个问题与 vue.js 无关，但不知何故，chart.js 并没有采用数据点的时间戳来突出显示，而是采用数据集中数据点的索引/位置。这是 vue/chart.js 组件代码。

Vue.component('values-stacked', {
        template: '<canvas ref="chartCanvas"></canvas>',
        data: function() {
            return {
                chart: null,
                datasets: [],
            }
        },
        methods: {
            load_portfolio_value_local: function() {
                set1 = [{
                    't': moment(1515656164, 'X'),
                    'y': 82
                }, {
                    't': moment(1515656719, 'X'),
                    'y': 85
                }, {
                    't': moment(1515657324, 'X'),
                    'y': 15
                }, {
                    't': moment(1515657969, 'X'),
                    'y': 17
                }, {
                    't': moment(1515658576, 'X'),
                    'y': 19
                }, ];
                set2 = [{
                    't': moment(1515657324, 'X'),
                    'y': 15
                }, {
                    't': moment(1515657969, 'X'),
                    'y': 18
                }, {
                    't': moment(1515658576, 'X'),
                    'y': 22
                }, ];
                new_dataset = [{
                    label: 'set1',
                    data: set1,
                    fill: true,
                }, {
                    label: 'set2',
                    data: set2,
                    fill: true,
                }];
                Object.assign(this.datasets, new_dataset);
                this.chart.update();
            },
            render_chart: function() {
                this.chart = new Chart(this.$refs.chartCanvas, {
                    type: 'line',
                    data: {
                        datasets: this.datasets
                    },
                    options: {
                        elements: {
                            point: {
                                radius: 1
                            }
                        },
                        scales: {
                            xAxes: [{
                                type: 'time',
                                distribution: 'linear',
                                time: {
                                    unit: 'day'
                                }
                            }],
                            yAxes: [{
                                id: 'val',
                                stacked: true,
                                type: 'linear',
                                ticks: {
                                    suggestedMin: 0
                                }

                            }]
                        }
                    }
                });
            }
        },
        mounted: function() {
            that = this;
            this.render_chart();
            this.load_portfolio_value_local();
        }
    });

codepen 的完整工作演示：https ://codepen.io/perelin/pen/NXzZvG

任何想法如何解决这个问题？

Answer 1

chartjs的维护者提出了如下解决方案：

默认情况下，图表悬停用于数据集中同一索引处的所有项目。您可以通过添加来更改它

hover: {
  mode: 'new mode'
}

到您的配置。如果您将模式设置为“x”，它将按预期工作。请参阅https://codepen.io/anon/pen/aEjdeb所有模式都记录在此处：http : //www.chartjs.org/docs/latest/general/interactions/modes.html

完美运行。

这是github上的原始帖子：https : //github.com/chartjs/Chart.js/issues/5148#issuecomment-357515190