Javascript 带全高背景条的Highcharts值条

我正在尝试使用Highcharts构建一个类似这样的图表，它基于值，而不是百分比：

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

---

我曾考虑设置一个最大刻度，从最大值中减去绿色条，然后根据余数在序列中添加一个灰色条，但刻度变化太大，我宁愿不走这条路。

只需做一点工作，我认为您可以使用堆叠百分比图表、格式标签和工具提示（据我所知，您需要在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]
    }]
  });
});

$（函数（）{
//计算出最大值
var max=23；
$（“#容器”）。高图({
图表：{
类型：“列”
},
标题：{
文本：“堆叠柱形图”
},
xAxis：{
类别：[‘苹果’、‘橘子’、‘梨’、‘葡萄’、‘香蕉’]
},
亚克斯：{
分:0,，
标题：{
正文：“水果总消费量”
},
标签：{
格式化程序：函数（）{
//设置y轴标签的格式
返回此值/100*最大值；
}
}
},
工具提示：{
pointFormat:“{series.name}:{point.y}（{point.percentage:.0f}%）
”，
分享：真的
},
打印选项：{
专栏：{
堆叠：“百分比”
}
},
系列：[{
名称：'其他'，
数据：[5,3,4,9,2]，
颜色：'灰色'，
showInLegend:false
}, {
姓名：'简'，
数据：[2,2,3,7,1]
}, {
名字：'乔'，
数据：[3,4,4,7,5]
}]
});
});

---

演示：

解决方案变得简单多了，因为我一点也不犹豫，构建了计算最大可能值的函数。该图现在由堆叠的条组成，这些条位于横跨整个高度的条的顶部（加上一点边距，我将在下面解释）

为了让这些条堆叠起来，这里是我的结构的重要部分

chart: {
    type: 'column'
},
yAxis: {
    gridLineWidth: 1,
    minorGridLineWidth: 0,
    maxPadding:0,
    endOnTick:false  //This is important, otherwise highcharts will add its own padding to your graph
},
plotOptions:{
    column:{
        grouping:false,
        groupPadding: 0,
        shadow:false
    }
}

为了得到灰色背景条，我需要计算图表的上限。我还希望在图表顶部和数据之间有一点空白。但是，由于我处理的数字范围很广，从数千到数百万，所以这并不像四舍五入到一个固定的十位数那么简单。因此，我构建了这个函数，为图表顶部提供15%的填充

function topRoundRange(num){
    // This variable tells me how many tens places are in the number, and then subtracts two.  Eg, 100,000 will be rounded to the fourth tens place, the nearest 1000
    var place = num.toString().length - 2;

    // Save that exponent for later
    var exponent = Math.pow(10,place);

    // divide the number by the exponent to get a roundable number, then round it.  eg 19,257/10^3 rounded is 19
    var simplified = Math.round(num/exponent);

    // this variable will add the 15% padding to the height
    var rounded = Math.round(simplified*1.15);

    // return our maximum value!
    return(rounded*exponent)
}

使用此功能，您可以填充一个数据数组，该数组可以附加到灰色背景条的highcharts中