如何在HighChart中设置y轴？

Question

我正在使用HighCharts显示死亡率。已经完成并显示了按年龄划分的男性和女性死亡之间的死亡比较。

我面临的问题是图表的y轴值。图表中的Y轴为水平轴。我希望它显示类似...,5,4,3,2,1,0,1,2,3,4,5,...

的值

var categories = [
                    '0-10', '11-20', '21-30', '31-40',
                    '40-50', '50-60', '60-70', '70-80', '80-90',
                    '90+'
                ];

Highcharts.chart('male-female', {
    chart: { type: 'bar' },
    title: { text: 'Male Female Death Rate' },
    xAxis: [{
        categories: categories,
        reversed: false,
        labels: { step: 1 },
        accessibility: { description: 'Age (male)' } 
    },
    { // mirror axis on right side
        opposite: true,
        reversed: false,
        categories: categories,
        linkedTo: 0,
        labels: { step: 1 },
        accessibility: { description: 'Age (female)' }
    }],

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

    series: [
        {
            name: 'Male',
            data: [ 0, -2, -1, 0, -2, -2, -1, -4, -6, -3 ]
        },
        {
            name: 'Female',
            data: [ 2, 2, 2, 2, 2, 9, 3, 1, 9, 4 ]
        }
    ]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
  <div id="male-female"></div>
</figure>

Answer 1

尝试使用yAxis.labels.formatter和Math.abs()

https://api.highcharts.com/highstock/yAxis.labels.formatter

var categories = [
  '0-10', '11-20', '21-30', '31-40',
  '40-50', '50-60', '60-70', '70-80', '80-90',
  '90+'
];

Highcharts.chart('male-female', {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Male Female Death Rate'
  },
  xAxis: [{
      categories: categories,
      reversed: false,
      labels: {
        step: 1
      },
      accessibility: {
        description: 'Age (male)'
      }
    },
    { // mirror axis on right side
      opposite: true,
      reversed: false,
      categories: categories,
      linkedTo: 0,
      labels: {
        step: 1
      },
      accessibility: {
        description: 'Age (female)'
      }
    }
  ],

  yAxis: {
    labels: {
      formatter: function() {
        return Math.abs(this.value);
      }
    }
  },

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

  series: [{
      name: 'Male',
      data: [0, -2, -1, 0, -2, -2, -1, -4, -6, -3]
    },
    {
      name: 'Female',
      data: [2, 2, 2, 2, 2, 9, 3, 1, 9, 4]
    }
  ]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
  <div id="male-female"></div>
</figure>