Google Chart - добавьте «бары рецессии»

Question

У меня есть диаграмма Google, которая отлично работает. Чтобы добавить контекст к этой диаграмме, мне нужно добавить серию в фоновом режиме, которая визуально отличает выходные. Желаемый эффект, показанный в отношении периодов рецессии, а не выходных, находится внизу. Можно ли создать этот эффект с помощью Google Visualization?

Вот диаграмма:

  <div id="chart_div" style="width: 100%; height: 500px;"></div> 
      <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
      <script type="text/javascript"> 
      google.load("visualization", "1", {packages:["corechart"]}); 
      google.setOnLoadCallback(drawChart); 
      function drawChart() { 
       var data = google.visualization.arrayToDataTable([ 
... DATA ... 

       ]); 
       var formatter = new google.visualization.NumberFormat(
       {prefix: '$', negativeColor: 'red', negativeParens: true}); 
       formatter.format(data, 1); // Apply formatter to second column 
       formatter.format(data, 2); // Apply formatter to second column 
       formatter.format(data, 3); // Apply formatter to second column 

       var options = {isStacked: true, vAxis: {format: '$#,###'}, title:"MTS Revenue" };   
       var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
       chart.draw(data, options); 
      } 
      </script> 

Answer 1

Да, вы можете достичь этого эффекта с ComboChart.

Общая концепция заключается в создании вашей гистограммы, а затем добавлении серии, которая показывает максимальное значение вашей диаграммы в качестве отдельного столбца в выходные дни, и вычерчивайте эту серию в виде диаграммы steppedArea. Это сделает его похожим на фон для определенных серий.

Вот пример (копия вставить в Google Playground):

function drawVisualization() { 
    // Create and populate the data table. 
    var data = google.visualization.arrayToDataTable([ 
    ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'], 
    ['2004/05', 165,  938,   522,    998,   450,  0], 
    ['2005/06', 135,  1120,  599,    1268,   288,  4000], 
    ['2006/07', 157,  1167,  587,    807,   397,  0], 
    ['2007/08', 139,  1110,  615,    968,   215,  4000], 
    ['2008/09', 136,  691,   629,    1026,   366,  0] 
    ]); 

    // Create and draw the visualization. 
    var ac = new google.visualization.ComboChart(document.getElementById('visualization')); 
    ac.draw(data, { 
    title : 'Monthly Coffee Production by Country', 
    width: 600, 
    height: 400, 
    vAxis: {title: "Cups", minValue: 0, maxValue: 4000}, 
    hAxis: {title: "Month"}, 
    seriesType: "bars", 
    isStacked: true, 
    series: {5: {type: "steppedArea", lineWidth: 0, showInLegend: false}} 
    }); 
}