Fusion Charts饼图标签文本换行问题解决方案咨询

针对饼图标签过长无法一行容纳的问题，用以下几种方法解决：

• 自动换行标签
  在chart配置里添加labelDisplay和labelWidth参数，超过指定宽度的标签会自动换行：

  "labelDisplay": "wrap",
  "labelWidth": "120" // 可根据实际布局调整宽度值
  

• 自动调整标签位置避免重叠
  开启标签溢出管理，让图表自动调整标签位置，避免拥挤重叠：

  "manageLabelOverflow": "1",
  "labelPosition": "outside" // 强制标签显示在饼图外侧，提升可读性
  

• 缩小标签字体
  如果是字体过大导致空间不足，直接调整标签字号：

  "labelFontSize": "11" // 默认字号一般为12，按需调小
  

• Tooltip显示完整标签
  若不想让标签占用过多空间，可给数据项添加tooltext字段，饼图显示短标签，鼠标hover时显示完整内容：

  // 修改membersInvestedSectorWiseData中的数据项结构
  {
    "label": "短标签", // 饼图上显示的精简文本
    "value": "150",
    "tooltext": "完整长标签：这里是原本过长的文本内容"
  }
  

修改后的完整示例代码 #

var initMemberInvestedSectorWiseCharts = function (membersInvestedSectorWiseData) {
    FusionCharts.ready(function(){
        var chartObj = new FusionCharts({
                type: 'pie2d',
                renderAt: 'members-invested-sectorwise',
                width: '100%',
                height: '400',
                dataFormat: 'json',
                dataSource: {
                    "chart": {
                        "caption": "",
                        "subCaption": "",
                        "numberPrefix": "",
                        "showPercentInTooltip": "0",
                        "decimals": "1",
                        "useDataPlotColorForLabels": "1",
                        "theme": "fusion",
                        // 新增长标签处理配置
                        "labelDisplay": "wrap",
                        "labelWidth": "120",
                        "manageLabelOverflow": "1",
                        "labelPosition": "outside"
                    },
                    "data": membersInvestedSectorWiseData
                }
            }
        );
        chartObj.render();
    });
}

可以根据实际布局情况组合使用以上配置，比如先尝试自动换行+位置调整，若仍有问题再配合缩小字体或Tooltip方案。

内容的提问来源于stack exchange，提问作者Mihir Chichria