Highcharts 气泡图学习笔记

简介

气泡图是一种用于展示三维数据的可视化图表。在气泡图中，每个数据点表示为一个气泡，气泡的大小和位置表示数据的指标。Highcharts 是一个强大的 JavaScript 图表库，可以用来创建各种类型的图表，包括气泡图。

创建气泡图

要创建 Highcharts 气泡图，可以按照以下步骤进行：

引入 Highcharts 库

htmlCopy Code
<script src="https://code.highcharts.com/highcharts.js"></script>

准备容器

htmlCopy Code
<div id="container" style="width:100%; height:400px;"></div>

配置图表选项

javascriptCopy Code
var options = {
    chart: {
        type: 'bubble'
    },
    title: {
        text: '气泡图示例'
    },
    xAxis: {
        title: {
            text: 'X 轴'
        }
    },
    yAxis: {
        title: {
            text: 'Y 轴'
        }
    },
    series: [{
        data: [
            [9, 81, 63],
            [98, 5, 89],
            [51, 50, 73],
            [41, 22, 14],
            [58, 24, 20],
            [78, 37, 34],
            [55, 56, 53],
            [18, 45, 70],
            [42, 44, 28],
            [3, 52, 59],
            [31, 18, 97],
            [79, 91, 63],
            [93, 23, 23],
            [44, 83, 22]
        ]
    }]
};

创建图表

javascriptCopy Code
var chart = Highcharts.chart('container', options);

实例

以下是一个简单的 Highcharts 气泡图实例，展示了三个城市的人口、GDP 和面积的数据情况。

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
    <title>Highcharts 气泡图示例</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <div id="container" style="width:100%; height:400px;"></div>

    <script>
        var options = {
            chart: {
                type: 'bubble'
            },
            title: {
                text: '城市数据'
            },
            xAxis: {
                title: {
                    text: '人口'
                }
            },
            yAxis: {
                title: {
                    text: 'GDP'
                }
            },
            series: [{
                data: [
                    [13000000, 2200000000000, 8800],
                    [4000000, 780000000000, 6888],
                    [9000000, 1600000000000, 12000]
                ]
            }]
        };

        var chart = Highcharts.chart('container', options);
    </script>
</body>
</html>

运行上述代码，可以看到一个三个城市的气泡图，其中气泡的大小表示城市面积，位置表示人口和 GDP 的指标。