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

完整可运行代码

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面积图 - 男孩姓名出生人数</title>
    <style>
        #container {
            width: 100%;
            height: 500px;
        }
    </style>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <div id="container"></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>
</html>

1. 可视化搭建使用图表类型

面积图（area）

用填充区域展示数据大小
能清晰看到两组数据的差距
视觉效果比折线图更强、更直观

2. 图表展示内容

对比两个男孩名字 Arvid 和 Yasin

每年的出生登记人数
时间跨度：2016--2023 共 8 年

3. 最关键知识点：null 缺失数据

你给的说明重点：Highcharts 将 null 值作为缺失数据，自动留出空白。

代码里：

javascript 复制代码

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 视为缺失数据 ，并在图表上自动形成空白断开，不会错误连接，保证数据展示真实准确。