[英]Vue chartJS/legacy- change Legend position
I'm working on little project with Vue-Chart JS with Laravel backend.我正在使用带有 Laravel 后端的 Vue-Chart JS 做一个小项目。 I used vue2 charts , which have import from vue-chartjs/legacy.
我使用了从 vue-chartjs/legacy 导入的vue2 图表。 So, what I wanted to move that Legend label into the bottom of the chart.
所以,我想把 Legend label 移到图表底部。
I tried to add legend: {position: "bottom",},
into the chart options, but it's not worked.我尝试在图表选项中添加
legend: {position: "bottom",},
但没有成功。 Is there any other way to do that?有没有其他方法可以做到这一点?
<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>
You need to add a plugins object and move legend inside of it您需要添加一个插件object 并在其中移动图例
chartOptions: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: "bottom",
}
}
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.