Метки всегда видны в Vue Chart JS

Я настраиваю диаграмму в приложении JavaScript с использованием Vue.js, и мне нужно, чтобы метки и информация о диаграмме всегда были видны без необходимости наведения мыши.

Изображение графика

Код моей диаграммы выглядит так:

<template>
  <Pie :data = "ameacas.chartData" :options = "ameacas.chartOptions" style = "width: 300px; height: 300px;" />
</template>

<script lang = "ts">
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
import { Pie } from 'vue-chartjs'

ChartJS.register(ArcElement, Tooltip, Legend)

export default {
  name: 'TdPie',
  components: {
    Pie
  },
  props: {
    threats: {
      type: Array,
      required: true
    }
  },
  computed: {
    ameacas: function () {
      return {
        chartData: {
          labels: ['Alta', 'Média', 'Baixa'],
          datasets: [
            {
              backgroundColor: ['#CC092F', '#DD3820', '#FCBA03'],
              data: [this.getHighThreat, this.getMediumThreat, this.getLowThreat]
            }
          ]
        },
        chartOptions: {
          responsive: true,
          maintainAspectRatio: false
        }
      }
    },
    getHighThreat: function () {
      return this.threats
        .filter(threat => threat.severity && threat.severity.toLowerCase() == 'high')
        .length;
    },
    getMediumThreat: function () {
      return this.threats
        .filter(threat => threat.severity && threat.severity.toLowerCase() == 'medium')
        .length;
    },
    getLowThreat: function () {
      return this.threats
        .filter(threat => threat.severity && threat.severity.toLowerCase() == 'low')
        .length;
    }
  }
}
</script>

Я уже пробовал контент по этой ссылке и другим материалам сообщества.

Вы пробовали chartjs-plugin-datalabels ?

— 03.04.2024 19:45

Это сработало! Спасибо за ссылку. Я не знал, как настроить плагин, и эта ссылка мне очень помогла.

— 03.04.2024 20:19

javascript vue.js chart.js

03.04.2024 19:41

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я настроил «chartjs-plugin-datalabels», и код получился таким:

<template>
  <Pie :data = "ameacas.chartData" :options = "ameacas.chartOptions" style = "width: 300px; height: 300px;" />
</template>

<script lang = "ts">
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
import { Pie } from 'vue-chartjs'
import ChartDataLabels from 'chartjs-plugin-datalabels';

ChartJS.register(ArcElement, Tooltip, Legend)
ChartJS.register(ChartDataLabels);

export default {
  name: 'TdPie',
  components: {
    Pie
  },
  props: {
    threats: {
      type: Array,
      required: true
    }
  },
  computed: {
    ameacas: function () {
      return {
        chartData: {
          labels: ['Alta', 'Média', 'Baixa'],
          datasets: [
            {
              backgroundColor: ['#CC092F', '#DD3820', '#FCBA03'],
              data: [this.getHighThreat, this.getMediumThreat, this.getLowThreat]
            }
          ]
        },
        chartOptions: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            datalabels: {
              backgroundColor: function (context) {
                return context.dataset.backgroundColor;
              },
              borderColor: 'white',
              borderRadius: 25,
              borderWidth: 2,
              color: 'white',
              padding: 6,
              formatter: Math.round
            }
          }
        }
      }
    },
    getHighThreat: function () {
      return this.threats
        .filter(threat => threat.severity && threat.severity.toLowerCase() == 'high')
        .length;
    },
    getMediumThreat: function () {
      return this.threats
        .filter(threat => threat.severity && threat.severity.toLowerCase() == 'medium')
        .length;
    },
    getLowThreat: function () {
      return this.threats
        .filter(threat => threat.severity && threat.severity.toLowerCase() == 'low')
        .length;
    }
  }
}
</script>

И вот результат:

Новое изображение графика

03.04.2024 20:22