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

Question

Я столкнулся с небольшой проблемой. Я пытаюсь сделать граф столбцов, как этот, используя высокие диаграммы: http://www.highcharts.com/demo/column-basic

Отдельные серии: весна, лето, осень и зима, и в качестве категорий я использую различные вариации, такие как влажность воздуха, давление и т. Д. Теперь проблема в том, что я хотел использовать несколько осей Y, потому что, очевидно, влажность, например, колеблется от 0 до 100, давление составляет около 1000, и они также имеют разные единицы. В документации я обнаружил, что можно установить несколько осей, но проблема в том, что он показывает только то, как указать ось для каждой серии. В этом случае, однако, я, очевидно, не хочу отдельных осей для ряда (влажность похожа на весну, лето и т. Д.), Но я хочу разные оси для отдельных категорий. Кто-нибудь знает, возможно ли это, и если как?

Answer 1

Да, это возможно, см. http://www.highcharts.com/demo/combo-multi-axes

Хитрость заключается в том, чтобы использовать yAxis в вашей серии, указав целое число. Как в приведенном выше примере:

series: [{
            name: 'Rainfall',
            color: '#4572A7',
            type: 'column',
            yAxis: 1,
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            tooltip: {
                valueSuffix: ' mm'
            }

        }, {
            name: 'Sea-Level Pressure',
            type: 'spline',
            color: '#AA4643',
            yAxis: 2,
            data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
            marker: {
                enabled: false
            },
            dashStyle: 'shortdot',
            tooltip: {
                valueSuffix: ' mb'
            }

        }

Answer 2

Я нашел этот вопрос через другой недавно опубликованный (см. Сгруппированные гистограммы Highcharts с несколькими осями).

Короче говоря, да, у вас может быть столбчатая диаграмма, в которой определенные серии назначены различным осям Y. Вот пример использования требований в вопросе:

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

        chart: {
            type: 'column'
        },

        title: {
            text: 'Weather data'
        },

        xAxis: {
            categories: ['Spring','Summer','Fall','Winter']
        },

        yAxis: [{
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Percent'
            }
        },{
            allowDecimals: false,
            min: 0, max: 1000,
            title: {
                text: 'Pressure'
            },
            opposite: true
        }],

        series: [{
            name: 'Humidity',
            data: [10, 50, 30, 5]
        }, {
            name: 'Barometric pressure',
            data: [550, 740, 655, 800],
            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="min-width: 310px; height: 250px; margin: 0 auto"></div>

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

Answer 3

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

        chart: {
            type: 'column'
        },

        title: {
            text: 'Weather data'
        },

        xAxis: {
            categories: ['Spring','Summer','Fall','Winter']
        },

        yAxis: [{
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Percent'
            }
        },{
            allowDecimals: false,
            min: 0, max: 1000,
            title: {
                text: 'Pressure'
            },
            opposite: true
        }],

        series: [{
            name: 'Humidity',
            data: [10, 50, 30, 5]
        }, {
            name: 'Barometric pressure',
            data: [550, 740, 655, 800],
            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="min-width: 310px; height: 250px; margin: 0 auto"></div>