Highcharts 柱形图（Column Chart）配置

柱形图（Column Chart）是一种常用的图表类型，用于展示不同类别之间的数值对比。柱形图的条形是垂直的，适合展示趋势、对比和变化。它非常适合显示一系列类别数据的相对差异。

1. 基本柱形图配置

以下是一个简单的柱形图配置示例，展示每月销售量：

Highcharts.chart('container', {
    chart: {
        type: 'column'  // 设置图表类型为柱形图
    },
    title: {
        text: '每月销售量'
    },
    subtitle: {
        text: '2025年数据'
    },
    xAxis: {
        categories: ['1月', '2月', '3月', '4月', '5月'],  // 类别
        title: {
            text: '月份'
        }
    },
    yAxis: {
        title: {
            text: '销售量'
        }
    },
    tooltip: {
        pointFormat: '{series.name}: {point.y} 单位'
    },
    series: [{
        name: '销售量',
        data: [30, 40, 50, 60, 70]  // 数据
    }]
});

2. 多个数据系列的柱形图

你可以在同一图表中展示多个系列的数据，方便比较不同数据系列之间的差异。例如，展示2024年和2025年的销售对比：

Highcharts.chart('container', {
    chart: {
        type: 'column'  // 设置图表类型为柱形图
    },
    title: {
        text: '不同年份销售量对比'
    },
    subtitle: {
        text: '2025年与2024年数据'
    },
    xAxis: {
        categories: ['产品 A', '产品 B', '产品 C', '产品 D', '产品 E']
    },
    yAxis: {
        title: {
            text: '销售量'
        }
    },
    tooltip: {
        shared: true,
        pointFormat: '{series.name}: {point.y} 单位'
    },
    series: [{
        name: '2025年销售',
        data: [30, 40, 50, 60, 70],
        color: '#FF5733'  // 设置2025年销售的颜色
    }, {
        name: '2024年销售',
        data: [20, 30, 40, 50, 60],
        color: '#33B5FF'  // 设置2024年销售的颜色
    }]
});

3. 堆叠柱形图（Stacked Column Chart）

堆叠柱形图将多个数据系列的柱子叠加在一起，展示每个类别中各个系列的相对比例。这种图表适合用来展示总量及其各部分的贡献。

Highcharts.chart('container', {
    chart: {
        type: 'column'  // 设置图表类型为柱形图
    },
    title: {
        text: '堆叠柱形图示例'
    },
    subtitle: {
        text: '2025年数据'
    },
    xAxis: {
        categories: ['产品 A', '产品 B', '产品 C', '产品 D', '产品 E']
    },
    yAxis: {
        title: {
            text: '销售量'
        },
        stackLabels: {
            enabled: true,  // 启用堆叠标签
            style: {
                fontWeight: 'bold',
                color: '#000000'
            }
        }
    },
    tooltip: {
        shared: true,
        pointFormat: '{series.name}: {point.y} 单位'
    },
    plotOptions: {
        column: {
            stacking: 'normal'  // 启用堆叠
        }
    },
    series: [{
        name: '产品 A',
        data: [30, 40, 50, 60, 70],
        color: '#FF5733'
    }, {
        name: '产品 B',
        data: [20, 30, 40, 50, 60],
        color: '#33B5FF'
    }]
});

4. 水平柱形图（Horizontal Column Chart）

默认情况下，柱形图是垂直的。如果你想要水平的柱形图，可以将 chart.type 设置为 bar，并配置 xAxis 和 yAxis。

Highcharts.chart('container', {
    chart: {
        type: 'bar'  // 设置为水平柱形图
    },
    title: {
        text: '水平柱形图示例'
    },
    subtitle: {
        text: '2025年数据'
    },
    xAxis: {
        categories: ['产品 A', '产品 B', '产品 C', '产品 D', '产品 E']
    },
    yAxis: {
        title: {
            text: '销售量'
        }
    },
    tooltip: {
        pointFormat: '{series.name}: {point.y} 单位'
    },
    series: [{
        name: '销售量',
        data: [30, 40, 50, 60, 70]
    }]
});

5. 带有数据标签的柱形图

你可以为柱形图的每个柱子添加数据标签，显示数值。通过设置 dataLabels.enabled 为 true，可以在每个柱形上显示数据值。

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: '柱形图 - 数据标签'
    },
    subtitle: {
        text: '2025年数据'
    },
    xAxis: {
        categories: ['产品 A', '产品 B', '产品 C', '产品 D', '产品 E']
    },
    yAxis: {
        title: {
            text: '销售量'
        }
    },
    tooltip: {
        pointFormat: '{series.name}: {point.y} 单位'
    },
    plotOptions: {
        column: {
            dataLabels: {
                enabled: true,  // 启用数据标签
                formatter: function() {
                    return this.y + ' 单位';  // 格式化数据标签
                }
            }
        }
    },
    series: [{
        name: '销售量',
        data: [30, 40, 50, 60, 70]
    }]
});

6. 动画效果

Highcharts 支持在柱形图中添加动画效果，使图表加载时更加生动。你可以通过 animation 配置来设置动画的持续时间和效果。

Highcharts.chart('container', {
    chart: {
        type: 'column',
        animation: {
            duration: 1000,  // 动画时长
            easing: 'easeOutBounce'  // 动画效果
        }
    },
    title: {
        text: '柱形图 - 动画效果'
    },
    subtitle: {
        text: '2025年数据'
    },
    xAxis: {
        categories: ['产品 A', '产品 B', '产品 C', '产品 D', '产品 E']
    },
    yAxis: {
        title: {
            text: '销售量'
        }
    },
    series: [{
        name: '销售量',
        data: [30, 40, 50, 60, 70]
    }]
});

7. 总结

Highcharts 柱形图（Column Chart）是展示类别数据对比和趋势的强大工具。你可以：

  • 创建基本的柱形图，展示一个数据系列。
  • 添加多个系列，以便进行多数据集的对比。
  • 使用堆叠柱形图展示每个系列在总量中的贡献。
  • 为图表添加数据标签、动画效果，增强可读性和交互性。

如果你有其他要求或想要更具体的配置，随时告诉我！