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'
}
到你的配置。如果您将模式设置为＆＃39; x＆＃39;它将按预期工作。请参阅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

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

1 个答案: