如何让雷达图的工具提示在 vue-chartjs 中显示"labels"？

Question

我的雷达的工具提示显示"标签"，但我希望雷达的工具提示显示"数据">

我参考了图表的方法.js官方网站但仍然无法正确显示

我的雷达图

图.js官网雷达图

我的代码版本

"dependencies": {
"chart.js": "^2.9.3",
"chartkick": "^3.2.0",
"core-js": "^3.3.2",
"hchs-vue-charts": "^1.2.8",
"vue": "^2.6.10",
"vue-chartjs": "^3.5.0",
"vue-chartkick": "^0.6.0",
"vue-router": "^3.1.3",
"vuetify": "^2.1.0"
}

我的代码

<script>
import { Radar } from "vue-chartjs";
export default {
extends: Radar,
data() {
return {
datacollection: {
labels: [
"Eating","Drinking","Sleeping","Designing","Coding","Cycling","Running"
],
datasets: [
{
label: "My First Dataset",
backgroundColor: "rgba(179,181,198,0.2)",
borderColor: "rgba(179,181,198,1)",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(179,181,198,1)",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: "My Second Dataset",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
pointBackgroundColor: "rgba(255,99,132,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(255,99,132,1)",
data: [28, 48, 40, 19, 96, 27, 100]
}]},
options: {
scale: {
angleLines: {
display: false
},
ticks: {
suggestedMin: 50,
suggestedMax: 100
}}}};},
mounted() {
this.renderChart(this.datacollection, this.options);
}};
</script>

Answer 1

您可以使用返回标题的回调函数添加tooltips选项，如下所示：

"options": {
...
"tooltips": {
"callbacks": {
"title": (tooltipItem, data) => data.labels[tooltipItem[0].index]
}
}
}

请查看以下 JavaScript 代码片段。将tooltips选项添加到你现有的 Vue.js 代码中应该工作相同。

new Chart(document.getElementById("myChart"), {
"type": "radar",
"data": {
"labels": ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
"datasets": [{
"label": "My First Dataset",
"data": [65, 59, 90, 81, 56, 55, 40],
"fill": true,
"backgroundColor": "rgba(255, 99, 132, 0.2)",
"borderColor": "rgb(255, 99, 132)",
"pointBackgroundColor": "rgb(255, 99, 132)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(255, 99, 132)"
}, {
"label": "My Second Dataset",
"data": [28, 48, 40, 19, 96, 27, 100],
"fill": true,
"backgroundColor": "rgba(54, 162, 235, 0.2)",
"borderColor": "rgb(54, 162, 235)",
"pointBackgroundColor": "rgb(54, 162, 235)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(54, 162, 235)"
}]
},
"options": {
"elements": {
"line": {
"tension": 0,
"borderWidth": 3
}
},
"tooltips": {
"callbacks": {
"title": (tooltipItem, data) => data.labels[tooltipItem[0].index]
}
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>