Highcharts 散点图

介绍

Highcharts 是一个流行的 JavaScript 图表库，广泛用于网页上展示动态和交互式的图表。散点图是 Highcharts 提供的一种图表类型，它通过在二维坐标系中展示数据点的分布，来揭示变量之间的关系。散点图特别适用于展示和比较大量的数据点，从而发现数据中的模式、趋势和异常。

创建散点图

要创建一个 Highcharts 散点图，首先需要在网页中包含 Highcharts 的库文件。这通常包括 Highcharts 的核心库和可选的模块，如导出工具和主题。

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

接下来，在 HTML 中准备一个容器来放置图表：

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

然后，使用 JavaScript 创建图表。以下是一个简单的散点图示例：

Highcharts.chart('container', {
    chart: {
        type: 'scatter',
        zoomType: 'xy'
    },
    title: {
        text: '散点图示例'
    },
    xAxis: {
        title: {
            enabled: true,
            text: 'X 轴标题'
        },
        startOnTick: true,
        endOnTick: true,
        showLastLabel: true
    },
    yAxis: {
        title: {
            text: 'Y 轴标题'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'top',
        x: 100,
        y: 70,
        floating: true,
        backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
        borderWidth: 1
    },
    plotOptions: {
        scatter: {
            marker: {
                radius: 5,
                states: {
                    hover: {
                        enabled: true,
                        lineColor: 'rgb(100,100,100)'
                    }
                }
            },
            states: {
                hover: {
                    marker: {
                        enabled: false
                    }
                }
            },
            tooltip: {
                headerFormat: '<b>{series.name}</b><br>',
                pointFormat: '{point.x} cm, {point.y} kg'
            }
        }
    },
    series: [{
        name: '女性',
        color: 'rgba(223, 83, 83, .5)',
        [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6]]

    }, {
        name: '男性',
        color: 'rgba(119, 152, 191, .5)',
        [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8]]
    }]
});

这个示例创建了一个带有两个数据系列的散点图，一个表示女性，另一个表示男性。每个数据点都包含两个值：X 轴和 Y 轴的值。