条形图背景

Question

我试图创建一个条形图，如附图所示。

当我做了我在的jsfiddle审判，我不能让灰色栏背景：这是最大的y轴。 我该如何做到这一点？

<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: '' 
     }, 
     subtitle: { 
      text: '' 
     }, 
     xAxis: { 
      categories: [ 
       'Jan', 
       'Feb', 
       'Mar', 
       'Apr', 
       'May', 
       'Jun', 
       'Jul', 
       'Aug', 
       'Sep', 
       'Oct', 
       'Nov', 
       'Dec' 
      ], 
      crosshair: true 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Rainfall (mm)' 
      } 
     }, 
     tooltip: { 
      headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 
      pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + 
       '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', 
      footerFormat: '</table>', 
      shared: true, 
      useHTML: true 
     }, 
     plotOptions: { 
      column: { 
       pointPadding: 0.2, 
       borderWidth: 0 
      } 
     }, 
     series: [{ 
      name: ' ', 
      pointWidth : 28, 
      data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 

     }] 
    }); 
}); 

注 - 最终，这是来自Angularjs项目的一部分。 谢谢， Varun

Answer 1

你可以做一个假的系列，所有的y值作为最大值。保持你的yMax为y的最大系列值。看看at this fiddle

你可能需要进一步做一些定制，就像隐藏工具提示和假冒系列的传说一样。

series: [{ 
     name: ' ', 
     pointWidth : 28, dataLabels: { 
       enabled: false 

      }, color:'#bdbdbd', 
     data: [216.4, 216.4, 216.4, 216.4, 216.4, 216.4, 216.4, 216.4, 216.4, 216.4, 216.4, 216.4] 

    },{ 
     name: ' ',   
     pointWidth : 28, 
     data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 

    }]