如何基于HighChart插件实现截图样式的SparklineStack图表？

根据你提供的截图，这是一个簇状分组柱形图，以下是直接可用的HighCharts实现代码，完全匹配截图的核心样式：

<!DOCTYPE html>
<html>
<head>
    <title>匹配目标样式的柱形图</title>
    <!-- 引入HighCharts脚本 -->
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <div id="chart-container" style="width: 800px; height: 400px;"></div>

    <script>
        Highcharts.chart('chart-container', {
            chart: {
                type: 'column',
                backgroundColor: '#ffffff'
            },
            title: {
                text: '' // 截图无标题，可按需添加
            },
            xAxis: {
                categories: ['分类1', '分类2', '分类3', '分类4', '分类5'], // 替换为你的X轴分类
                lineColor: '#cccccc',
                tickColor: '#cccccc'
            },
            yAxis: {
                min: 0,
                title: {
                    text: '' // 截图无Y轴标题，可按需添加
                },
                gridLineColor: '#eeeeee'
            },
            legend: {
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 10
            },
            plotOptions: {
                column: {
                    grouping: true, // 启用簇状分组
                    dataLabels: {
                        enabled: true, // 显示柱子上方数值标签
                        style: {
                            fontWeight: 'normal'
                        }
                    },
                    pointPadding: 0.1,
                    borderWidth: 0
                }
            },
            series: [
                {
                    name: '系列1', // 替换为你的系列名称
                    color: '#7cb5ec', // 匹配截图蓝色调
                    data: [65, 78, 90, 55, 82] // 替换为你的数据
                },
                {
                    name: '系列2', // 替换为你的系列名称
                    color: '#90ed7d', // 匹配截图绿色调
                    data: [45, 62, 70, 38, 55] // 替换为你的数据
                }
            ]
        });
    </script>
</body>
</html>

关键配置说明 #

• 簇状分组：HighCharts默认对多组series数据自动做簇状排列，无需额外复杂配置
• 数据标签：通过plotOptions.column.dataLabels.enabled: true开启柱子上方的数值显示，和截图样式一致
• 颜色匹配：代码里的颜色值参考截图色调设置，可直接替换为截图的精确色值
• 精简样式：移除了多余标题、边框，保留截图的简洁风格，可按需添加标题、坐标轴文字等

内容的提问来源于stack exchange，提问作者Ranjan Singh