缺失数据可视化图表开发实战｜Highcharts创建人员出生统计面积图表示例

完整可运行代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title面积图 - 男孩姓名出生人数/title style #container { width: 100%; height: 500px; } /style script srchttps://code.highcharts.com/highcharts.js/script /head body div idcontainer/div script // 数据来源https://www.ssb.no/statbank/table/10467/ // 图表功能显示数据差距的面积图支持 null 空白缺失数据 Highcharts.chart(container, { // 1. 图表类型面积图area chart: { type: area }, // 2. 主标题 title: { text: 按男孩姓名统计的出生人数 }, // 3. 副标题提示缺失数据 subtitle: { text: * 2019年 Yasin 数据缺失, align: right, // 右对齐 verticalAlign: bottom// 垂直靠下 }, // 4. 图例配置 legend: { layout: vertical, // 垂直布局 align: left, // 水平靠左 verticalAlign: top, // 垂直靠上 x: 150, // X偏移 y: 60, // Y偏移 floating: true, // 悬浮在图表上 borderWidth: 1, // 边框宽度 backgroundColor: #fff// 背景白色 }, // 5. Y轴配置 yAxis: { title: { text: 人数 } }, // 6. 系列通用配置 plotOptions: { series: { pointStart: 2016 // X轴数据从 2016 年开始 }, area: { fillOpacity: 0.5 // 面积填充透明度 50% } }, // 7. 隐藏版权信息 credits: { enabled: false }, // 8. 数据系列两条面积曲线 series: [{ name: Arvid, // 姓名1 data: [11, 11, 8, 13, 12, 14, 4, 12] }, { name: Yasin, // 姓名2 data: [10, 10, 8, null, 8, 6, 4, 8] // 重点null 2019年数据缺失 → 图表自动断开 }] }); /script /body /html1. 可视化搭建使用图表类型面积图area用填充区域展示数据大小能清晰看到两组数据的差距视觉效果比折线图更强、更直观2. 图表展示内容对比两个男孩名字Arvid和Yasin每年的出生登记人数时间跨度2016–2023 共 8 年3. 最关键知识点null 缺失数据你给的说明重点Highcharts 将 null 值作为缺失数据自动留出空白。代码里data: [10,10,8,null,8,6,4,8]null位置 2019 年图表效果此处线条断开不连接形成空白副标题标注* 2019年 Yasin 数据缺失4. 图表作用清晰展示多年数据变化趋势直观对比两组数据差距自动处理缺失数据null不强行连接面积填充让数据大小一目了然5. 数据对应年份自动生成pointStart: 2016索引 0 → 2016 索引 1 → 2017 索引 2 → 2018 索引 3 → 2019 缺失 null 索引 4 → 2020 索引 5 → 2021 索引 6 → 2022 索引 7 → 2023这是一张显示数据差距的面积图用于对比两个男孩姓名多年的出生人数。Highcharts 默认会将数据中的null 视为缺失数据并在图表上自动形成空白断开不会错误连接保证数据展示真实准确。