javascript - 谷歌图表——添加 "recession bars"

Question

我有一个非常有用的 Google 图表。要向此图表添加上下文，我需要在背景中添加一个系列，以从视觉上区分周末。应用于经济衰退时期而不是周末的预期效果位于底部。是否可以使用 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}}
  });
}