Highcharts柱状图坐标轴与图例值显示异常问题排查

核心问题 #

按钮二对应的柱状图不符合预期，原因在于：

• 数据结构未按多系列组织，导致图例无法展示2022列的分类
• 未显式配置轴的映射关系，轴的展示逻辑与需求不匹配

修改步骤 #

1. 调整数据获取逻辑

将每个分类作为独立的series，确保图例能展示对应分类：

function getChartDataForBar(table) {
    const seriesData = [];
    table.rows().every(function () {
        const row = this.data();
        seriesData.push({
            name: row[0], // 2022列的分类作为系列名称
            data: [parseFloat(row[1])] // Percent列数值作为该系列数据
        });
    });
    return seriesData;
}

2. 更新图表初始化函数，添加轴配置

针对bar类型图表，显式配置Y轴为分类轴、X轴为数值轴：

function initializeChart(chartId, chartTitle, chartData, chartType) {
    const chartOptions = {
        chart: {
            type: chartType,
            styledMode: false
        },
        title: {
            text: chartTitle
        },
        colors: ['#1a4480', '#e52207', '#e66f0e', '#ffbe2e', '#fee685', '#538200', '#04c585', '#97d4ea', '#009ec1', '#0076d6', '#adadad', '#8168b3', '#d72d79', '#f2938c'],
        tooltip: {
            pointFormat: '</b> {point.y:.1f}%'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true,
                    format: '{point.y:.1f}%',
                    style: {
                        fontSize: "12px"
                    }
                },
                showInLegend: true
            },
            pie: {
                dataLabels: {
                    enabled: true,
                    format: '{point.y:.1f}%',
                    style: {
                        fontSize: "12px"
                    }
                },
                showInLegend: true
            }
        },
        legend: {
            symbolRadius: 0,
            itemStyle: {
                color: '#000000',
                fontSize: '16px'
            }
        },
        series: chartData
    };

    // 为bar图表添加轴配置
    if (chartType === 'bar') {
        chartOptions.yAxis = {
            categories: ['FY 2022'], // 可根据表格表头动态获取
            title: {
                text: '2022分类'
            },
            labels: {
                style: {
                    fontSize: '16px'
                }
            }
        };
        chartOptions.xAxis = {
            title: {
                text: '百分比'
            },
            labels: {
                formatter: function() {
                    return this.value + '%';
                },
                style: {
                    fontSize: '16px'
                }
            },
            min: 0
        };
    }

    Highcharts.chart(chartId, chartOptions);
}

3. 修改图表生成调用

替换按钮二对应的图表生成代码：

// 替换原chartData2的获取方式
const chartData2 = getChartDataForBar(table2);
initializeChart('demo-output2', 'FY 2022', chartData2, 'bar');

效果说明 #

• 图例将展示2022列的每个分类（LLL、MMM）
• Y轴显示分类，X轴显示百分比数值，完全匹配需求
• 若需要动态获取Y轴标题，可通过table2.columns().header()提取表头文本替代硬编码的['FY 2022']

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