微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决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 举报,一经查实,本站将立刻删除。