Highcharts combine chart types

2019-08-13 16:50发布

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.

enter image description here 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]
    }]
});

标签: highcharts
1条回答
神经病院院长
2楼-- · 2019-08-13 17:30

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]
    }]
});
查看更多
登录 后发表回答