Question

我的雷达的工具提示显示为“标签”，但我希望雷达的工具提示显示为“数据”

我参考了chart.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>

如何使雷达图的工具提示在vue-chartjs中显示“标签”？

1 个答案: