AMCharts强制定向树向子级添加javascript函数

如何解决AMCharts强制定向树向子级添加javascript函数

我有一个使用AmCharts创建的定向树，我想添加一个javascript函数以在单击子项时在下方显示文本。

例如，当我单击Safari时，我想在其ID设置为“描述”的div中插入有关Safari的简短描述。

我在javascript编码方面还很新：/我试图插入一个侦听器，但是我不确定这样做是对的...

am4core.useTheme(am4themes_animated);

// Create chart
var chart = am4core.create("chartdiv",am4plugins_forceDirected.ForceDirectedTree);

// Create series
var series = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries());

// Set data
series.data = [{
  "name": "Chrome","value": 12,"image": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/icon_chrome.svg","children": [{
    "name": "Chrome","value": 1,"image": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/icon_chrome.svg"
  },{
    "name": "Firefox","image": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/icon_firefox.svg"
  },{
    "name": "Internet Explorer","image": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/icon_ie.svg"
  },{
    "name": "Safari","image": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/icon_safari.svg"
  },{
    "name": "Opera","image": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/icon_opera.svg"
  }]
}];

// Set up data fields
series.datafields.value = "value";
series.datafields.name = "name";
series.datafields.id = "id";
series.datafields.children = "children";
series.datafields.linkWith = "link";

// Add labels
series.nodes.template.label.text = "{name}";
series.nodes.template.label.valign = "bottom";
series.nodes.template.label.fill = am4core.color("#000");
series.nodes.template.label.dy = 10;
series.nodes.template.tooltipText = "{name}: [bold]{value}[/]";
series.fontSize = 10;
series.minRadius = 30;
series.maxRadius = 90;

// Configure circles
series.nodes.template.circle.disabled = true;

// Configure icons
var icon = series.nodes.template.createChild(am4core.Image);
icon.propertyFields.href = "image";
icon.horizontalCenter = "middle";
icon.verticalCenter = "middle";
icon.width = 60;
icon.height = 60;


series.centerStrength = 0.2;

#chartdiv {
      width: 100%;
      height: 400px;
      /*background-color:#e1e3e6;*/
    }

<script src="//cdn.amcharts.com/lib/4/core.js"></script>
<script src="//cdn.amcharts.com/lib/4/charts.js"></script>
<script src="//cdn.amcharts.com/lib/4/themes/animated.js"></script>
<script src="//cdn.amcharts.com/lib/4/themes/dataviz.js"></script>
<script src="//cdn.amcharts.com/lib/4/plugins/forceDirected.js"></script>

<div class="row inner-b-lg">
    <div class="col-sm-12">
        <div id="chartdiv"></div>
    </div>
    
</div>

解决方法

添加series.nodes.template.events.on("up",function (event){//});点击事件处理程序
使用属性dataItem来获取详细信息属性name或value
将信息设置为div

像这个修改后的例子：

am4core.useTheme(am4themes_animated);

// Create chart
var chart = am4core.create("chartdiv",am4plugins_forceDirected.ForceDirectedTree);

// Create series
var series = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries());

// Set data
series.data = [{
  "name": "Chrome","value": 12,"image": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/icon_chrome.svg","children": [{
    "name": "Chrome","value": 1,"image": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/icon_chrome.svg"
  },{
    "name": "Firefox","image": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/icon_firefox.svg"
  },{
    "name": "Internet Explorer","image": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/icon_ie.svg"
  },{
    "name": "Safari","image": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/icon_safari.svg"
  },{
    "name": "Opera","image": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/icon_opera.svg"
  }]
}];

// Set up data fields
series.dataFields.value = "value";
series.dataFields.name = "name";
series.dataFields.id = "id";
series.dataFields.children = "children";
series.dataFields.linkWith = "link";

// Add labels
series.nodes.template.label.text = "{name}";
series.nodes.template.label.valign = "bottom";
series.nodes.template.label.fill = am4core.color("#000");
series.nodes.template.label.dy = 10;
series.nodes.template.tooltipText = "{name}: [bold]{value}[/]";
series.fontSize = 10;
series.minRadius = 30;
series.maxRadius = 90;

// Configure circles
series.nodes.template.circle.disabled = true;

// Configure icons
var icon = series.nodes.template.createChild(am4core.Image);
icon.propertyFields.href = "image";
icon.horizontalCenter = "middle";
icon.verticalCenter = "middle";
icon.width = 60;
icon.height = 60;


series.centerStrength = 0.2;

series.nodes.template.events.on("up",function (event) {
   var node = event.target;
   var name = node.dataItem.name;
   var value = node.dataItem.value;

   var elem = document.querySelector('#your-select-node');
   var html = elem.innerHTML;
   elem.innerHTML = name + ': ' + value;
});

#chartdiv {
      width: 100%;
      height: 400px;
      /*background-color:#e1e3e6;*/
    }

<script src="//cdn.amcharts.com/lib/4/core.js"></script>
<script src="//cdn.amcharts.com/lib/4/charts.js"></script>
<script src="//cdn.amcharts.com/lib/4/themes/animated.js"></script>
<script src="//cdn.amcharts.com/lib/4/themes/dataviz.js"></script>
<script src="//cdn.amcharts.com/lib/4/plugins/forceDirected.js"></script>

<div class="row inner-b-lg">
    <div class="col-sm-12">
        <div id="chartdiv"></div>
    </div>
    <div id="your-select-node">
    </div>
</div>