vue-chartjs雷达工具提示未显示标签

时间:2019-12-06 09:12:48

标签: javascript vue.js charts chart.js

我参考enter link description here作了雷达图

但是我雷达的工具提示没有告诉我我想要的方式

(在工具提示中,我想显示“标签”而不是“数据”)

但是当我将程序放入参考程序时,它可以正确显示

这是版本问题还是程序错误?

我的代码

<script>
import { Radar } from "vue-chartjs";

export default {
  extends: Radar,
  data() {
    return {
      datacollection: {
        labels: ["標題1", "標題2", "標題3", "標題4", "標題5", "標題6"],
        datasets: [
          {
            label: "主題1",
            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: [2, 3, 1, 3.5, 2.7, 1.9]
          },
          {
            label: "主題2",
            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: [4, 4, 3, 2, 1, 0]
          }
        ]
      },
      options: {
        scale: {
          ticks: {
            beginAtZero: true,
            max: 5,
            min: 0,
            stepSize: 1
          }
        }
      }
    };
  },

  mounted() {
    this.renderChart(this.datacollection, this.options);
  }
};
</script>

我的代码显示https://i.stack.imgur.com/e6O7u.png

参考代码显示https://i.stack.imgur.com/KQWYv.png

我的代码版本https://i.stack.imgur.com/NQa4X.png

参考代码版本https://i.stack.imgur.com/H9et1.png

0 个答案:

没有答案