javascript - Am4Chart 树图：如何在多级树图中加载默认级别为 2 的图表？

Question

我有一个场景，我需要在多级树形图中加载具有 2 级（索引 1）而不是 1 级（索引 0）的 am4chart 树图。

例如，https://codepen.io/avijsdev/pen/NWRQeyN有两级嵌套数据（在'children'处），因此默认情况下图表加载索引为 0 的数据，但我需要加载二级数据的树形图带有一些预配置/选择父级别（索引 0）。

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 *
 * For more information visit:
 * https://www.amcharts.com/
 *
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

/* Set themes */
am4core.useTheme(am4themes_animated);

/* Create chart */
var chart = am4core.create("chartdiv", am4charts.TreeMap);
chart.maxLevels = 1;
chart.data = [{
  "name": "First",
  "value": 190,
  "children": [
    { "name": "A1", "value": 100 },
    { "name": "A2", "value": 60 },
    { "name": "A3", "value": 30 }
  ]
}, {
  "name": "Second",
  "value": 60,
  "children": [
    { "name": "B1", "value": 10 },
    { "name": "B2", "value": 20 },
    { "name": "B3", "value": 30 }
  ]
}, {
  "name": "Third",
  "value": 190,
  "children": [
    { "name": "C1", "value": 100 },
    { "name": "C2", "value": 30 },
    { "name": "C3", "value": 20 },
    { "name": "C4", "value": 40 }
  ]
}, {
  "name": "Fourth",
  "value": 130,
  "children": [
    { "name": "D1", "value": 10 },
    { "name": "D2", "value": 20 },
    { "name": "D3", "value": 70 },
    { "name": "D4", "value": 10 },
    { "name": "D5", "value": 20 }
  ]
}];


/* Define data fields */
chart.dataFields.value = "value";
chart.dataFields.name = "name";
chart.dataFields.children = "children";
//chart.maxLevels=1;

/* Create top-level series */
var level1 = chart.seriesTemplates.create("0");
var level1_column = level1.columns.template;
level1_column.column.cornerRadius(10, 10, 10, 10);
level1_column.fillOpacity = 0.8;
level1_column.stroke = am4core.color("#fff");
level1_column.strokeWidth = 5;
level1_column.strokeOpacity = 1;

var level1_bullet = level1.bullets.push(new am4charts.LabelBullet());
level1_bullet.locationY = 0.5;
level1_bullet.locationX = 0.5;
level1_bullet.label.text = "{name}";
level1_bullet.label.fill = am4core.color("#fff");

/* Create second-level series */
var level2 = chart.seriesTemplates.create("1");
var level2_column = level2.columns.template;
level2_column.column.cornerRadius(10, 10, 10, 10);
level2_column.fillOpacity = 0.8;
level2_column.stroke = am4core.color("#fff");
level2_column.strokeWidth = 5;
level2_column.strokeOpacity = 1;

var level2_bullet = level2.bullets.push(new am4charts.LabelBullet());
level2_bullet.locationY = 0.5;
level2_bullet.locationX = 0.5;
level2_bullet.label.text = "{name}";
level2_bullet.label.fill = am4core.color("#fff");

/* Add a navigation bar */
chart.navigationBar = new am4charts.NavigationBar();

标签： javascriptamchartstreemapamcharts4