多个y轴用于高图中的列图类别

Question

我遇到了一个小问题。我试图使用highcharts：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 grouped bar charts with multiple axes）。

简而言之，是的，您绝对可以拥有一个柱形图，其中某些系列被分配给不同的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>