Highcharts 面积图(Area Chart) 示例代码|美俄核弹头库存变化趋势

📅 发布时间:2026/7/3 11:18:32 👁️ 浏览次数:
Highcharts 面积图(Area Chart) 示例代码|美俄核弹头库存变化趋势
如何开发一个非常经典的Highcharts 面积图Area Chart案例专门用来展示美俄核弹头库存变化趋势。可运行的 HTML 代码复制就能跑同时帮你解释关键配置。完整可运行代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 title美俄核弹头库存趋势图/title script srchttps://code.highcharts.com/highcharts.js/script style * { margin: 0; padding: 0; box-sizing: border-box; } #container { width: 100%; height: 650px; padding: 10px; } /style /head body div idcontainer/div script Highcharts.chart(container, { chart: { type: area, backgroundColor: #fafafa }, title: { text: 美俄核弹头库存变化趋势1945–2024, style: { fontSize: 20px, fontWeight: bold } }, subtitle: { text: 数据来源FAS (美国科学家联盟), style: { fontSize: 14px, color: #666 } }, xAxis: { allowDecimals: false, title: { text: 年份 }, gridLineWidth: 1, tickInterval: 10 }, yAxis: { title: { text: 核弹头数量枚 }, gridLineOpacity: 0.3 }, tooltip: { backgroundColor: rgba(255,255,255,0.95), borderWidth: 1, shadow: true, headerFormat: b{point.x} 年/bbr/, pointFormat: {series.name}b{point.y:,.0f} 枚/b }, legend: { align: center, verticalAlign: top, layout: horizontal, itemStyle: { fontSize: 14px } }, plotOptions: { area: { pointStart: 1940, fillOpacity: 0.6, lineWidth: 2, marker: { enabled: false, states: { hover: { enabled: true, radius: 4 } } } } }, colors: [#007bff, #dc3545], series: [{ name: 美国, data: [ null, null, null, null, null, 2, 9, 13, 50, 170, 299, 438, 841, 1169, 1703, 2422, 3692, 5543, 7345, 12298, 18638, 22229, 25540, 28133, 29463, 31139, 31175, 31255, 29561, 27552, 26008, 25830, 26516, 27835, 28537, 27519, 25914, 25542, 24418, 24138, 24104, 23208, 22886, 23305, 23459, 23368, 23317, 23575, 23205, 22217, 21392, 19008, 13708, 11511, 10979, 10904, 11011, 10903, 10732, 10685, 10577, 10526, 10457, 10027, 8570, 8360, 7853, 5709, 5273, 5113, 5066, 4897, 4881, 4804, 4717, 4571, 4018, 3822, 3785, 3805, 3750, 3708, 3708, 3708, 3708 ] }, { name: 苏联/俄罗斯, data: [ null, null, null, null, null, null, null, null, null, 1, 5, 25, 50, 120, 150, 200, 426, 660, 863, 1048, 1627, 2492, 3346, 4259, 5242, 6144, 7091, 8400, 9490, 10671, 11736, 13279, 14600, 15878, 17286, 19235, 22165, 24281, 26169, 28258, 30665, 32146, 33486, 35130, 36825, 38582, 40159, 38107, 36538, 35078, 32980, 29154, 26734, 24403, 21339, 18179, 15942, 15442, 14368, 13188, 12188, 11152, 10114, 9076, 8038, 7000, 6643, 6286, 5929, 5527, 5215, 4858, 4750, 4650, 4600, 4500, 4490, 4300, 4350, 4330, 4310, 4495, 4477, 4489, 4380 ] }] }); /script /body /html这是面积图用于展示随时间变化的总量趋势数据从1940 年开始自动对应年份代码可直接保存为 HTML 运行无需其他依赖交互友好悬浮显示数值、趋势清晰