谷歌圖表 - 添加「衰退酒吧」

Question

我有一個偉大的谷歌圖表。要爲此圖表添加上下文，我需要在背景中添加一系列可視化區分週末的系列。所顯示的適用於衰退期間而非週末的預期效果處於最底部。使用Google可視化可以創建這種效果嗎？

以下是圖表：

  <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這個效果。

一般的概念是製作堆積的條形圖，然後添加一個系列，在週末顯示圖表的最大值作爲單獨列，並將該系列繪製爲臺階區圖。這將使它看起來像某些系列的背景。

下面是一個例子（複製粘貼到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}} 
    }); 
}