如何在 Chartjs 的圆环图之外显示标签？答案

【问题标题】：How to show lables just outside the the doughnut chart in Chartjs?如何在 Chartjs 的圆环图之外显示标签？
【发布时间】：2020-11-17 22:27:37
【问题描述】：

我已经为下面的圆环图编写了代码：-


      <div class="container panel-body">
        <canvas id="myChart"></canvas>
      </div>


    <script>
      let myChart = document.getElementById("myChart").getContext("2d");

      let massPopChart = new Chart(myChart, {
        type: "doughnut", // bar, horizontalBar, pie, line, doughnut, radar, polarArea
        data: {
          labels: [
           "Students",
           "Instructor",
           "Admins"
         ],
          datasets: [
            {
              data: [60, 30, 10],
              backgroundColor:['#1F78B4','#A6CEE3','#B2DF8A'],
              borderWidth: 0,
            },
          ],
        },
        options: {
          legend: {
                        display: false,
                    },
          layout: {
            padding: {
              left: 200,
              right: 800,
              bottom: 300,
              top: 0,
            },
          },
          cutoutPercentage: 85,
          
        }
      });
    
      Chart.pluginService.register({
  beforeDraw: function(chart) {
    var width = chart.chart.width,
        height = chart.chart.height,
        ctx = chart.chart.ctx;

    ctx.restore();
    var fontSize = 3;
    ctx.font = fontSize + "em sans-serif";
    ctx.textBaseline = "middle";

    var text = "75%",
        textX = 235,
        textY = 430;

    ctx.fillText(text, textX, textY);
    ctx.save();
  }
});
    </script>
  </body>
</html>

此图表一切正常，但我需要在图表外部显示标签，如下图所示：- example image.

我尝试过使用图例并安排其位置，但没有帮助。我需要在图表的外线显示图表的标签。我该怎么做？

Js 小提琴：https://jsfiddle.net/1aedfpt5/15/

【问题讨论】：

标签： javascript charts chart.js

【解决方案1】：

您可以使用 chartjs-plugin-piechart-outlabels 插件在外部显示数据标签。您需要使用较新的 2.8.0 版本的 chartjs 并使用 chartjs-plugin-datalabels 和 chartjs-plugin-piechart-outlabels 插件 cdn's 使其工作.

  <div class="container panel-body">
    <canvas id="myChart"></canvas>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0/dist/chartjs-plugin-datalabels.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-piechart-outlabels"></script>

您可以在图表选项中设置外标签的样式 => 插件 => 外标签

let myChart = document.getElementById("myChart").getContext("2d");

      let massPopChart = new Chart(myChart, {
        type: "doughnut", // bar, horizontalBar, pie, line, doughnut, radar, polarArea
        data: {
          labels: [
           "Students",
           "Instructor",
           "Admins"
         ],
          datasets: [
            {
              data: [60, 30, 10],
              backgroundColor:['#1F78B4','#A6CEE3','#B2DF8A'],
              borderWidth: 0,
            },
          ],
        },
        options: {
          legend: {
                        display: false,
                    },
          layout: {
            padding: {
              left: 200,
              right: 200,
              bottom: 300,
              top: 0,
            },
          },
          cutoutPercentage: 85,
          plugins: {
          legend: false,
            datalabels:{
                display:false
            },
            outlabels: {
               text: '%l %p',
               color: 'white',
               stretch: 20,
               font: {
                   resizable: true,
                   minSize: 12,
                   maxSize: 18
               }
            }
          }          
        },

      });
    
      Chart.pluginService.register({
  beforeDraw: function(chart) {
    var width = chart.chart.width,
        height = chart.chart.height,
        ctx = chart.chart.ctx;

    ctx.restore();
    var fontSize = 3;
    ctx.font = fontSize + "em sans-serif";
    ctx.textBaseline = "middle";

    var text = "75%",
        textX = 245,
        textY = 140;
    ctx.fillText(text, textX, textY);
    ctx.save();
  }
});

【讨论】：