La légende Chartjs n'est toujours pas visible même après l'avoir définie sur true
P粉595605759
P粉595605759 2023-09-14 18:38:17
0
1
554

Je suis relativement nouveau sur ChartJS et je cherche un moyen d'afficher des étiquettes sur mon graphique en beignet. J'ai essayé de définir la visibilité de la légende sur true dans les options mais cela ne fonctionne toujours pas.

var data = [{
        data: [successfulBuildsCount, failureBuildsCount],
        labels: ["成功", "失败"],
        backgroundColor: [
          "绿色",
          "红色"
        ],
        borderColor: "#fff"
      }];

      var options = {
        legend: { display: true, },
        title: {
          display: true,
        },

        plugins: {
          datalabels: {
            formatter: (value, ctx) => {

              let sum = 0;
              let dataArr = ctx.chart.data.datasets[0].data;
              dataArr.map(data => {
                sum += data;
              });
              let percentage = (value * 100 / sum).toFixed(2) + "%";
              return percentage;


            },
            color: '#fff',
          }
        }
      };


      var ctx = document.getElementById("chartContainer");
      var myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
          datasets: data
        },
        options: options
      });
P粉595605759
P粉595605759

répondre à tous(1)
P粉041758700

La légende doit être affichée par défaut. S'il n'apparaît pas, je suppose que vous utilisez le TreeShaking et que vous n'avez pas importé et enregistré le plugin de légende comme ceci :

import { Chart, Legend } from 'chart.js';

Chart.register(Legend);

Ou vous pouvez vous assurer de ne rien manquer en laissant chart.js importer et tout enregistrer :

import Chart from 'chart.js/auto';
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal