Dessine la barre de dates dans le tableau de google line

J'essaie de dessiner le diagramme de google line combiné avec des formes de rectangle à l'arrière de la ligne pour représenter des événements de plage de dates qui affectent le comportement de la ligne.

J'utilise google charts et angular-google-charts library

Avez-vous une idée de comment je peux obtenir ceci sur Google Maps?

Entrez la description de l'image ici

Utilisez un ComboChart avec une série de zones pour dessiner des formes rectangulaires

Réglez la valeur de la série de zones à la valeur maximale de l'axe des y,

Utilisez null dans les données où les lignes ne coïncident pas …


Voir l'extrait de travail suivant …

 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>