如何在Highcharts树状图中显示值为0的数据信息

这个问题是Highcharts treemap的默认行为导致的——它会自动过滤掉value为0的节点，因为这类节点的计算尺寸为0，默认不会渲染出来。要让value为0的节点（比如你的A节点）显示，只需要调整两个关键配置：

具体解决方案 #

• 关闭隐藏点忽略机制：在plotOptions.treemap中设置ignoreHiddenPoint: false，告诉Highcharts不要忽略那些因value为0被标记为隐藏的节点。
• 设置最小节点尺寸：添加minSize属性，给value为0的节点指定一个可见的最小尺寸（可以是百分比或固定像素值），确保节点能被渲染出来。

完整代码示例 #

Highcharts.chart('container', {
    series: [{
        type: 'treemap',
        layoutAlgorithm: 'squarified',
        plotOptions: {
            treemap: {
                ignoreHiddenPoint: false,
                minSize: '10%' // 也可以用固定像素，比如 50
            }
        },
        data: [{
            name: 'A',
            value: 0,
            colorValue: 1
        }, {
            name: 'B',
            value: 6,
            colorValue: 2
        }, {
            name: 'C',
            value: 4,
            colorValue: 3
        }]
    }]
});

替代方案（单独指定节点大小） #

如果你只想给特定的value为0的节点设置大小，也可以直接在数据项中添加size属性：

data: [{
    name: 'A',
    value: 0,
    colorValue: 1,
    size: 50 // 给A节点固定设置50像素的大小
}, {
    name: 'B',
    value: 6,
    colorValue: 2
}, {
    name: 'C',
    value: 4,
    colorValue: 3
}]

这样调整后，你的A节点就能和B、C节点一起正常显示在树状图里了。

内容的提问来源于stack exchange，提问作者Sathish Kotha