将MongoDB行数据转换为Highcharts Sunburst图表数据求助

你需要把从MongoDB获取的扁平行数据转换成Highcharts Sunburst所需的嵌套层级结构，以下是具体实现方案：

先处理数据字段不一致问题 #

注意到你的数据里第一条用的是country键，其余用的是first，第一步先统一字段，确保层级路径一致。

核心转换逻辑 #

通过遍历原始数据，逐步构建层级映射（避免重复创建父节点），最终生成Sunburst要求的嵌套结构。层级路径为：globalId -> country -> state -> city -> mode，其中mode是带数值的叶子节点。

完整代码实现（JavaScript） #

// 原始数据
const rawData = [
    {
        "globalId": "Chart Global",
        "country": "India",
        "state": "Gujarat",
        "city": "Vadodara",
        "mode": "traffic",
        "value": 2.9
    },
    {
        "globalId": "Chart Global",
        "first": "India",
        "state": "Rajsthan",
        "city": "Jaipur",
        "mode": "traffic",
        "value": 2.9
    },
    {
        "globalId": "Chart Global",
        "first": "India",
        "state": "Delhi",
        "city": "Delhi",
        "mode": "traffic",
        "value": 100
    },
    {
        "globalId": "Chart Global",
        "first": "India",
        "state": "Delhi",
        "city": "Delhi",
        "mode": "population",
        "value": 2000
    },
    {
        "globalId": "Chart Global",
        "first": "India",
        "state": "Delhi",
        "city": "Delhi",
        "mode": "animals",
        "value": 5
    },
    {
        "globalId": "Chart Global",
        "first": "India",
        "state": "Delhi",
        "city": "Delhi",
        "mode": "birds",
        "value": 0
    },
    {
        "globalId": "Chart Global",
        "first": "India",
        "state": "Delhi",
        "city": "Delhi",
        "mode": "trees",
        "value": 0
    }
];

// 1. 统一字段：把first替换为country，删除多余字段
const normalizedData = rawData.map(item => ({
    ...item,
    country: item.country || item.first
})).map(item => {
    delete item.first;
    return item;
});

// 2. 构建Sunburst嵌套结构
function buildSunburstData(data) {
    const rootMap = new Map();
    
    data.forEach(item => {
        const { globalId, country, state, city, mode, value } = item;
        
        // 创建/获取根节点
        if (!rootMap.has(globalId)) {
            rootMap.set(globalId, { name: globalId, children: [] });
        }
        const root = rootMap.get(globalId);
        
        // 创建/获取国家节点
        let countryNode = root.children.find(child => child.name === country);
        if (!countryNode) {
            countryNode = { name: country, children: [] };
            root.children.push(countryNode);
        }
        
        // 创建/获取州节点
        let stateNode = countryNode.children.find(child => child.name === state);
        if (!stateNode) {
            stateNode = { name: state, children: [] };
            countryNode.children.push(stateNode);
        }
        
        // 创建/获取城市节点
        let cityNode = stateNode.children.find(child => child.name === city);
        if (!cityNode) {
            cityNode = { name: city, children: [] };
            stateNode.children.push(cityNode);
        }
        
        // 添加叶子节点（mode + value）
        cityNode.children.push({ name: mode, value });
    });
    
    return Array.from(rootMap.values());
}

// 生成适配数据
const sunburstData = buildSunburstData(normalizedData);
console.log(JSON.stringify(sunburstData, null, 2));

转换后的结果示例 #

[
  {
    "name": "Chart Global",
    "children": [
      {
        "name": "India",
        "children": [
          {
            "name": "Gujarat",
            "children": [
              {
                "name": "Vadodara",
                "children": [
                  {
                    "name": "traffic",
                    "value": 2.9
                  }
                ]
              }
            ]
          },
          {
            "name": "Rajsthan",
            "children": [
              {
                "name": "Jaipur",
                "children": [
                  {
                    "name": "traffic",
                    "value": 2.9
                  }
                ]
              }
            ]
          },
          {
            "name": "Delhi",
            "children": [
              {
                "name": "Delhi",
                "children": [
                  {
                    "name": "traffic",
                    "value": 100
                  },
                  {
                    "name": "population",
                    "value": 2000
                  },
                  {
                    "name": "animals",
                    "value": 5
                  },
                  {
                    "name": "birds",
                    "value": 0
                  },
                  {
                    "name": "trees",
                    "value": 0
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]

在Highcharts中使用 #

将生成的sunburstData直接传入series.data配置即可，示例配置：

Highcharts.chart('container', {
    series: [{
        type: 'sunburst',
        data: sunburstData,
        allowDrillToNode: true,
        cursor: 'pointer',
        dataLabels: {
            format: '{point.name}',
            filter: {
                property: 'innerArcLength',
                operator: '>',
                value: 16
            }
        },
        levels: [{
            level: 1,
            levelIsConstant: false,
            dataLabels: {
                filter: {
                    property: 'outerArcLength',
                    operator: '>',
                    value: 64
                }
            }
        }, {
            level: 2,
            colorByPoint: true
        }, {
            level: 3,
            colorVariation: {
                key: 'brightness',
                to: -0.5
            }
        }, {
            level: 4,
            colorVariation: {
                key: 'brightness',
                to: 0.5
            }
        }]
    }]
});

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