Javascript ChartJS-如何在饼图和图例之间添加文本

大家好，我想知道如何添加下面的图片一样的百分比。 我想添加包含每个数据百分比的文本。 它将介于饼图和图例之间。 如何添加文字，或者通过在图例上方添加文字来更改图例的样式

我到目前为止所做的事情

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>

JS

* {
  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;
}

// 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"
    }
  }
});

//假数据-总计46946
变量数据集=[
{标签：“移动”，计数：18778，颜色：#72bbe1}，
{标签：“桌面”，计数：28168，颜色：#3ea6dd}
];
var dataTotal=dataset.reduce（（acc，data）=>（acc+=data.count），0）；
var counter=document.getElementById（“计数器”）；
counter.innerHTML=`
${dataTotal}
活动用户
在过去5分钟内
`；
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
var myChart=新图表（ctx{
键入：“馅饼”，
数据：{
标签：[数据集[0]。label.toUpperCase（），数据集[1]。label.toUpperCase（），
数据集：[
{
数据：[数据集[0]。计数，数据集[1]。计数]，
背景颜色：[数据集[0]。颜色，数据集[1]。颜色]，
边框宽度：1
}
]
},
选项：{
工具提示：{
回调：{
标签：函数（工具提示项、数据）{
让allData=data.datasets[tooltipItem.datasetIndex].data；
让sumData=allData.reduce（（memo，data）=>（memo+=data），0）；
让tooltipLabel=data.labels[tooltipItem.index]；
让tooltipData=allData[tooltipItem.index]；
设tooltipPercentageCalc=（tooltipData/sumData）*100；
让tooltipPercentage=`${tooltipPercentageCalc.toFixed（1）}%`；
返回`${tooltipLabel}:${tooltipData}（${tooltipPercentage}）`；
}
}
},
图例：{
显示：对，
标签：{
usePointStyle:true，
文字：“你好，世界”，
fontColor:“黑色”，
尺寸：15
},
位置：“底部”
}
}
});

您可以使用过滤器选项自定义标签

下面是一个例子

  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"
    }

图例：{
显示：对，
标签：{
usePointStyle:true，
文字：“你好，世界”，
fontColor:“黑色”，
尺寸：15，
过滤器：函数（legendItem、数据）{
让labels=data.labels，dataset=data.dataset[0].data；
for（设i=0；i