ChartJS - 如何在餅圖和圖例之間添加文本

Question

大家好，我想知道如何添加如下圖所示的百分比。 我想添加包含每個數據百分比的文本。 它將介於餅圖和圖例之間。 如何添加文本或通過在圖例上方添加文本來更改圖例樣式。

到目前為止我所做的

HTML

<div class="block__chart">
  <div id="counter"></div>
  <canvas id="myChart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>

CSS

* {
  padding: 0;
  margin: 0;
  font-family: "Montserrat", sans-serif;
}

.block__chart {
  width: 100%;
  background-color: #eee;

  padding: 2em;
  display: flex;
  flex-direction: column;
}

#myChart {
  width: 100%;
  margin: 1em 0;
}

canvas {
  width: 452px;
}

#counter {
  text-align: center;
  font-size: 2em;
  font-weight: 700;
  color: #007cbd;

  p {
    color: black;
    font-weight: 400;
  }
}
.activeUser {
  font-size: 20px;
}
.lastFiveMins {
  font-size: 10px;
}

JS

// Fake Data - Total 46946
var dataset = [
  { label: "Mobile", count: 18778, color: "#72bbe1" },
  { label: "Desktop", count: 28168, color: "#3ea6dd" }
];
var dataTotal = dataset.reduce((acc, data) => (acc += data.count), 0);

var counter = document.getElementById("counter");
counter.innerHTML = `
  ${dataTotal} 
  <p class="activeUser">ACTIVE USER</p>
  <p class="lastFiveMins">IN THE LAST 5 MINUTES</p>`;

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
  type: "pie",
  data: {
    labels: [dataset[0].label.toUpperCase(), dataset[1].label.toUpperCase()],
    datasets: [
      {
        data: [dataset[0].count, dataset[1].count],
        backgroundColor: [dataset[0].color, dataset[1].color],
        borderWidth: 1
      }
    ]
  },
  options: {
    tooltips: {
      callbacks: {
        label: function (tooltipItem, data) {
          let allData = data.datasets[tooltipItem.datasetIndex].data;
          let sumData = allData.reduce((memo, data) => (memo += data), 0);

          let tooltipLabel = data.labels[tooltipItem.index];
          let tooltipData = allData[tooltipItem.index];
          let tooltipPercentageCalc = (tooltipData / sumData) * 100;
          let tooltipPercentage = `${tooltipPercentageCalc.toFixed(1)}%`;

          return `${tooltipLabel} : ${tooltipData} (${tooltipPercentage})`;
        }
      }
    },
    legend: {
      display: true,
      labels: {
        usePointStyle: true,
        text: "Hello World",
        fontColor: "black",
        fontSize: 15
      },
      position: "bottom"
    }
  }
});

Answer 1

您可以使用過濾器選項來自定義標簽

下面的例子

  legend: {
      display: true,
      labels: {
        usePointStyle: true,
        text: "Hello World",
        fontColor: "black",
        fontSize: 15,
        filter: function(legendItem, data) {
                let labels = data.labels, datasets = data.datasets[0].data;
                for(let i=0;i<labels.length;i++){
                if(labels[i].indexOf(legendItem.text)!=-1){
                let t = legendItem.text;
                legendItem.text = t+' : '+datasets[i] + '%';
                break;
                }
            }
            return legendItem;
            },

      },
      position: "bottom"
    }