Highcharts Treegraph：如何设置每个节点的样式

全局与单个节点样式配置示例 #

Treegraph的节点样式可通过plotOptions.treegraph.node统一配置全局样式，也能在series.data中为单个节点单独定义。以下是可直接复用的完整代码：

Highcharts.chart('container', {
    series: [{
        type: 'treegraph',
        data: [
            {
                id: 'root',
                name: '根节点',
                // 单个节点自定义样式（会覆盖全局配置）
                node: {
                    fillColor: '#ffffff',
                    lineWidth: 2,
                    lineColor: '#2d3436',
                    shadow: {
                        color: 'rgba(0,0,0,0.35)',
                        offsetX: 3,
                        offsetY: 3,
                        opacity: 0.7,
                        width: 5
                    }
                }
            },
            { id: 'child1', parent: 'root', name: '子节点1' },
            { id: 'child2', parent: 'root', name: '子节点2' },
            { id: 'grandchild', parent: 'child1', name: '孙节点' }
        ],
        plotOptions: {
            treegraph: {
                node: {
                    // 全局节点默认样式
                    lineWidth: 1,
                    lineColor: '#636e72',
                    shadow: {
                        color: 'rgba(0,0,0,0.2)',
                        offsetX: 2,
                        offsetY: 2,
                        opacity: 0.5,
                        width: 3
                    }
                }
            }
        }
    }]
});

核心配置项解析 #

• node.lineWidth: 设置节点边框的像素宽度
• node.lineColor: 定义边框颜色，支持十六进制、RGB、RGBA等格式
• node.shadow: 阴影配置对象，包含：
  • color: 阴影的颜色值
  • offsetX: 阴影的水平偏移距离
  • offsetY: 阴影的垂直偏移距离
  • opacity: 阴影的透明度（范围0-1）
  • width: 阴影的模糊半径

样式优先级 #

单个节点的node配置会优先于全局plotOptions中的设置，方便对特殊节点做差异化样式处理。

文档参考提示 #

Treegraph的节点配置继承自Highcharts通用的Series.NodeOptions接口，相关细节可在Highcharts官方API的核心节点配置部分找到。

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