我正在使用带有 Laravel 后端的 Vue-Chart JS 开发一个小项目。我使用了 vue2 图表,它是从 vue-chartjs/legacy 导入的。所以,我想将图例标签移动到图表的底部。
我尝试将 legend: {position: "bottom",},
添加到图表选项中,但没有成功。还有其他办法吗?
<template>
<Bar
:chart-options="chartOptions"
:chart-data="chartData"
:chart-id="chartId"
:dataset-id-key="datasetIdKey"
:plugins="plugins"
:css-classes="cssClasses"
:styles="styles"
: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: "BarChart",
components: {
Bar,
},
props: {
chartId: {
type: String,
default: "bar-chart",
},
datasetIdKey: {
type: String,
default: "label",
},
width: {
type: Number,
default: 400,
},
height: {
type: Number,
default: 400,
},
cssClasses: {
default: "",
type: String,
},
styles: {
type: Object,
default: () => {},
},
plugins: {
type: Array,
default: () => [],
},
},
data() {
return {
chartData: {
labels: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
],
datasets: [
{
label: "Data One",
backgroundColor: "#f87979",
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11],
},
],
},
chartOptions: {
responsive: true,
maintainAspectRatio: false,
legend: {
position: "bottom",
},
},
};
},
};
</script>
最佳答案
您需要添加一个插件对象并在其中移动图例
chartOptions: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: "bottom",
}
}
},
关于javascript - Vue ChartJS/legacy-更改图例位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72868211/