Highcharts combine chart types

问题

I am using Highcharts and would like to combine 2 types of chart.

I would like a Bar with negative stack (changing the chart type to column) combined with Column with negative values so for each category, I have both positive and negative values.

I can't find any example of doing this so I don't even know if this is possible.

I did have a thought about doing something with the series like nested series but again don't know if this is possible and can't find an example.

If what I'm trying to do possible?

Column with negative values

// Age categories
var categories = [
    '0-4', '5-9', '10-14', '15-19',
    '20-24', '25-29', '30-34', '35-39', '40-44',
    '45-49', '50-54', '55-59', '60-64', '65-69',
    '70-74', '75-79', '80-84', '85-89', '90-94',
    '95-99', '100 + '
];

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Population pyramid for Germany, 2015'
    },
    subtitle: {
        text: 'Source: <a href="http://populationpyramid.net/germany/2015/">Population Pyramids of the World from 1950 to 2100</a>'
    },
    xAxis: [{
        categories: categories,
        reversed: false,
        labels: {
            step: 1
        }
    }, { // mirror axis on right side
        opposite: true,
        reversed: false,
        categories: categories,
        linkedTo: 0,
        labels: {
            step: 1
        }
    }],
    yAxis: {
        title: {
            text: null
        },
        labels: {
            formatter: function () {
                return Math.abs(this.value) + '%';
            }
        }
    },

    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },

    tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
                'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
        }
    },

    series: [{
        name: 'Male',
        data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
            -3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
            -2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
    }, {
        name: 'Female',
        data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
            3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
            1.8, 1.2, 0.6, 0.1, 0.0]
    }]
});

Bar with negative stack

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Column chart with negative values'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2]
    }, {
        name: 'Jane',
        data: [2, -2, -3, 2, 1]
    }, {
        name: 'Joe',
        data: [3, 4, 4, -2, 5]
    }]
});

回答1:

Thanks to @Pawel Fus, I was able to do what I wanted and to remove the duplicate legend labels, I added showInLegend: false, in the series I wanted to hide the legend

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Column chart with negative values'
    },
    colors: Highcharts.getOptions().colors.splice(0, 3),
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    credits: {
        enabled: false
    },
    plotOptions: {
        series: {
        stacking: true
      }
    },
    series: [{
        stack: 'john',
        name: 'John',
        data: [5, 3, 14, 7, 2]
    }, {
        stack: 'jane',
        name: 'Jane',
        data: [2, 12, 3, 2, 1]
    }, {
        stack: 'joe',
        name: 'Joe',
        data: [3, 4, 4, 2, 5]
    }, {
        showInLegend: false,
        stack: 'john',
        name: 'John',
        data: [-5, -3, -4, -7, -2]
    }, {
        showInLegend: false,
        stack: 'jane',
        name: 'Jane',
        data: [-2, -2, -3, -2, -1]
    }, {
        showInLegend: false,
        stack: 'joe',
        name: 'Joe',
        data: [-3, -4, -4, -2, -5]
    }]
});

来源：https://stackoverflow.com/questions/48459523/highcharts-combine-chart-types