移动端Pie Chart标签重叠问题求助

针对你用Chart.js 2.9.4实现的饼图在移动端标签重叠的问题，可通过以下几个方向优化：

1. 响应式字体大小 #

放弃固定fontSize:18，改用动态计算方式，根据屏幕宽度调整字体大小：

plugins: {
  labels: {
    // ...其他配置
    fontSize: function(context) {
      // 根据容器宽度计算，最小12px，最大18px
      const containerWidth = context.chart.canvas.offsetWidth;
      return Math.max(12, Math.min(18, containerWidth / 20));
    },
    // ...其他配置
  }
}

2. 拆分长标签为多行 #

将长标签手动拆分或自动处理为多行，避免单行过长：

手动拆分示例 #

var data = {
  datasets: [{/*...*/}],
  labels: [
    "Arts and\nCreativity",
    "Careers and\nEmployment",
    "Communities and\nSocial",
    "Culture and\nHeritage",
    "Learning and\nSkills",
    "Personal\nFinance",
    "Self-\nEnvironment",
    "Wellbeing"
  ]
};

自动拆分示例 #

plugins: {
  labels: {
    render: function(args) {
      const label = args.label;
      // 按空格拆分，超过指定长度就换行
      if (label.length > 10) {
        return label.split(' ').join('\n');
      }
      return label;
    },
    // ...其他配置
  }
}

3. 调整标签位置与间距 #

增加标签与饼图的距离，避免挤压：

plugins: {
  labels: {
    // ...其他配置
    position: 'outside',
    padding: 10, // 标签与饼图的间距
    outsidePadding: 5, // 标签与容器边缘的间距
    // ...其他配置
  }
}

4. 确保图表容器响应式 #

给canvas容器设置响应式样式，同时开启Chart.js响应式配置：

#myChart {
  width: 100% !important;
  max-width: 400px; /* 限制桌面端最大宽度 */
  height: auto !important;
}

在Chart配置中添加：

options: {
  responsive: true,
  maintainAspectRatio: false, // 允许高度自适应
  // ...其他配置
}

5. 优化自定义反转标签插件 #

在pluginLabelsExtension中针对移动端调整标签渲染的半径，减少重叠：

Label.prototype.renderArcLabel = function(label, renderInfo){
  if(renderInfo.view.reverse && typeof label === 'string'){
    var ctx = this.ctx;
    // 移动端增大半径，拉开标签距离
    var radius = window.innerWidth < 768 ? renderInfo.radius + 10 : renderInfo.radius;
    var view = renderInfo.view;
    // ...其余代码保持不变
  } else {
    _renderArcLabel.call(this, label, renderInfo)
  }
}

修改后的完整配置示例 #

$(document).ready(function() {
  var data = {
    datasets: [{
      data: [125, 125, 125, 125, 125, 125, 125, 125],
      backgroundColor: ["#FE4D42","#FFD405","#58E152","#00D59F","#8B7DFF","#E85FED","#F71663","#4F94FF"]
    }],
    labels: [
      "Arts and\nCreativity",
      "Careers and\nEmployment",
      "Communities and\nSocial",
      "Culture and\nHeritage",
      "Learning and\nSkills",
      "Personal\nFinance",
      "Self-\nEnvironment",
      "Wellbeing"
    ]
  };

  var labels_url = {
    "Arts and Creativity" : "arts-and-creativity",
    "Careers and Employment" : "careers-and-employment",
    "Communities and Social" : "communities-and-social",
    "Culture and Heritage" : "culture-and-heritage",
    "Wellbeing" : "health",
    "Learning and Skills" : "learning-and-skills",
    "Personal Finance" : "personal-finance",
    "Self-Environment" : "self-environment"
  };

  var canvas = document.getElementById("myChart");
  var ctx = canvas.getContext("2d");
  var myNewChart = new Chart(ctx,{
    type: 'pie',
    data: data,
    options: {
      responsive: true,
      maintainAspectRatio: false,
      legend: {
        display: false,
      },
      plugins: {
        labels: {
          render: 'label',
          arc: true,
          fontColor:["#FF7805","#0854A3","#14A400","#048A7D","#502788","#F200F2","#FF0068","#000962"],
          reverse: [false, false, true, true, true, true, false, false],
          fontSize: function(context) {
            const containerWidth = context.chart.canvas.offsetWidth;
            return Math.max(12, Math.min(18, containerWidth / 20));
          },
          position: 'outside',
          padding: 10,
          outsidePadding: 5
        }
      }
    },
    plugins:[
      pluginLabelsExtension
    ]
  });

  canvas.onclick = function(evt) {
    var activePoints = myNewChart.getElementsAtEvent(evt);
    if (activePoints[0]) {
      var chartData = activePoints[0]['_chart'].config.data;
      var idx = activePoints[0]['_index'];
      // 还原换行标签为原始格式，匹配url映射
      var label = chartData.labels[idx].replace('\n', ' ');
      var url = "https://www.maximiseme.co.uk/" + labels_url[label];
      window.location.href = url;
    }
  };
});

内容的提问来源于stack exchange，提问作者ajit singh