如何更改 amCharts TreeMap 中更深层次项目的颜色？

Question

amCharts 文档说 "Sub-items (children) automatically inherit color from their parent." 但我想根据数据中的颜色属性更改子项的颜色。对于顶层，它通过使用 chart.dataFields.color = 'color' 来工作，但我不知道它如何在更深的层次上工作。我没有找到有关如何执行此操作的文档。我的数据如下所示：

let data = [
  {
    name: "Some title",
    value: 3,
    color: "#32a852",
    children: [
      {
        name: "Some child title",
        value: 3,
        color: "#dc3545"
      },
      ...
    ]
  },
  ...
]

还有我的图表代码：

let chart = am4core.create('treemap', am4charts.TreeMap)
chart.data = data
chart.hiddenState.properties.opacity = 0 // this makes initial fade in effect
chart.layoutAlgorithm = chart.binaryTree

// only one level visible initially
chart.maxLevels = 1
// define data fields
chart.dataFields.name = 'name'
chart.dataFields.value = 'value'
chart.dataFields.children = 'children'
chart.dataFields.color = 'color'
chart.colors.step = 2

chart.homeText = 'A treemap'

// enable navigation
chart.navigationBar = new am4charts.NavigationBar()

// level 0 series template
let level0SeriesTemplate = chart.seriesTemplates.create('0')
let level0SeriesColumn = level0SeriesTemplate.columns.template

level0SeriesColumn.tooltipText = '{name}: {value}'
level0SeriesColumn.column.cornerRadius(10, 10, 10, 10)
level0SeriesColumn.strokeWidth = 5
level0SeriesColumn.autoWrap = true

let bullet0 = level0SeriesTemplate.bullets.push(new am4charts.LabelBullet())
bullet0.locationX = 0.5
bullet0.locationY = 0.5
bullet0.label.text = '{name}'
bullet0.label.fill = am4core.color('#ffffff')

// level 1 series template
let level1SeriesTemplate = chart.seriesTemplates.create('1')
let level1SeriesColumn = level1SeriesTemplate.columns.template

level1SeriesColumn.fillOpacity = 0
level1SeriesColumn.tooltipText = '{name}: {value}'
level1SeriesColumn.column.cornerRadius(10, 10, 10, 10)
level1SeriesColumn.strokeWidth = 5

let bullet1 = level1SeriesTemplate.bullets.push(new am4charts.LabelBullet())
bullet1.locationX = 0.5
bullet1.locationY = 0.5
bullet1.label.text = '{name}'
bullet1.label.fill = am4core.color('#ffffff')

Answer 1

颜色数据字段不起作用，因为您已将二级系列上的列填充设置为零：

level1SeriesColumn.fillOpacity = 0; // remove this line

上面的行生成了完全透明的第二级列，因此顶层颜色显示出来。

如何更改 amCharts TreeMap 中更深层次项目的颜色？

How do I change the color of deeper level items in an amCharts TreeMap?

javascript

colors

treemap

amcharts

amcharts4