1

我遇到了一个小问题。我正在尝试使用 highcharts 制作这样的柱形图： http ://www.highcharts.com/demo/column-basic

各个系列是春季、夏季、秋季和冬季，作为类别，我使用各种变量，例如空气湿度、压力等。现在的问题是我想使用多个 y 轴，因为显然湿度范围在 0 到 100 之间，压力在 1000 左右，它们也有不同的单位。在文档中，我发现可以设置多个轴，但问题是它只显示了如何为每个系列指定轴。然而，在这种情况下，我显然不希望系列有单独的轴（春季、夏季等的湿度相似），但我希望各个类别有不同的轴。有谁知道这是可能的，如果如何？

4

3 回答 3

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'
            }

        }
于 2013-12-29T10:33:41.653 回答
0 

$(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>

于 2019-03-11T13:48:28.067 回答
0

我通过最近发布的另一篇文章发现了这个问题（参见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>

我希望这对遇到这篇文章的用户有所帮助。

于 2016-08-11T11:27:08.647 回答