Googleのライングラフの日付範囲バーを描く

Question

私は、ラインの挙動に影響する日付範囲のイベントを表すために、ラインの裏側にいくつかの長方形の形を組み合わせてGoogleの線グラフを描画しようとしています。

私はGoogleのチャートと

angular-google-chartsライブラリを使用していますが、私はGoogleのチャート上でこれを取得することができますどのように任意のアイデアを持っていますか？

Answer 1

が

、y軸の最大値に 領域一連の値を設定 ドロー矩形形状に領域シリーズとComboChartを使用

行が一致しないデータにnullを使用してください。

---

シェーディングなど地域のシリーズ、[この回答]（http://stackoverflow.com/aで、ComboChartを使用する必要が

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>