Google Charts 倒置面积图答案

【问题标题】：Google Charts upside-down area chartGoogle Charts 倒置面积图
【发布时间】：2018-03-24 04:52:20
【问题描述】：

如何创建一个既有正常面积又有“倒置”面积的面积图？

已经查看their docs，但没有找到解决方案。

最终结果应该是这样的：

你可以在这个jsfiddle看到我目前的状态。

  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Blue', 'Red'],
      ['0',  0,      20],
      ['2',  0,      20],
      ['4',  0,       20],
      ['6',  1,      19],
      ['8',  2,      18],
      ['10',  3,      17],
      ['12',  4,      16],
      ['14',  5,      15],
      ['16',  6,      14],
      ['18',  7,      13],
      ['20',  8,      12],
      ['22',  9,      11],
      ['24',  10,      10]
    ]);

    var options = {
      title: 'Company Performance',
      hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
      vAxis: {minValue: 0}
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

【问题讨论】：

请显示您使用的代码，至少是选项和示例数据。我猜你把这两个系列放在两个单独的轴上，如果是这样，你需要使用 viewWindow 选项强制它们具有相同的对齐方式。
请查看更新后的问题@dlaliberte
抱歉，我误解了您想要最终结果。但是鉴于您目前的状态（谢谢），这更清楚了。投反对票的人应该重新考虑，因为这是个好问题。

标签： javascript charts google-visualization

【解决方案1】：

Google Charts AreaChart 填充从数据线向下或向上到基线的区域。但是基线（当前）仅适用于轴，并且您实际上需要两个不同的基线，一个位于一个系列的顶部，一个位于另一个系列的底部，因此您必须采取一些技巧来获得您想要的东西。

基本上，将每个系列定位到不同的轴，每个轴都有自己的基线，并将两个轴与相同的 viewWindow 对齐。像这样：

var options = {
  title: 'Company Performance',
  hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
  vAxes: {
    0: {viewWindow: { min: 0, max: 20 }, baseline: 0},
    1: {viewWindow: { min: 0, max: 20 }, baseline: 20},
  },
  series: {
    1: { targetAxisIndex: 1 }
  }
};

请参阅update to your jsfiddle。

【讨论】：

哇，这太棒了，完全符合我的要求！谢谢！