使用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