Highcharts сгруппированные гистограммы с несколькими осями

Question

Я был недоволен ответом здесь: Несколько осей Y для категорий графа столбцов в старших диаграммах

Я понимаю, что вы можете создать несколько осей Y, можете выбрать их, используя yAxis:0,1,2 и т. Д. Для каждой серии. Возможно ли это сделать для групп гистограмм?

В следующем примере я хочу, чтобы в каждой группе было 3 группы (граф A, граф B, проценты) по 4 человека (Джон, Джо, Джейн, Джанет). Как мне это сделать в дополнение к наличию групп подсчета на одной оси и группы процентов на другой?

$('#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],
    }]
});

Answer 1

Вот мое решение вашей проблемы. Я надеюсь, что это то, что вы ищете, и я надеюсь, что вы найдете это полезным.

Если вы хотите поместить данные в три категории с двумя различными осями YAXIS, вам придется разделить их на серии, как показано ниже. Процент связан с рядом со значениями.

Если вы хотите, чтобы он вернулся к диаграмме столбца, просто измените тип диаграммы на столбец.

http://jsfiddle.net/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]
  },

Answer 2

Да, это абсолютно возможно, и вы были на правильном пути, изучая несколько осей Y.

Ниже приведен фрагмент кода, основанный на демонстрации Highcharts с накоплением и группировкой столбцов. Я добавил вторую ось Y и скопировал некоторые демонстрационные данные для назначения этой оси.

В соответствии с вашими требованиями вы найдете два набора или стека данных, назначенных первой / стандартной оси Y, и третий набор, назначенный второй / противоположной оси Y.

$(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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

Один совет: как и в случае линейных диаграмм на разных осях, вам необходимо четко указать в своей документации, выборе цвета или метках диаграммы, чтобы пользователи знали, какие значения соответствуют какой оси. Это особенно необходимо для столбцов, так как пользователи будут естественно сравнивать высоты каждого столбца с его соседом.

Я надеюсь, что это полезно для вас.