HighCharts - 配置语法

Highcharts - 配置语法

本章演示了使用 Highcharts API 配置和创建图表的基本结构。

步骤 1：准备 HTML 页面

首先，创建一个 HTML 页面，并使用您选择的方式（CDN 或本地/NPM 构建）包含 Highcharts 库（以及任何必要的模块）。您还需要一个 HTML 元素（通常是 <div>）作为图表的容器。

示例 HTML 结构：

<!DOCTYPE html>
<html>
<head>
    <title>Highcharts Configuration Example</title>
    <!-- Include Highcharts via CDN -->
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <!-- Optional modules -->
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
</head>
<body>
    <!-- This div will hold the chart -->
    <div id="chartContainer" style="width: 550px; height: 400px; margin: 0 auto"></div>

    <script>
        // Highcharts configuration script will go here
    </script>
</body>
</html>

chartContainer div 是 Highcharts 将渲染图表的地方。

步骤 2：创建配置对象

Highcharts 使用一个 JavaScript 对象（通常称为 options）进行配置。此对象包含定义图表各个方面的属性，从其类型和数据到标题、坐标轴、提示框和颜色。

创建图表的核心函数是 Highcharts.chart()：

Highcharts.chart('containerId', optionsObject);

让我们分解 optionsObject 中的一些常见配置属性：

chart

定义基本的图表属性，例如类型。

const chartOptions = {
    type: 'line' // e.g., 'bar', 'pie', 'scatter'
};

title

设置图表的主标题。

const titleOptions = {
    text: 'Monthly Average Temperature'
};

subtitle

设置可选的副标题。

const subtitleOptions = {
    text: 'Source: WorldClimate.com'
};

xAxis

配置水平坐标轴（类别、标签、标题、类型，例如 ‘datetime’）。

const xAxisOptions = {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};

yAxis

配置垂直坐标轴（标题、标签、绘图线/区域）。可以是一个数组以配置多个坐标轴。

const yAxisOptions = {
    title: {
        text: 'Temperature (°C)'
    },
    plotLines: [{
        value: 0,       // 线的位置
        width: 1,       // 线宽
        color: '#808080' // 线颜色
    }]
};

tooltip

自定义鼠标悬停在数据点上时显示的弹出信息。

const tooltipOptions = {
    valueSuffix: '°C', // 在 Y 值后附加 '°C'
    shared: true // 在该 X 值处显示所有系列的提示框
};

legend

配置图例（布局、对齐方式、外观）。

const legendOptions = {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
};

series

这是实际数据所在之处。它是一个系列对象的数组。每个对象代表一组独立的数据（例如，一条线，一组柱子），通常包含一个 name 和一个 data 数组（或对象数组）。

const seriesData = [
    {
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    },
    {
        name: 'New York',
        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    },
    // ... more series if needed
];

步骤 3：组装和初始化

将所有配置部分组合成一个单独的 options 对象，并将其传递给 Highcharts.chart()。

// 将所有部分组合成一个 options 对象
const chartConfig = {
    chart: chartOptions,
    title: titleOptions,
    subtitle: subtitleOptions,
    xAxis: xAxisOptions,
    yAxis: yAxisOptions,
    tooltip: tooltipOptions,
    legend: legendOptions,
    series: seriesData,
    // 添加其他选项，例如 plotOptions, colors, accessibility, exporting 等。
    accessibility: {
        enabled: true // 最佳实践！
    }
};

// 在 DOM 准备就绪时初始化图表
document.addEventListener('DOMContentLoaded', function () {
    const chart = Highcharts.chart('chartContainer', chartConfig);
});

完整示例

以下是示例折线图的完整代码：

highcharts_config_example.html

<!DOCTYPE html>
<html>
<head>
    <title>Highcharts Configuration Example</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
</head>
<body>
    <div id="chartContainer" style="width: 550px; height: 400px; margin: 0 auto"></div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const chartConfig = {
                chart: {
                    type: 'line'
                },
                title: {
                    text: 'Monthly Average Temperature'
                },
                subtitle: {
                    text: 'Source: WorldClimate.com'
                },
                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                yAxis: {
                    title: {
                        text: 'Temperature (°C)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: '°C',
                    shared: true
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },
                series: [
                    {
                        name: 'Tokyo',
                        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                    },
                    {
                        name: 'New York',
                        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
                    },
                    {
                        name: 'Berlin',
                        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
                    },
                    {
                        name: 'London',
                        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                    }
                ],
                accessibility: {
                    enabled: true
                }
            };

            const chart = Highcharts.chart('chartContainer', chartConfig);
        });
    </script>
</body>
</html>

结果说明

在浏览器中打开此 HTML 文件，将在 ‘chartContainer’ div 中渲染一个折线图。该图表显示了四个城市（东京、纽约、柏林、伦敦）的月平均温度。X 轴显示月份，Y 轴显示摄氏温度，包括一条位于 0°C 的绘图线。将鼠标悬停在图表上将显示提示框，显示特定月份所有城市的温度。右侧的图例标识与每个城市关联的颜色。