我正在使用 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>
uj5u.com熱心網友回復:
legend是一個圖表插件,所以它會在pluginsin 選項下。
options: {
plugins: {
legend: {
display: false
}
}
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/451933.html
標籤:javascript css Vue.js 图表.js
