javascript - 带有全高背景条的 Highcharts 值条

Question

我正在尝试使用 Highcharts 构建一个如下所示的图表，并且基于值而不是百分比: full height background bars

这个想法是它应该显示现金流量，这需要 y 轴上的标签(因此我不能以百分比为基础)。我希望灰色条也具有悬停效果，因此我不能只在绿色图下方添加第二个具有 100% 高度灰色条的图表。

我已经考虑设置一个最大比例，从最大值中减去绿色条，并根据余数向该系列添加一个灰色条，但比例变化太大，我宁愿不采取这条路线。

Answer 1

通过一些工作，我认为您可以使用堆叠百分比图表以及格式化标签和工具提示来实现您想要的结果(据我所知，您需要在 y 轴上显示值而不是百分比)。如果您可以计算最大值，则可以按以下方式设置 y 轴标签的格式:

$(function() {
  //calculate somehow the maximum value
  var max = 23;
  $('#container').highcharts({
    chart: {
      type: 'column'
    },
    title: {
      text: 'Stacked column chart'
    },
    xAxis: {
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Total fruit consumption'
      },
      labels: {
        formatter: function() {
          //format axis y labels
          return this.value / 100 * max;
        }
      }
    },
    tooltip: {
      pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
      shared: true
    },
    plotOptions: {
      column: {
        stacking: 'percent'
      }
    },
    series: [{
      name: 'Other',
      data: [5, 3, 4, 9, 2],
      color: 'gray',
      showInLegend:false
    }, {
      name: 'Jane',
      data: [2, 2, 3, 7, 1]
    }, {
      name: 'Joe',
      data: [3, 4, 4, 7, 5]
    }]
  });
});

演示:https://jsfiddle.net/jjhk0LL8/