javascript - Highcharts 年龄金字塔堆积条形图(分组)

Question

我想对男性和女性使用 highcharts 年龄金字塔。男人和女人可以分为三个不同的类别。例如 a、b 和 c。我想为每个年龄段的男性和女性三组分别设置一个堆叠条。希望你能帮我解决这个问题。

我创建了以下年龄金字塔 example , 但如您所见，目前还不能添加两个以上的组。

JavaScript

var chart = Highcharts.chart('container', {

  chart: {
    type: 'bar',
    marginLeft: 10
  },

  plotOptions: {
    bar: {
        dataLabels: {
        enabled: true
      }
    }
  },

  xAxis: {
    left: '50%',
    categories: ['15-19', '20-21'],
    lineWidth: 0,
    tickWidth: 0,
    labels: {
      align: 'left',
      x: -18
    },
    title: {
        text: 'Age Group',
      align: 'high',
      rotation: 0,
      x: 40
    }
  },

  yAxis: [{
    left: '55%',
    width: '45%',
    labels: {
      enabled: false
    },
    title: {
      x: -160,
      text: 'Female'
    },
    gridLineWidth: 0
  }, {
    reversed: true,
    width: '45%',
    offset: 0,
    labels: {
      enabled: false
    },
    title: {
      x: 170,
      text: 'Male'
    },
    gridLineWidth: 0
  }],

  series: [{
    data: [1, 3],
    color: {
      linearGradient: {
        x1: 0,
        x2: 0,
        y1: 0,
        y2: 1
      },
      stops: [
        [0, '#3F7EBF'],
        [1, '#1F3F5F']
      ]
    },
  }, {
    data: [2, 5],
        color: {
      linearGradient: {
        x1: 0,
        x2: 0,
        y1: 0,
        y2: 1
      },
      stops: [
        [0, '#980061'],
        [1, '#4C0030']
      ]
    },
    yAxis: 1
  }]
});

这就是我最终想要实现的:

Answer 1

开箱即用的 Highcharts 库不支持此图表类型。

但是，可以使用两个相邻的图表创建类似的东西，其中一个轴反转。检查下面发布的演示和代码。

代码:

Highcharts.chart('container1', {
  chart: {
    type: 'bar'
  },
  title: {
    text: ''
  },
  xAxis: {
    categories: ['15-19', '20-21', '21-25'],
    labels: {
    	enabled: false
    }
  },
  yAxis: {
    min: 0,
    reversed: true,
    title: {
      text: 'males',
      align: 'high'
    }
  },
  credits: {
  	enabled: false
  },
  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },
  series: [{
    name: 'A',
    data: [5, 3, 4]
  }, {
    name: 'B',
    data: [2, 2, 3]
  }, {
    name: 'C',
    data: [3, 4, 4]
  }]
});

Highcharts.chart('container2', {
  chart: {
    type: 'bar'
  },
  title: {
    text: ''
  },
  xAxis: {
    categories: ['15-19', '20-21', '21-25'],
    labels: {
    	align: 'center'
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: 'females',
      align: 'low'
    }
  },
  credits: {
  	enabled: false
  },
  legend: {
    reversed: true
  },
  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },
  series: [{
    name: 'A',
    data: [2, 4, 1]
  }, {
    name: 'B',
    data: [5, 2, 1]
  }, {
    name: 'C',
    data: [4, 1, 2]
  }]
});

#container1 {
  width: 45%;
  float: left;
}

#container2 {
  width: 55%;
}

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

演示:

• > https://jsfiddle.net/BlackLabel/cg5af2dz/