Question

类似于官方演示。

想要将yAxis（age）移到中心。

像2011 Census - Office for National Statistics

Answer 1

不幸的是，Highcharts不支持这种图表类型。但是，您可以使用水平对齐的两个条形图来创建它。查看我在下面发布给您的演示。

HTML：

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="cnt">
  <div id="container1"></div>
  <div id="container2"></div>
</div>

CSS：

#container1,
#container2 {
  width: 49%;
  display: inline-block;
}

#cnt {
  max-width: 800px;
  margin: 0 auto;
}

JS：

var categories = [
  '0-4', '5-9', '10-14', '15-19',
  '20-24', '25-29', '30-34', '35-39', '40-44',
  '45-49', '50-54', '55-59', '60-64', '65-69',
  '70-74', '75-79', '80-84', '85-89', '90-94',
  '95-99', '100 + '
];

Highcharts.chart('container1', {
  chart: {
    type: 'bar',
    marginRight: 1
  },
  yAxis: {
    min: 0,
    reversed: true,
    title: {
      enabled: false
    }
  },
  xAxis: {
    visible: false,
    reversed: false,
  },
  title: {
    text: ''
  },
  legend: {
    layout: 'vertical',
    align: 'left',
    verticalAlign: 'top',
    x: 30,
    y: 10,
    floating: true,
    borderWidth: 1,
    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
    shadow: true
  },
  credits: {
    enabled: false
  },
  series: [{
    pointPadding: 0,
    groupPadding: 0,
    name: 2011,
    data: [
      2.1, 2.0, 2.1, 2.3, 2.6,
      2.9, 3.2, 3.1, 2.9, 3.4,
      4.3, 4.0, 3.5, 2.9, 2.5,
      2.7, 2.2, 1.1, 0.6, 0.2,
      0.0
    ]
  }, {
    type: 'line',
    color: '#000',
    name: 2001,
    marker: {
      enabled: false
    },
    data: [
      1.1, 1.0, 1.1, 2.1, 2.2,
      2.4, 2.2, 3.1, 1.9, 2.4,
      4.3, 4.7, 2.5, 2.2, 2.0,
      2.1, 2.0, 1.5, 1.6, 1.2,
      0.0
    ]
  }]
});

Highcharts.chart('container2', {
  chart: {
    type: 'bar'
  },
  yAxis: {
    min: 0,
    enabled: false,
    title: {
      enabled: false
    }
  },
  xAxis: {
    reversed: false,
    categories: categories,
    tickLength: 0
  },
  title: {
    text: ''
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -20,
    y: 10,
    floating: true,
    borderWidth: 1,
    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
    shadow: true
  },
  credits: {
    enabled: false
  },
  series: [{
    color: '#ccaadd',
    pointPadding: 0,
    groupPadding: 0,
    name: 2011,
    data: [
      2.1, 2.0, 2.1, 2.3, 2.6,
      2.9, 3.2, 3.1, 2.9, 3.4,
      4.3, 4.0, 3.5, 2.9, 2.5,
      2.7, 2.2, 1.1, 0.6, 0.2,
      0.0
    ]
  }, {
    type: 'line',
    color: '#000',
    name: 2001,
    marker: {
      enabled: false
    },
    data: [
      1.1, 1.0, 1.1, 2.1, 2.2,
      2.4, 2.2, 3.1, 1.9, 2.4,
      4.3, 4.7, 2.5, 2.2, 2.0,
      2.1, 2.0, 1.5, 1.6, 1.2,
      0.0
    ]
  }]
});

演示： https://jsfiddle.net/BlackLabel/1fun4t0e/

高图：如何将yAxis移至中心（例如按性别和年龄段分组的人口）

1 个答案: