Vue + chartjs：悬停工具提示上的最近点不起作用

Question

我目前正在尝试获取工具提示的图表（vuejs + chartjs）运行，如下所示：

（Source 选择了“模式：最近，轴：xy”模式）

这是我的组件代码：

Vue.component('line-chart', {
  extends: VueChartJs.Line,
  mounted () {
    this.renderChart({
      labels: ['Dec 2017', 'Jan 2018', 'Feb 2018', 'Mar 2018', 'Apr 2018', 'May 2018', 'Jun 2018', 'Jul 2018', 'Aug 2018', 'Sep 2018', 'Oct 2018', 'Nov 2018'],
      datasets: [
        {
          label: '2018 pages read per month',
          backgroundColor: '#f87979',
          data: [1238, 1660, 1571, 976, 2344, 1227, 949, 1109, 900, 458, 240, 384]
        }
      ]
    }, {responsive: true, maintainAspectRatio: false, 

        //Here is the part that doesn't seem to work
        interaction: {
         axis: 'xy', 
         mode: 'nearest',
         intersect: false

        }
       })
  }
});

var vm = new Vue({
  el: '#app',
  data: { }
});

你可以找到我的codepen here

根据 documentation 我不知道我错过了什么...

Answer 1

在将我的问题解释到极致之后，我发现了一个 codepen 其代码与文档不匹配，但它完美地回答了我的问题。

所以要得到结果，你必须使用 options.tooltips.mode 而不是 options.interaction.mode !

那么，你必须改变：

    interaction: {
     axis: 'xy', 
     mode: 'nearest',
     intersect: false

    }

作者：

tooltips: {
  mode: 'index',
  intersect: false,
},

这是最终代码：

Vue.component('line-chart', {
      extends: VueChartJs.Line,
      mounted () {
        this.renderChart({
          labels: ['Dec 2017', 'Jan 2018', 'Feb 2018', 'Mar 2018', 'Apr 2018', 'May 2018', 'Jun 2018', 'Jul 2018', 'Aug 2018', 'Sep 2018', 'Oct 2018', 'Nov 2018'],
          datasets: [
            {
              label: '2018 pages read per month',
              backgroundColor: '#f87979',
              data: [1238, 1660, 1571, 976, 2344, 1227, 949, 1109, 900, 458, 240, 384]
            }
          ]
        }, {responsive: true, maintainAspectRatio: false, 
              tooltips: {
             axis: 'xy', 
             mode: 'nearest',
             intersect: false
    
            }
           })
      }
    });
    
    var vm = new Vue({
      el: '#app',
      data: { }
    });

这是 codepen 在悬停图表线时以最近模式使用工具提示正常工作。

最终结果：

Vue + chartjs：悬停工具提示上的最近点不起作用

Vue + chartjs : Nearest point on hover tooltip not working

javascript

charts

tooltip

vue.js

chart.js