如何在 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

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>

Answer 2

您應該在標簽格式化程序中使用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 3

您可以實現的另一個解決方案是創建一個包含所需刻度的數組並使用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