如何解决Amcharts部队指挥树上的交互式工具提示
我正在尝试使用amcharts v4创建强制导向树,其中节点和链接都将具有自定义HTML并使用按钮与用户进行交互。对于节点,交互工作良好,因此在本示例中不包括它们。
问题是链接工具提示中的按钮 不具有交互性(我也尝试过使用input type="button"
,但结果是相同的。
const _chart = am4core.create(this.chartId,am4plugins_forceDirected.ForceDirectedTree);
const series = _chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries());
const nodeRadius = 100;
const linkSize = 100;
const nodeSize = nodeRadius * 2;
const nodeDistance = nodeSize + linkSize;
series.minRadius = series.maxRadius = nodeRadius;
series.dataFields.id = 'id';
series.dataFields.name = 'name';
series.dataFields.value = 'value';
series.dataFields.linkWith = 'linkWith';
series.dataFields.fixed = 'fixed';
series.nodes.template.propertyFields.x = 'x';
series.nodes.template.propertyFields.y = 'y';
series.nodes.template.label.html = `
<div>{data.name}</div>
<button>
<i class="icon-trash"></i>
</button>
`;
// The next 2 lines don't seem to have an effect:
series.links.template.interactionsEnabled = true;
series.links.template.clickable = true;
series.links.template.tooltipHTML = `<input type="button" value="TEST" onclick="alert('hello')"></input>`;
series.links.template.events.on('hit',(event) => {
// Here I have clicks on link but not on link's tooltip.
});
series.links.template.showTooltipOn = 'always';
series.links.template.distance = 2;
series.data = [
{
id: '3',name: 'Element 3',value: 1,linkWith: ['4'],data: {
name: 'Element 3',},fixed: true,x: nodeRadius + nodeDistance,y: nodeRadius + nodeDistance,{
id: '4',name: 'Element 1',data: {
name: 'Element 1',x: nodeRadius + 0,y: nodeRadius + nodeDistance / 2,{
id: '7',name: 'Element 2',data: {
name: 'Element 2',y: nodeRadius + 0,];
如何使工具提示中的按钮对单击事件做出反应?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。