Chart.js饼图仅展示占比大于5%的百分比标签实现方法

问题描述 #

基于Chart.js开发饼图组件时，占比较小的扇区上的百分比标签显示拥挤、辨识度极低，影响页面美观，需要优化小占比项的标签显示逻辑。

需求规则 #

• 所有数据项（含占比低于5%的项）均保留在饼图中正常展示，不做隐藏、合并处理
• 仅占比大于5%的扇区显示对应的百分比文本标签
• 占比不足5%的扇区隐藏对应的百分比标签

当前实现代码 #

<!DOCTYPE html>
<html>
  <head>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
     -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
  </head>
  <body>
  <canvas id="myChart1" width="90" height="90" style="width:100%;max-width:650px"></canvas>
  <script>
        function getColors(length) {
        let pallet = ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"];
        let colors = [];
  
        for (let i = 0; i < length; i++) {
          colors.push(pallet[i % (pallet.length - 1)]);
        }
  
        return colors;
      }
      var xValues = ['Multimeter', 'UniBox', 'Toby', 'Cables', 'Test','nokia','samsung','Jio','honda'];
      var yValues = [2, 100, 223, 84, 197,3,8,7,50];
      var barColors = getColors(xValues.length);
      var ctx = document.getElementById("myChart1").getContext('2d');
     var myChart = new Chart(ctx, {
     type: 'pie',
     data: {
      labels: xValues,
      datasets: [{
        backgroundColor: barColors,
        data: yValues
      }]
     },
    options:{
      tooltips: {
        enabled: true
      },
      plugins: {
        datalabels: {
          formatter: (value, ctx) => {
    
            let sum = ctx.dataset._meta[0].total;
            let percentage = (value * 100 / sum).toFixed(2) + "%";
            return percentage;
    
    
          },
          color: '#fff',
        }
      },
      "legend": {
        "display": true,
        "labels": {
          "fontSize": 20,
        }
      },
      title: {
        display: true,
        fontColor: 'rgb(255, 0, 0)',
        fontSize: 25,
        text: "Current Inventory Received"
      }
    }
  });
  </script>
</body>

</html>

当前运行效果 #

优化方案 #

直接修改plugins.datalabels配置项，新增display属性做占比阈值判断即可，无需改动其他业务逻辑，该配置完全兼容当前使用的Chart.js 2.7.2 + chartjs-plugin-datalabels 0.7.0版本，不需要升级依赖。

修改后的datalabels配置代码如下：

plugins: {
  datalabels: {
    // 控制标签显示逻辑
    display: (value, ctx) => {
      const sum = ctx.dataset._meta[0].total;
      const percentage = value * 100 / sum;
      // 阈值设置为5%，可根据业务需求自行调整数值
      return percentage >= 5;
    },
    formatter: (value, ctx) => {
      const sum = ctx.dataset._meta[0].total;
      const percentage = (value * 100 / sum).toFixed(2) + "%";
      return percentage;
    },
    color: '#fff',
  }
}

优化后小占比扇区不再显示重叠拥挤的标签，鼠标悬浮时仍可通过默认tooltip查看所有扇区的完整数据，不影响原有交互逻辑。

内容的提问来源于stack exchange，提问作者def init