简体   繁体   中英

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

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')

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM