javascript - Highcharts grouped bar charts with multiple axes - Stack Overflow

admin管理员组

文章数量:1415099

I was unsatisfied with the answer here: Multiple y-axes for column graph categories in highcharts

I understand that you can create multiple y-axes can select them using yAxis:0,1,2 etc. for each series. Is it possible to do this for groups of bar graphs?

In the following example, I want 3 groups (Count A, Count B, Percent) each with 4 people (John, Joe, Jane, Janet). How do I do that in addition to having the count groups on one axes and the percent group on the other?

$('#container').highcharts({
    chart: { type: 'column' },
    xAxis: { categories: ['Count A', 'Count B', 'Percent']},
    yAxis: [{ title: { text: 'Count' } }, { title: { text: 'Percent' }, opposite: true }],

    series: [{
        name: 'John',
        data: [5, 3, 0.4],
    }, {
        name: 'Joe',
        data: [3, 4, 0.6],
    }, {
        name: 'Jane',
        data: [2, 5, 0.7],
    }, {
        name: 'Janet',
        data: [3, 0, 0.8],
    }]
});

I was unsatisfied with the answer here: Multiple y-axes for column graph categories in highcharts

I understand that you can create multiple y-axes can select them using yAxis:0,1,2 etc. for each series. Is it possible to do this for groups of bar graphs?

In the following example, I want 3 groups (Count A, Count B, Percent) each with 4 people (John, Joe, Jane, Janet). How do I do that in addition to having the count groups on one axes and the percent group on the other?

$('#container').highcharts({
    chart: { type: 'column' },
    xAxis: { categories: ['Count A', 'Count B', 'Percent']},
    yAxis: [{ title: { text: 'Count' } }, { title: { text: 'Percent' }, opposite: true }],

    series: [{
        name: 'John',
        data: [5, 3, 0.4],
    }, {
        name: 'Joe',
        data: [3, 4, 0.6],
    }, {
        name: 'Jane',
        data: [2, 5, 0.7],
    }, {
        name: 'Janet',
        data: [3, 0, 0.8],
    }]
});

• javascript
• highcharts
• column-chart

Share Improve this question Follow edited May 23, 2017 at 10:29 CommunityBot 111 silver badge asked Aug 10, 2016 at 22:49 yeekevin11yeekevin11 1111 silver badge22 bronze badges 1

• do you want stacked column bar chart... jsfiddle/k7naaqmn – Udhay Titus Commented Aug 11, 2016 at 11:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

So here's my solution to your problem. I hope this is what you are looking for and I hope you find this helpful.

When you want to put the data into three categories with two different yAxis' you'd have to split it up in series like this. The percent is linked to the series with the values.

If you want it back to a column chart, just change the chart type to column.

http://jsfiddle/henrikskar/j1o450z5/

series: [{
       name: 'John',
       id: 's1',
       data: [5, 3],
  },{
        //Links to id s1
     linkedTo: 's1',
     name: 'John',
     data: [
           //Puts 0.4 percent to the third category which is in the second array position
           //of the categories
           [2, 0.4]
     ],
     //Assigns the percent to the second yAxis
     yAxis: 1,
     color: Highcharts.getOptions().colors[0]
  },

Yes, this is absolutely possible, and you were on the right track with your research of multiple y-axes.

Below is a code snippet based on Highcharts' demo of stacked and grouped columns. I added a second y-axis and copied some of the demo data to assign to that axis.

Per your requirements, you'll find two sets, or stacks, of data assigned to the first/default y-axis, and a third set assigned to the second/opposite y-axis.

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'column'
        },

        title: {
            text: 'Total fruit consumtion, grouped by gender'
        },

        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },

        yAxis: [{
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Number of fruits'
            }
        },{
            allowDecimals: false,
            min: 0, max: 100,
            title: {
                text: 'Percentage of fruits'
            },
            opposite: true
        }],

        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }
        },

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

        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2],
            stack: 'number'
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5],
            stack: 'number'
        }, {
            name: 'Jane',
            data: [2, 5, 6, 2, 1],
            stack: 'number2'
        }, {
            name: 'Janet',
            data: [3, 0, 4, 4, 3],
            stack: 'number2'
        },{
            name: 'John',
            data: [45, 30, 25, 70, 5],
            stack: 'percentage',
            yAxis: 1
        }, {
            name: 'Joe',
            data: [25, 15, 40, 5, 5],
            stack: 'percentage',
            yAxis: 1
        }, {
            name: 'Jane',
            data: [10, 50, 30, 5, 10],
            stack: 'percentage',
            yAxis: 1
        }, {
            name: 'Janet',
            data: [20, 5, 5, 20, 80],
            stack: 'percentage',
            yAxis: 1
        }]
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts./highcharts.js"></script>
<script src="https://code.highcharts./modules/exporting.js"></script>

<div id="container" style="width: 600px; height: 250px; margin: 0 auto"></div>

One piece of advice: as with line charts on different axes, you need to be clear in your documentation, color choices, or chart labels so that users know which values correspond to which axis. This is particularly needed for columns, as users will naturally pare the heights of each column to its neighbor.

I hope this is helpful for you.

本文标签： javascriptHighcharts grouped bar charts with multiple axesStack Overflow