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

如何在HighChart中设置y轴？

3 个答案: