Как установить ось Y в HighChart?

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

Вы должны использовать Math.abs() в вашем устройстве форматирования меток, чтобы получить абсолютное значение.

Ваш yAxis должен быть установлен на:

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

Вы можете использовать ту же идею для всплывающая подсказка с помощью функции formatter.

tooltip: {
  formatter: function() {
    return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
      'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 1);
  }
}

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);
      }
    },
    tickInterval: 1
  },
  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },
  tooltip: {
    formatter: function() {
      return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
        'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 1);
    }
  },
  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 2

Другим решением, которое вы можете реализовать, является создание массива с желаемыми тиками и использование функции yAxis.tickPositions .

Демонстрация: https://jsfiddle.net/BlackLabel/mb5v2w1u/

код:

var ticks = [];
for(let i = -10; i <=10; i++){
    ticks.push(i)
}

API: https://api.highcharts.com/highcharts/yAxis.tickPositions

Answer 3

Попробуйте использовать yAxis.labels.formatter и Math.abs()

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

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

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: {
    tickInterval: 1, 
    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>