Фоновая диаграмма

Question

Я пытаюсь создать гистограмму, как показано на прилагаемом изображении.

Когда я сделал свое испытание в jsfiddle, я не в состоянии получить серый фон бар: что является максимальным у-оси. Как я могу это достичь?

<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 как максимальное значение 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] 

    }]