Невозможно изменить цвет шрифта и ширину поля на диаграмме

Question

Я хотел бы изменить цвет шрифта и ширину поля на моей диаграмме, но это не работает. Я много раз пробовал, но не могу решить.

Также должно быть лучшим решением отредактировать borderColor, pointRadius и т. д., а затем установить его на каждой метке.

Извините за мой глупый вопрос, я новичок.

Вот мой компонент диаграммы:

<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>

А вот и мое приложение:

<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",
                },
              },
            },
          },
        },
      };
    },
  },

Может кто-нибудь мне помочь?

javascript vue.js chart.js

0

Laboda Dániel 26 Янв 2022 в 17:53

Answer 1

Похоже, вы не предоставляете реквизит chartOptions при включении компонента ChanceChart. Должно быть что-то вроде этого:

<ChanceChart :chartData="chartData" :chartOptions="chartOptions" />

0

fscavo 26 Янв 2022 в 18:03

Спасибо за ваш ответ, но все еще не работает.

–

Laboda Dániel

26 Янв 2022 в 18:18

Answer 2

Добавляя ответ @fscavo, вы не передаете никаких параметров методу renderChart. Вы ожидаете поддержки, но не передаете ее. Вместо этого вы определяете свои параметры в поле данных, что неверно. Поэтому вам понадобится дополнительное вычисляемое свойство. Для дублирующего кода для таких вещей, как lineWidht, радиус точки, вы можете настроить это также в параметрах в разделе элемента. Подробнее об этом можно прочитать здесь в документации.

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" />

0

LeeLenalee 26 Янв 2022 в 19:32

Спасибо за ваши советы, но, к сожалению, это все еще не работает.

–

Laboda Dániel

26 Янв 2022 в 20:03

Невозможно изменить цвет шрифта и ширину поля на диаграмме

2 ответа

Похожие вопросы

Новые вопросы

javascript