在谷歌折线图中绘制日期范围栏

Question

我正在尝试绘制谷歌折线图，并在行后面添加一些矩形形状，以表示影响线条行为的日期范围事件。

我正在使用谷歌图表和angular-google-charts库

你知道如何在谷歌排行榜上得到这个吗？

Answer 1

使用带有区域系列的ComboChart 绘制矩形形状

将区域系列的值设置为y轴的最大值，

在行不重合的数据中使用null ...

请参阅以下工作代码段...

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

function drawChart() {
  var dataTable = new google.visualization.DataTable({
    cols: [
      {id: 'x', label: 'Date', type: 'date'},
      {id: 'y', label: 'Fn', type: 'number'},
      {id: 'z', label: 'Shade', type: 'number'}
    ]
  });

  var formatDate = new google.visualization.DateFormat({
    pattern: 'MMM-dd-yyyy'
  });

  var oneDay = (1000 * 60 * 60 * 24);
  var startDate = new Date(2016, 10, 27);
  var endDate = new Date();
  var ticksAxisH = [];
  var dateRanges = [
    {start: new Date(2017, 0, 1), end: new Date(2017, 0, 20)},
    {start: new Date(2017, 1, 5), end: new Date(2017, 1, 10)}
  ];
  var maxShade = 200;
  for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneDay) {
    // x = date
    var rowDate = new Date(i);
    var xValue = {
      v: rowDate,
      f: formatDate.formatValue(rowDate)
    };

    // y = 2x + 8
    var yValue = (2 * ((i - startDate.getTime()) / oneDay) + 8);

    // z = null or max shade
    var zValue = null;
    dateRanges.forEach(function (range) {
      if ((rowDate.getTime() >= range.start.getTime()) &&
          (rowDate.getTime() <= range.end.getTime())) {
        zValue = maxShade;
      }
    });

    // add data row
    dataTable.addRow([
      xValue,
      yValue,
      zValue
    ]);

    // add tick every 7 days
    if (((i - startDate.getTime()) % 7) === 0) {
      ticksAxisH.push(xValue);
    }
  }

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ChartWrapper({
    chartType: 'ComboChart',
    dataTable: dataTable,
    options: {
      chartArea: {
        bottom: 64,
        top: 48
      },
      hAxis: {
        slantedText: true,
        ticks: ticksAxisH
      },
      legend: {
        position: 'top'
      },
      lineWidth: 4,
      series: {
        // line
        0: {
          color: '#00acc1'
        },
        // area
        1: {
          areaOpacity: 0.6,
          color: '#ffe0b2',
          type: 'area',
          visibleInLegend: false
        },
      },
      seriesType: 'line'
    }
  });

  chart.draw(container);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>