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/

Answer 2

只需多个series的数据和stacking: 'normal'就可以解决问题

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

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

  title: '',

  plotOptions: {
    bar: {
      dataLabels: {
        enabled: false,
      }
    },
    series: {
      stacking: 'normal'
    }
  },

  xAxis: {
    left: '50%',
    categories: ['15-19', '20-21'],
    lineWidth: 0,
    tickWidth: 0,
    offset: 0,
    labels: {
      enabled: true,
      align: 'left',
      x: -18
    },
    stackLabels: {
      enabled: true,
      align: 'right',
      x: 20
    },
    title: {
      text: 'age group',
      align: 'high',
      rotation: 0,
      x: 40
    }
  },

  yAxis: [{
    left: '55%',
    width: '45%',
    offset: 0,
    labels: {
      enabled: false
    },
    title: {
      x: -210,
      text: 'males'
    },
    gridLineWidth: 0
  }, {
    reversed: true,
    width: '45%',
    offset: 0,
    labels: {
      enabled: false
    },
    title: {
      x: 210,
      text: 'females'
    },
    stackLabels: {
      enabled: true,
      align: 'left',
      x: -20
    },
    gridLineWidth: 0
  }],

  series: [{
    name: 'A (m)',
    data: [6, 2],
    color: '#000',
    yAxis: 1
  }, {
    name: 'B (m)',
    data: [2, 2],
    color: '#02aff1',
    yAxis: 1
  }, {
    name: 'C (m)',
    data: [2, 2],
    color: '#e0301e',
    yAxis: 1
  }, {
    name: 'A (f)',
    data: [2, 2],
    color: '#000',
  }, {
    name: 'B (f)',
    data: [2, 2],
    color: '#02aff1',
  }, {
    name: 'C (f)',
    data: [6, 2],
    color: '#e0301e',
  }]
});

<script src="https://code.highcharts.com/highcharts.src.js"></script>

<div id="container"></div>

Highcharts年龄金字塔堆积棒（分组）

2 个答案: