Chartjs图例即使设置为true也不可见

gstyhher  于 2023-08-05  发布在  Chart.js
关注(0)|答案(1)|浏览(195)

我对chartJS相当陌生,我正在寻找一种在我的甜甜圈图表上显示标签的方法。我尝试在选项中将图例的可见性设置为true,但仍然不起作用。

var data = [{
        data: [successfulBuildsCount, failureBuildsCount],
        labels: ["Successes", "Failures"],
        backgroundColor: [
          "green",
          "red"
        ],
        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
      });

字符串

fdx2calv

fdx2calv1#

默认情况下应显示图例。如果它没有显示,我假设你正在使用treeshaking,而不是像这样导入和注册图例插件:

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

Chart.register(Legend);

字符串
或者你可以让chart.js导入并注册所有内容,以确保不会遗漏任何内容:

import Chart from 'chart.js/auto';

相关问题