祝大家好日子:
最近我开始使用 Vue.js(2.6.12) + Vuetify(2.3.10) 和 Chart.js(3.0.2)。所以我是一个新手(再次)。
我创建了一个组件,它包装了 Chart.js 允许我们创建的条形图。这是它的图片:
我要更改的唯一两件事是靠近图例标题的小框和一些网格 x 线。
在小图例框的情况下是红色的。我希望它与图例标题文本的蓝色对齐。正如我在这张照片中向您展示的那样:
我无法做到这一点。我已经考虑并遵循了官方文档,但没有任何效果:S。
- 创建以颜色绘制某些轴的函数:https ://www.chartjs.org/docs/3.0.2/samples/scale-options/grid.html
- 更改图例的颜色:https ://www.chartjs.org/docs/3.0.2/configuration/legend.html#legend-label-configuration
在图例标题框的情况下,我注意到它总是采用第一个元素的颜色。在轴的情况下,chart.js 支持的功能对我不起作用。它根本不打印 x 轴。
我尝试过的事情:
- 升级到chart.js 3.3.0 但我收到这样的错误:“”我使用3.0.2 的原因是因为它是3.0.0 版本中唯一适用于我的版本。
- 降级到 2.9.3/4。我无法更改框或轴线的颜色,但其余的工作正常。
- 使用包装器:https ://vue-chartjs.org/ 。它没有用
整个组件的代码:
<template>
<div class="container pa-3" fill-height fluid style="width: 100%">
<!-- We create the chart -->
<canvas id="myChart1" />
</div>
</template>
<script>
import Chart from "chart.js/auto";
export default {
name: "Chart",
components: {},
props: {},
data: () => ({
ctx: null,
myChart: null,
type: "bar",
data: {
labels: ["a", "b", "c", "d"],
datasets: [
{
data: [1, 2, 3, 4],
backgroundColor: ["#c30", "#e37609", "#ffda05", "#fffb05"],
},
],
},
options: {
plugins: {
legend: {
display: true,
labels: {
color: "#00a3fb",
},
},
},
scales: {
},
},
}),
methods: {
createChart: function () {
// destroy the previous graph
if (this.myChart != null) this.myChart.destroy();
// create a new one
this.ctx = document.getElementById("myChart1");
this.myChart = new Chart(this.ctx, {
type: this.type,
data: this.data,
options: this.options,
});
this.myChart.render();
},
},
destroyed() {},
mounted() {
this.createChart();
},
watch: {},
};
</script>
<style scoped>
</style>
为了使用它,您应该:
- 在部分中导入它
- 在组件部分声明它
<NameOfComponetGiven/>
通过标签调用它
任何帮助都会非常感激。非常感谢你。