Chartjs圖例仍然不可見,即使將其設為true
P粉595605759
P粉595605759 2023-09-14 18:38:17
0
1
562

我對ChartJS相對較新,我正在尋找一種在我的環形圖上顯示標籤的方法。我嘗試在選項中將圖例的可見性設為true,但仍然不起作用。

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

全部回覆(1)
P粉041758700

預設情況下應該會顯示圖例。如果沒有顯示,我假設您正在使用treeshaking,並且沒有像這樣導入和註冊圖例外掛:

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

Chart.register(Legend);

或您可以透過讓chart.js匯入和註冊所有內容來確保您沒有遺漏任何內容:

import Chart from 'chart.js/auto';
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板