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/

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

使用此功能，您可以填充一个数据数组，您可以将其追加到高级图表中以获得灰色背景条。

Highcharts价值酒吧与全高背景酒吧

2 个答案: