Highcharts金字塔图表标签加粗且显示不全，如何修复？

问题描述 #

使用Highcharts创建金字塔图表，数据正常渲染，但存在两个样式问题：

• 金字塔各分段的名称被强制加粗
• 名称无法完整显示
  此前功能正常，推测是Highcharts版本更新导致的问题。

原代码：

risk_pyramid_chart = new Highcharts.Chart({
    "chart":{
        "type":"pyramid",
        "marginRight":"100",
        "renderTo":"risk_pyramid_chart"
    },
    "title":{"text":null},
    "credits":{"enabled":false},
    "plotOptions":{
        "series":{
            "dataLabels":{
                "enabled":true,
                "format":"<b>{point.name}</b> ({point.y:,.0f})",
                "color":"(Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'",
                "softConnector":true
            }
        },
        "pyramid":{"colors":["orange","orangered"]}
    },
    "legend":{"enabled":false},
    "series":[{
        "name":"Risk Pyramid",
        "data":[["Medium",3],["High",23]]
    }]
});

修复方案 #

1. 取消名称加粗 #

直接修改plotOptions.series.dataLabels.format，移除包裹{point.name}的<b>标签：

"format":"{point.name} ({point.y:,.0f})"

2. 确保名称完整显示 #

• 将chart.marginRight的字符串值"100"改为数值类型150（可根据名称长度调整数值大小），增加右侧边距给标签预留空间
• 可选：给dataLabels添加style配置，设置whiteSpace: 'nowrap'防止文本换行，进一步保障完整显示

修改后的完整代码：

risk_pyramid_chart = new Highcharts.Chart({
    "chart":{
        "type":"pyramid",
        "marginRight":150, // 改为数值类型并增大边距
        "renderTo":"risk_pyramid_chart"
    },
    "title":{"text":null},
    "credits":{"enabled":false},
    "plotOptions":{
        "series":{
            "dataLabels":{
                "enabled":true,
                "format":"{point.name} ({point.y:,.0f})", // 移除加粗标签
                "color":"(Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'",
                "softConnector":true,
                "style": {
                    "whiteSpace": "nowrap" // 可选：防止文本换行
                }
            }
        },
        "pyramid":{"colors":["orange","orangered"]}
    },
    "legend":{"enabled":false},
    "series":[{
        "name":"Risk Pyramid",
        "data":[["Medium",3],["High",23]]
    }]
});

内容的提问来源于stack exchange，提问作者Josh Sokol