以下是一个使用amCharts库创建节点之间链接工具提示的示例代码:
HTML部分:
amCharts - 节点之间的链接工具提示示例
JavaScript部分:
am4core.ready(function() {
// 创建图表实例
var chart = am4core.create("chartdiv", am4charts.TreeMap);
// 设置数据源
chart.dataSource.url = "data.json";
chart.dataSource.events.on("parseended", function(ev) {
var data = ev.target.data;
// 创建节点系列
var series = chart.series.push(new am4charts.TreeMapSeries());
series.dataFields.value = "value";
series.dataFields.name = "name";
series.dataFields.children = "children";
series.tooltipText = "{name}: {value}";
// 创建链接工具提示
var tooltip = series.tooltip;
tooltip.background.fill = am4core.color("#000");
tooltip.background.fillOpacity = 0.7;
tooltip.getFillFromObject = false;
tooltip.label.fill = am4core.color("#fff");
tooltip.label.fontSize = 12;
// 添加链接工具提示事件
series.nodes.template.events.on("over", function(ev) {
var node = ev.target;
tooltip.label.text = node.dataItem.dataContext.name;
tooltip.background.pointerLength = node.pixelHeight;
tooltip.pointerOrientation = "vertical";
tooltip.show();
});
series.nodes.template.events.on("out", function(ev) {
tooltip.hide();
});
});
});
使用上述代码,可以创建一个amCharts图表,并在节点之间显示链接工具提示。请确保将代码中的数据源URL(data.json)替换为您自己的数据源。
数据源(data.json)示例:
[
{
"name": "节点1",
"value": 10,
"children": [
{
"name": "子节点1",
"value": 5
},
{
"name": "子节点2",
"value": 3
}
]
},
{
"name": "节点2",
"value": 8,
"children": [
{
"name": "子节点3",
"value": 4
},
{
"name": "子节点4",
"value": 2
}
]
}
]
这是一个基本示例,您可以根据自己的需求进行定制和扩展。