AI向量知识谱系图表创建示例代码｜Highcharts网络图表（networkgraph）搭建案例

知识谱系图表（Knowledge Graph）在 Highcharts 中使用力导向网络图（networkgraph），专门用来可视化演化谱系树。核心特点是：根节点统一、子分支同色、自动布局，完美呈现语言从原始母语分化到现代语言的过程。

一份完整可直接运行的 HTML 代码，包含了印欧语系语言树的所有配置、依赖和样式。你只需复制保存为 .html 文件，双击打开浏览器就能看到图表。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Indo-European Language Tree</title>
<!– 引入 Highcharts 核心库 –>
<script src="https://code.highcharts.com/highcharts.js"></script>
<!– 引入网络图模块 –>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<!– 引入无障碍模块（可选） –>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<style>
/* 让图表占满屏幕 */
html, body, #container {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!– 图表容器 –>
<div id="container"></div>

<script>
// 节点颜色自动配置逻辑
Highcharts.addEvent(
Highcharts.Series,
'afterSetOptions',
function (e) {
const colors = Highcharts.getOptions().colors,
nodes = {};
let i = 0;

if (
this instanceof Highcharts.Series.types.networkgraph &&
e.options.id === 'lang-tree'
) {
e.options.data.forEach(function (link) {
if (link[0] === 'Proto Indo-European') {
nodes['Proto Indo-European'] = {
id: 'Proto Indo-European',
marker: { radius: 20 }
};
nodes[link[1]] = {
id: link[1],
marker: { radius: 10 },
color: colors[i++]
};
} else if (nodes[link[0]] && nodes[link[0]].color) {
nodes[link[1]] = {
id: link[1],
color: nodes[link[0]].color
};
}
});
e.options.nodes = Object.keys(nodes).map(function (id) {
return nodes[id];
});
}
}
);

// 渲染图表
Highcharts.chart('container', {
chart: {
type: 'networkgraph',
height: '100%'
},
title: {
text: 'The Indo-European Language Tree',
align: 'left'
},
subtitle: {
text: 'A Force-Directed Network Graph in Highcharts',
align: 'left'
},
plotOptions: {
networkgraph: {
keys: ['from', 'to'],
layoutAlgorithm: {
maxIterations: 72,
enableSimulation: true,
friction: -0.9,
gravitationalConstant:
document.getElementById('container').scrollWidth < 500 ? 0.2 : 0.06
}
}
},
series: [{
accessibility: { enabled: false },
dataLabels: {
enabled: true,
linkFormat: '',
style: {
fontSize: '0.8em',
fontWeight: 'normal'
}
},
id: 'lang-tree',
data: [
['Proto Indo-European', 'Balto-Slavic'],
['Proto Indo-European', 'Germanic'],
['Proto Indo-European', 'Celtic'],
['Proto Indo-European', 'Italic'],
['Proto Indo-European', 'Hellenic'],
['Proto Indo-European', 'Anatolian'],
['Proto Indo-European', 'Indo-Iranian'],
['Proto Indo-European', 'Tocharian'],
['Indo-Iranian', 'Dardic'],
['Indo-Iranian', 'Indic'],
['Indo-Iranian', 'Iranian'],
['Iranian', 'Old Persian'],
['Old Persian', 'Middle Persian'],
['Indic', 'Sanskrit'],
['Italic', 'Osco-Umbrian'],
['Italic', 'Latino-Faliscan'],
['Latino-Faliscan', 'Latin'],
['Celtic', 'Brythonic'],
['Celtic', 'Goidelic'],
['Germanic', 'North Germanic'],
['Germanic', 'West Germanic'],
['Germanic', 'East Germanic'],
['North Germanic', 'Old Norse'],
['North Germanic', 'Old Swedish'],
['North Germanic', 'Old Danish'],
['West Germanic', 'Old English'],
['West Germanic', 'Old Frisian'],
['West Germanic', 'Old Dutch'],
['West Germanic', 'Old Low German'],
['West Germanic', 'Old High German'],
['Old Norse', 'Old Icelandic'],
['Old Norse', 'Old Norwegian'],
['Old Norwegian', 'Middle Norwegian'],
['Old Swedish', 'Middle Swedish'],
['Old Danish', 'Middle Danish'],
['Old English', 'Middle English'],
['Old Dutch', 'Middle Dutch'],
['Old Low German', 'Middle Low German'],
['Old High German', 'Middle High German'],
['Balto-Slavic', 'Baltic'],
['Balto-Slavic', 'Slavic'],
['Slavic', 'East Slavic'],
['Slavic', 'West Slavic'],
['Slavic', 'South Slavic'],
['Proto Indo-European', 'Phrygian'],
['Proto Indo-European', 'Armenian'],
['Proto Indo-European', 'Albanian'],
['Proto Indo-European', 'Thracian'],
['Tocharian', 'Tocharian A'],
['Tocharian', 'Tocharian B'],
['Anatolian', 'Hittite'],
['Anatolian', 'Palaic'],
['Anatolian', 'Luwic'],
['Anatolian', 'Lydian'],
['Iranian', 'Balochi'],
['Iranian', 'Kurdish'],
['Iranian', 'Pashto'],
['Iranian', 'Sogdian'],
['Old Persian', 'Pahlavi'],
['Middle Persian', 'Persian'],
['Hellenic', 'Greek'],
['Dardic', 'Dard'],
['Sanskrit', 'Sindhi'],
['Sanskrit', 'Romani'],
['Sanskrit', 'Urdu'],
['Sanskrit', 'Hindi'],
['Sanskrit', 'Bihari'],
['Sanskrit', 'Assamese'],
['Sanskrit', 'Bengali'],
['Sanskrit', 'Marathi'],
['Sanskrit', 'Gujarati'],
['Sanskrit', 'Punjabi'],
['Sanskrit', 'Sinhalese'],
['Osco-Umbrian', 'Umbrian'],
['Osco-Umbrian', 'Oscan'],
['Latino-Faliscan', 'Faliscan'],
['Latin', 'Portugese'],
['Latin', 'Spanish'],
['Latin', 'French'],
['Latin', 'Romanian'],
['Latin', 'Italian'],
['Latin', 'Catalan'],
['Latin', 'Franco-Provençal'],
['Latin', 'Rhaeto-Romance'],
['Brythonic', 'Welsh'],
['Brythonic', 'Breton'],
['Brythonic', 'Cornish'],
['Brythonic', 'Cuymbric'],
['Goidelic', 'Modern Irish'],
['Goidelic', 'Scottish Gaelic'],
['Goidelic', 'Manx'],
['East Germanic', 'Gothic'],
['Middle Low German', 'Low German'],
['Middle High German', '(High) German'],
['Middle High German', 'Yiddish'],
['Middle English', 'English'],
['Middle Dutch', 'Hollandic'],
['Middle Dutch', 'Flemish'],
['Middle Dutch', 'Dutch'],
['Middle Dutch', 'Limburgish'],
['Middle Dutch', 'Brabantian'],
['Middle Dutch', 'Rhinelandic'],
['Old Frisian', 'Frisian'],
['Middle Danish', 'Danish'],
['Middle Swedish', 'Swedish'],
['Middle Norwegian', 'Norwegian'],
['Old Norse', 'Faroese'],
['Old Icelandic', 'Icelandic'],
['Baltic', 'Old Prussian'],
['Baltic', 'Lithuanian'],
['Baltic', 'Latvian'],
['West Slavic', 'Polish'],
['West Slavic', 'Slovak'],
['West Slavic', 'Czech'],
['West Slavic', 'Wendish'],
['East Slavic', 'Bulgarian'],
['East Slavic', 'Old Church Slavonic'],
['East Slavic', 'Macedonian'],
['East Slavic', 'Serbo-Croatian'],
['East Slavic', 'Slovene'],
['South Slavic', 'Russian'],
['South Slavic', 'Ukrainian'],
['South Slavic', 'Belarusian'],
['South Slavic', 'Rusyn']
]
}]
});
</script>
</body>
</html>

知识谱系图表整体功能

核心逻辑（最重要）

这段代码最厉害的地方是自动给语言树上色：

代码逐段解析

1. 事件监听：自动给节点上色 + 设置大小（核心）

javascript

Highcharts.addEvent(Highcharts.Series, 'afterSetOptions', function (e) {
const colors = Highcharts.getOptions().colors;
const nodes = {};
let i = 0;

// 只对 id="lang-tree" 的网络图生效
if (this instanceof Highcharts.Series.types.networkgraph && e.options.id === 'lang-tree') {

// 遍历所有连线数据
e.options.data.forEach(function (link) {

// 1. 根节点：原始印欧语
if (link[0] === 'Proto Indo-European') {
nodes['Proto Indo-European'] = { id: 'Proto Indo-European', marker: { radius: 20 } };

// 2. 一级子节点：分配独立颜色 + 小一点的尺寸
nodes[link[1]] = {
id: link[1],
marker: { radius: 10 },
color: colors[i++]
};
}

// 3. 孙/曾孙节点：继承父节点颜色
else if (nodes[link[0]] && nodes[link[0]].color) {
nodes[link[1]] = { id: link[1], color: nodes[link[0]].color };
}
});

// 把节点配置注入图表
e.options.nodes = Object.keys(nodes).map(id => nodes[id]);
}
});

作用总结：

• 自动识别父子关系
• 自动分配颜色
• 自动继承颜色
• 自动设置节点大小
• 完全不用手动给每个语言写样式

2. 图表基础配置

javascript

chart: {
type: 'networkgraph', // 力导向网络图
height: '100%' // 占满容器高度
}

3. 布局算法（物理自动排版）

javascript

layoutAlgorithm: {
maxIterations: 72, // 布局计算次数
enableSimulation: true, // 开启物理模拟
friction: -0.9, // 摩擦系数（控制散开力度）
gravitationalConstant: 屏幕<500? 0.2 : 0.06 // 手机/电脑自适应引力
}

• 让节点自动散开不重叠
• 手机上更紧凑，电脑上更舒展
• 这是网络图 “好看不乱” 的关键

4. 数据格式（连线关系）

javascript

keys: ['from', 'to']
data: [
['原始印欧语', '日耳曼语族'],
['日耳曼语族', '北日耳曼语支'],
['北日耳曼语支', '古诺尔斯语'],
…
]

• 每一行 = 一条父子连线
• 整个数据就是完整的语言演化树

图表视觉效果规则

类似适用的场景

• 历史文化谱系展示
• 家族树、组织架构、分类树可视化
• 向量知识图谱、演化关系图