Me gustaría cambiar el color de la fuente y el ancho del cuadro en mi gráfico, pero no funciona. Lo intenté de muchas maneras pero no puedo resolverlo.
También debe ser una mejor solución editar borderColor, pointRadius, etc. y luego configurarlo en cada etiqueta.
Perdón por mi pregunta tonta, soy principiante.
Aquí está mi componente gráfico:
<script> import { defineComponent } from 'vue' import { Line } from 'vue3-chart-v2' export default defineComponent({ name: 'ChanceChart', extends: Line, props: { chartData: { type: Object, required: true }, chartOptions: { type: Object, required: false, }, }, mounted () { this.renderChart(this.chartData, this.chartOptions) } }) </script>Y aquí está mi aplicación:
<template> <div id="chart"> <ChanceChart :chartData="chartData" /> </div> </template> <script> import ChanceChart from "../components/ChanceChart.vue"; export default { components: { ChanceChart }, computed: { chartData() { return { labels: this.enemysCards.map((x, index) => index + 1), datasets: [ { label: "Enemy's Chance", borderColor: "#1161ed", borderWidth: 2, pointRadius: 0, color: "#fff", data: this.enemysCards, defaultFontColor: "#fff", }, { label: "My Chance", borderColor: "#f87979", borderWidth: 2, pointRadius: 0, data: this.myCardsFilled, }, { label: "Enemy's Avarage", borderColor: "rgb(238, 255, 0)", borderWidth: 2, pointRadius: 0, data: this.avgArray, }, { label: "Enemy's Median", borderColor: "rgb(255, 0, 191)", borderWidth: 2, pointRadius: 0, data: this.medianArray, }, { label: "Standard Deviation", borderColor: "#fff", borderWidth: 2, pointRadius: 0, data: this.upDev, }, { label: "Standard Deviation", borderColor: "#fff", borderWidth: 2, pointRadius: 0, data: this.downDev, }, ], options: { plugins: { legend: { labels: { boxWidth: 0, font: { color: "#fff", }, }, }, }, }, }; }, },¿Alguien puede ayudarme?
Parece que no está proporcionando el chartOptions al incluir el componente ChanceChart . Debería ser algo como esto:
<ChanceChart :chartData="chartData" :chartOptions="chartOptions" />Al agregar la respuesta de @fscavo, no está pasando ninguna opción al método renderChart . Esperas un apoyo pero no lo pasas. En su lugar, define sus opciones en su campo de datos, lo cual es incorrecto. Por lo tanto, necesitará una propiedad calculada adicional. Para el código duplicado para cosas como lineWidht, punto de radio, también puede configurarlo en las opciones en la sección de elementos. Puede leer más sobre esoaquí en la documentación
computed: { chartOpts() { return { elements: { point: { radius: 0 }, , line: { borderWidth: 2 } }, plugins: { legend: { labels: { boxWidth: 0, font: { color: "#fff", }, }, }, }, } }, chartData() { return { labels: this.enemysCards.map((x, index) => index + 1), datasets: [{ label: "Enemy's Chance", borderColor: "#1161ed", color: "#fff", data: this.enemysCards, defaultFontColor: "#fff", }, { label: "My Chance", borderColor: "#f87979", data: this.myCardsFilled, }, { label: "Enemy's Avarage", borderColor: "rgb(238, 255, 0)", data: this.avgArray, }, { label: "Enemy's Median", borderColor: "rgb(255, 0, 191)", data: this.medianArray, }, { label: "Standard Deviation", borderColor: "#fff", data: this.upDev, }, { label: "Standard Deviation", borderColor: "#fff", data: this.downDev, }, ], }; }, <ChanceChart :chartData="chartData" :chartOptions="chartOptions" />