我如何更改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

上面的行导致第二级列完全透明，因此顶层颜色始终显示出来。