如何在 Vue 中隐藏 Chart.js 图例？

Question

我正在使用 Vue Chart.js 在我的项目中创建图表。我试图隐藏图例，但它似乎无法识别我的 display:false 命令。我尝试使用他们在 github 存储库中提供的示例。图表数据已正确加载。难道我做错了什么？（我使用的是 Vue 2）。

<template>
  <Bar
      :chart-options="chartOptions"
      :chart-data="chartData"
      :width="width"
      :height="height"
  />
</template>

<script>
import {Bar} from 'vue-chartjs/legacy'
import {Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale} from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

export default {
  name: 'MyBarChart',
  components: {Bar},
  props: {
    chartId: {
      type: String,
      default: 'bar-chart'
    },
    datasetIdKey: {
      type: String,
      default: 'label'
    },
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 200
    },
    chartData:{
      type: Object,
      default: () => {

      }
    }
  },
  data() {
    return {

      chartOptions: {
        responsive: true,
        legend: {
          display: false
        }
      }
    }
  },

}
</script>

Answer 1

legend是图表插件，所以会在选项plugins下面。

options: {
   plugins: {
      legend: {
         display: false
      }
   }
}

如何在 Vue 中隐藏 Chart.js 图例？

How to hide Chart.js legend in Vue?

javascript

css

vue.js

chart.js