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

Question

The amCharts docs say "Sub-items (children) automatically inherit color from their parent." But I want to change the color of sub-items depending on a color attribute in my data. For the top level it works by using chart.dataFields.color = 'color' , but I have no clue how it works for deeper levels. I found no documentation for how to do this. My data looks like this:

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

And my chart code:

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

The color data field does not work because you have fill for columns set on second level series to zero:

level1SeriesColumn.fillOpacity = 0; // remove this line

The line above results in completely transparent second level columns, hence the top level color showing through.