使用轴类型“类别”时,x轴对面的高图表人口金字塔未正确标记

时间:2019-01-24 10:47:50

标签: highcharts

我对高图人口金字塔(https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/bar-negative-stack/)进行了如下修改: 我省略了选项“类别”,而是使用了选项“类型:'类别'”,并将类别添加到了数据系列中。我想这样做是因为数据来自文件中的元组。不幸的是,右侧的x轴未正确标记。我希望右侧的x轴标记为与左侧的x轴相同。不使用选项“类别”就可以吗?

这是jsfiddle:https://jsfiddle.net/nehqb9k4/

chart : {
   renderTo: 'container',
   type: 'bar',
   height: 480,
},
xAxis : [{
   type: 'category',
   reversed: false,
}, { // mirror axis on right side
   type: 'category',
   opposite: true,
   linkedTo: 0,
   reversed: false,
}],
yAxis: {
   title: {
       text: null
   },
   labels: {
      formatter: function () {
         return Math.abs(this.value) + '%';
      }
   }
},
plotOptions: {
   series: {
      stacking: 'normal'
   }
},
series: [{
   name: 'Male',
   data: [
      ['0-4',   -2.2],
      ['5-9',   -2.1],
      ['10-14', -2.2],
      ['15-19', -2.4],
      ['20-24', -2.7],
      ['25-29', -3.0],
      ['30-34', -3.3],
      ['35-39', -3.2],
      ['40-44', -2.9],
      ['45-49', -3.5],
      ['50-54', -4.4],
      ['55-59', -4.1],
      ['60-64', -3.4],
      ['65-69', -2.7],
      ['70-74', -2.3],
      ['75-79', -2.2],
      ['80-84', -1.6],
      ['85-89', -0.6],
      ['90-94', -0.3],
      ['95-99', -0.0],
      ['100 +', -0.0]
      ]
   }, {
   name: 'Female',
   data: [
      ['0-4',   2.1],
      ['5-9',   2.0],
      ['10-14', 2.1],
      ['15-19', 2.3],
      ['20-24', 2.6],
      ['25-29', 2.9],
      ['30-34', 3.2],
      ['35-39', 3.1],
      ['40-44', 2.9],
      ['45-49', 3.4],
      ['50-54', 4.3],
      ['55-59', 4.0],
      ['60-64', 3.5],
      ['65-69', 2.9],
      ['70-74', 2.5],
      ['75-79', 2.7],
      ['80-84', 2.2],
      ['85-89', 1.1],
      ['90-94', 0.6],
      ['95-99', 0.2],
      ['100 +', 0.0]
      ]
   }]

1 个答案:

答案 0 :(得分:0)

您需要为第二个系列设置正确的xAxis

series: [{
    // xAxis: 0 by default
    name: 'Male',
    data: [
        ...
    ]
}, {
    name: 'Female',
    xAxis: 1,
    data: [
        ...
    ]
}]

实时演示:https://jsfiddle.net/BlackLabel/70yv1Lae/

API:https://api.highcharts.com/highcharts/series.bar.xAxis