谷歌图表 - 添加＆＃34;衰退酒吧＆＃34;

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来完成此效果。

一般概念是制作堆积条形图，然后添加一个系列，在周末将图表的最大值显示为单独的列，并将该系列绘制为阶梯式图表。这将使它看起来像某个系列的背景。

以下是一个示例（复制粘贴到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}}
  });
}