带有全高背景条的 Highcharts 值条答案

【问题标题】：Highcharts value bars with full height background bars带有全高背景条的 Highcharts 值条
【发布时间】：2015-12-16 23:09:27
【问题描述】：

我正在尝试使用 Highcharts 构建一个看起来像这样的图表，并且基于值，而不是百分比： full height background bars

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

我已经考虑设置一个最大比例，从最大值中减去绿色条，然后根据余数在系列中添加一个灰色条，但比例会如此多样化，我宁愿不走这条路。

【问题讨论】：

标签： javascript jquery highcharts

【解决方案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/

【讨论】：

【解决方案2】：

一旦我咬紧牙关并构建函数来计算最大可能值，解决方案最终会简单得多。该图表现在由堆叠的条形图组成，这些条形图位于跨越整个高度的条形顶部（加上一点边距，我将在下面解释）。

为了让条形图堆叠，这是我的结构的重要部分

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)
}

使用此函数，您可以填充一个数据数组，您可以将其附加到灰色背景条的高图。

【讨论】：