Am4Chart 树状图:如何在多级树状图中加载默认级别为 2 的图表?

问题描述

我有一个场景,我需要在多级树状图中加载第二级(索引 1)而不是第一级(索引 0)的 am4chart 树形图。

例如,https://codepen.io/avijsdev/pen/NWRQeyN 有两级嵌套数据(在“子级”处),因此认情况下图表加载索引 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",{
  "name": "Third","children": [
    { "name": "C1",{ "name": "C2","value": 30 },{ "name": "C3",{ "name": "C4","value": 40 }
  ]
},{
  "name": "Fourth","value": 130,"children": [
    { "name": "D1",{ "name": "D2",{ "name": "D3","value": 70 },{ "name": "D4",{ "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);
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);
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();

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)