使用 vue-charts.js，我无法让 hoverOffset 与甜甜圈一起工作

Question

所以似乎无论我做什么，我都无法让 hoverOffset 属性对我的甜甜圈做任何事情。

这是我的组件：

<script>

import { Doughnut } from 'vue-chartjs'

export default {
  extends: Doughnut,
  props: {
      chartData: {type: Object, default: null},
      options: {type: Object, default: null}
},
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}

</script>

这是我的测试数据：

      tempChartDataOne: {
        labels: [
          'something',
          'something',
          'something',
          'something',
          'something'
        ],
        datasets: [{
          label: 'My First Dataset',
          data: [20, 4, 7, 5, 2],
          backgroundColor: [
            'rgb(38, 153, 0)',
            'rgb(153, 204, 0)',
            'rgb(255, 153, 0)',
            'rgb(230, 0, 0)',
            'rgb(153, 0, 0)'
          ],
          hoverOffset: 4
        }]
      },
      tempChartDataTwo: {
        labels: [
          'something',
          'something',
          'something'
        ],
        datasets: [{
          label: 'My First Dataset',
          data: [3, 5, 10],
          backgroundColor: [
            'rgb(38, 153, 0)',
            'rgb(255, 205, 86)',
            'rgb(230, 0, 0)',
          ],
          hoverOffset: 4
        }],
        
      },
      tempChartOptions: {
        cutoutPercentage: 70,
        maintainAspectRatio: false,
      },

然后这是我的前端：

<div class="flex-chart-container">
            <div class="flex-chart-left">
              <doughnut-chart :chartData="tempChartDataOne" :options="tempChartOptions" ></doughnut-chart>
            </div>
            <div class="flex-chart-right">
              <doughnut-chart :chartData="tempChartDataTwo" :options="tempChartOptions"></doughnut-chart>
            </div>
</div>

基本上，我有两个甜甜圈放在一个容器里。将 hoverOffset 设置为任何值均无效。

Answer 1

hoverOffset 属性已添加到库版本 3 中的 chart.js。 Vue-chartjs 使用版本 2 的库，因此在更新包装器之前，您将无法在图表中使用 hoverOffset

使用 vue-charts.js，我无法让 hoverOffset 与甜甜圈一起工作

Using vue-charts.js, I cannot get hoverOffset to work with doughnut

javascript

vue.js

chart.js

vue-chartjs