基于同一数据的Highcharts双轴堆叠柱形图实现咨询

Absolutely! This exact requirement is totally achievable with Highcharts. Here's how you can build it step by step:

Key Implementation Details #

• Single stacked column: We’ll use a single category on the x-axis (e.g., "Total") so all 4 items stack into one column.
• Dual Y-axes: Configure two y-axes:
  • Left axis: Tracks percentage values (capped at 100% to match your total)
  • Right axis: Displays dollar amounts (capped at $36, your total sum)
• Dual data per item: Each series (Item A-D) will include both percentage values (for the column height) and custom dollar amount data (for labels/tooltips).

Working Code Example #

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Item Breakdown: Percentage vs. Dollar Amount'
    },
    xAxis: {
        categories: ['Total'],
        crosshair: true
    },
    yAxis: [{
        min: 0,
        max: 100,
        title: {
            text: 'Percentage (%)'
        },
        labels: {
            format: '{value}%'
        },
        stackLabels: {
            enabled: true,
            style: { fontWeight: 'bold' },
            format: 'Total: 100%'
        }
    }, {
        min: 0,
        max: 36,
        title: {
            text: 'Amount ($)'
        },
        labels: {
            format: '${value}'
        },
        opposite: true,
        stackLabels: {
            enabled: true,
            style: { fontWeight: 'bold' },
            format: 'Total: $36'
        }
    }],
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y}%</b> | <b>${point.amount}</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                formatter: function() {
                    // Show both percentage and dollar amount on each stack segment
                    return `${this.y}%<br>$${this.point.amount}`;
                }
            }
        }
    },
    series: [{
        name: 'Item A',
        data: [{ y: 42, amount: 15 }]
    }, {
        name: 'Item B',
        data: [{ y: 33, amount: 12 }]
    }, {
        name: 'Item C',
        data: [{ y: 14, amount: 5 }]
    }, {
        name: 'Item D',
        data: [{ y: 11, amount: 4 }]
    }]
});

What This Does #

• The single x-axis category ensures all items stack into one column, with heights based on their percentage values (summing to 100%).
• The right y-axis provides a clear reference for the total dollar amount ($36), matching your requirement.
• Both tooltips and data labels display both percentage and dollar values for each item, making the data clear at a glance.
• Stack labels at the top of the column explicitly show the total values for both metrics.

This setup fully meets your requirements for a single stacked column with dual-axis labeling and dual metrics per item.

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