Vue + chartjs：hover 工具提示上的最近點不起作用

Question

我目前正在嘗試讓我的工具提示圖表（vuejs + chartjs）運行如下：

（ 來源選擇了“模式：最近，軸：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

根據文檔，我無法弄清楚我錯過了什么......

Answer 1

在將我的問題解釋到極致之后，我發現了一個代碼筆，其代碼與文檔不匹配，但它完美地回答了我的問題。

所以要得到結果，你必須使用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在懸停圖表線時以最近模式的工具提示正常工作。

最后結果：