如何为基于SQL动态数据的Anychart旭日图各层级设置不同颜色？

嘿，这个需求其实很好实现，结合Anychart旭日图的特性和你动态从SQL取数的场景，我给你整理了两种实用方案，你可以根据自己的需求选择：

方案1：按层级索引统一设置颜色 #

这是最直接的方式——给每个层级（比如你说的第1层级）绑定固定颜色，不管数据怎么动态加载，只要层级对应就会自动应用。

Anychart的旭日图中，节点的层级是从0开始计数的（根节点为层级0，根节点下的第一层是层级1，以此类推），你可以通过getLevel()方法获取当前节点的层级，再对应分配颜色：

// 先定义好各层级对应的颜色数组
const levelColorMap = [
  '#ffffff', // 根节点（层级0）
  '#1f77b4', // 你要的第1层级蓝色
  '#ff7f0e', // 第2层级颜色
  '#2ca02c'  // 第3层级颜色
];

// 初始化旭日图后，设置填充规则
chart.normal().fill(function() {
  // 获取当前节点的层级
  const nodeLevel = this.getLevel();
  // 返回对应层级的颜色，没有匹配的话用默认灰色
  return levelColorMap[nodeLevel] || '#949494';
});

如果需要鼠标 hover 时也保持对应颜色的深浅变化，可以额外设置hover状态的填充：

chart.hovered().fill(function() {
  const originalColor = this.normal().fill();
  // hover时把颜色加深10%，你也可以改成自己想要的效果
  return anychart.color.lighten(originalColor, -0.1);
});

方案2：从SQL数据中携带颜色字段（更灵活） #

如果需要后端控制颜色（比如不同业务场景下层级颜色不同），可以在SQL查询时给每个数据节点加上color字段，前端直接读取这个字段赋值即可。

示例SQL返回的JSON数据结构 #

假设你的后端把SQL查询结果转换成这样的JSON：

{
  "name": "总分类",
  "children": [
    {
      "name": "第1层级项1",
      "value": 30,
      "color": "#1f77b4"
    },
    {
      "name": "第1层级项2",
      "value": 25,
      "color": "#1f77b4"
    },
    {
      "name": "第2层级分组",
      "value": 45,
      "color": "#ff7f0e",
      "children": [
        {
          "name": "子项1",
          "value": 20,
          "color": "#2ca02c"
        }
      ]
    }
  ]
}

前端代码处理 #

// 从后端接口获取动态数据（比如用fetch）
fetch('/your-api-endpoint')
  .then(res => res.json())
  .then(data => {
    anychart.onDocumentReady(() => {
      const chart = anychart.sunburst(data);
      
      // 直接读取数据中的color字段设置填充
      chart.normal().fill(function() {
        return this.getData('color') || '#949494';
      });
      
      // 同样可以设置hover状态
      chart.hovered().fill(function() {
        return anychart.color.lighten(this.getData('color'), -0.1);
      });
      
      chart.container('sunburst-container');
      chart.draw();
    });
  });

小提示 #

• 可以在fill函数里加console.log(this.getLevel())，打印出节点的层级，确认你要的第1层级对应的索引值（避免搞混层级计数）。
• 颜色支持十六进制、RGB/RGBA、甚至Anychart内置的颜色名称（比如'blue'）。

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