X轴上使用不同Y轴的Highcharts列类别

Question

我正在使用柱形图显示平均结果。 在X轴上，我想显示女性用户，男性用户以及男女的平均生命。 但是，Y轴范围差别很大，因为最小读数小于30，最大读数大于1000（BMR）。 这使得图表变得更难以阅读，因为<30个读数的列几乎是不可见的。 如何读取> 1000（BMR）以使用另一个Y轴？

我试图在系列中使用linkedTo

            {
                name: 'Male',
                linkedTo: ':previous',
                stack: 10,
                yAxis: 1,
                tooltip: { valueSuffix: ` of total {point.numOfUser} users` },
                dataLabels: { enabled: true },
                data: [this.state.maleAvrBmr],
            }, {
                name: 'Female',
                linkedTo: ':previous',
                stack: 11,
                yAxis: 1,
                tooltip: { valueSuffix: ` of total {point.numOfUser} users` },
                dataLabels: { enabled: true },
                data: [this.state.femaleAvrBmr],
            }, {
                name: 'Male & Female',
                linkedTo: ':previous',
                stack: 12,
                yAxis: 1,
                tooltip: { valueSuffix: ` of total {point.numOfUser} users` },
                dataLabels: { enabled: true },
                data: [this.state.allAvrBmr],
            }

但X轴类别却被弄乱了，如图所示。

任何帮助表示赞赏。 在此先感谢您，我的英语很抱歉。

Answer 1

这个问题非常困难，因为每个系列都可以绑定到单独的yAxis，但是无法绑定一个系列中的特定点。 解决方法是添加一个带有空点的附加序列，以便可以将一组列绑定到第二个yAxis：

  series: [{
    name: 'Tokyo',
    id: 'Tokyo',
    color: '#7BB5EC',
    data: [49.9, 71.5, null, 129.2]
  }, {
    name: 'New York',
    id: 'New York',
    color: '#000',
    data: [83.6, 78.8, null, 93.4]
  }, {
    name: 'London',
    id: 'London',
    color: '#90ED7D',
    data: [48.9, 38.8, null, 41.4]
  }, {
    name: 'Berlin',
    id: 'Berlin',
    color: '#F7A35B',
    data: [42.4, 33.2, null, 39.7]
  }, {
    linkedTo: 'Tokyo',
    yAxis: 1,
    color: '#7BB5EC',
    data: [null, null, 1006.4, null]
  }, {
    linkedTo: 'New York',
    yAxis: 1,
    color: '#000',
    data: [null, null, 906.2, null]
  }, {
    linkedTo: 'London',
    yAxis: 1,
    color: '#90ED7D',
    data: [null, null, 553.1, null]
  }, {
    linkedTo: 'Berlin',
    yAxis: 1,
    color: '#F7A35B',
    data: [null, null, 696.8, null]
  }]

演示：

• https://jsfiddle.net/BlackLabel/uotprsh7/

但是，这引起了另一个问题。 列组未正确居中，因为空点占用空间。 可以通过添加自定义逻辑来解决此问题，该逻辑将使组居中，而无需为空点计算空间。 检查下面的演示和代码。

码：

function centerColumns(chart) {
  var xAxis = chart.xAxis[0],
    categories = xAxis.categories,
    catLen = categories.length,
    catOffset = xAxis.width / catLen,
    catStart = catOffset / 2,
    sortedPoints = {},
    tempPoint1 = chart.series[0].points[0],
    tempPoint2 = chart.series[1].points[0],
    pointWidth = tempPoint1.pointWidth,
    spaceWidth = tempPoint2.barX - tempPoint1.barX - pointWidth,
    category,
    pointsLen,
    groupWidth,
    point,
    newX,
    cat,
    key,
    i;

  for (i = 0; i < catLen; i++) {
    sortedPoints[categories[i]] = {
      plotLeft: catStart + i * catOffset,
      points: []
    }
  }

  chart.series.forEach(function(series) {
    series.points.forEach(function(p) {
      cat = p.category;

      if (!p.isNull) {
        sortedPoints[cat].points.push(p);
      }
    });
  });

  for (key in sortedPoints) {
    category = sortedPoints[key];
    pointsLen = category.points.length;
    groupWidth =
      pointsLen * pointWidth + (pointsLen - 1) * spaceWidth;

    for (i = 0; i < pointsLen; i++) {
      point = category.points[i];
      newX = category.plotLeft - groupWidth / 2 +
        i * (pointWidth + spaceWidth);

      point.graphic.attr({
        x: newX
      });
    }
  }
}

...

chart: {
  type: 'column',
  height: 300,
  events: {
    render: function() {
      centerColumns(this);
    }
  }
}

演示：

• https://jsfiddle.net/BlackLabel/c2u1Ldft/