Javascript Girl
  1. Javascript Girl
  3. Couleurs d'arrière-plan variables dans le tableau de google line
Intereting Posts
D3.js Définir le niveau de zoom initial Impossible de définir la valeur par défaut dans l'onglet Toggleable Bootstrap de Twitter Comment accéder à un iframe et l'affecter avec jQuery Appliquer jQuery datepicker à plusieurs instances Impossible de supprimer les informations de dossier dans FIrefox 48 Désactivez tous les événements keyup / keydown / keypressed présents sur la page TinyMCE personnalise le menu "fichier" J'essaie de créer un add-on auto-correct en temps réel pour Google Docs à l'aide de Google Apps Script Les requêtes entre domaines de Google Apps Script ont cessé de fonctionner Options ajoutées à <select> par javascript perdu dans le postback Autolink URL in contenteditable Supprimer les espaces avant et arrière dans les clés et valeurs d'objet Json compression for transfer Réinitialiser un modèle avec angular.js Quel est le meilleur style standard pour une implémentation toString?

Couleurs d'arrière-plan variables dans le tableau de google line

Je cherche à dessiner un LineChart de Google assez simple, mais j'aimerais avoir des bandes colorées horizontales dans la zone du graphique, pour indiquer des valeurs bas / moyennes / élevées.

En regardant l'API du graphique, il ne semble pas être possible directement, car chartArea.backgroundColor semble être la seule valeur que je peux définir.

Conscient que cela semble être une limitation des graphiques, est-il possible de recréer cela d'une autre manière, par le biais de toute autre méthode ou magie de javascript?

Voici un exemple de la sorte d'effet que je cherche à produire. Exemple d'effet désiré

Merci d'avance.

En utilisant un ComboChart

Avec seriesType: 'area'

Et isStacked: true

Vous pouvez définir autant de plages que nécessaire

visibleInLegend: false masque la série de zones de la légende

Alors vous pouvez définir un type: personnalisé type: pour la série que vous souhaitez suivre,
Tel que 'line' , dans l'extrait de travail suivant … 

 google.charts.load('current', { callback: function () { var dataTable = new google.visualization.DataTable({ cols: [ {label: 'Time', type: 'number'}, {label: 'Low', type: 'number'}, {label: 'Avg', type: 'number'}, {label: 'High', type: 'number'}, {label: 'Dogs', type: 'number'} ], rows: [ {c:[{v: 0}, {v: 25}, {v: 50}, {v: 25}, {v: 0}]}, {c:[{v: 5}, {v: 25}, {v: 50}, {v: 25}, {v: 24}]}, {c:[{v: 10}, {v: 25}, {v: 50}, {v: 25}, {v: 20}]}, {c:[{v: 15}, {v: 25}, {v: 50}, {v: 25}, {v: 48}]}, {c:[{v: 20}, {v: 25}, {v: 50}, {v: 25}, {v: 53}]}, {c:[{v: 25}, {v: 25}, {v: 50}, {v: 25}, {v: 61}]}, {c:[{v: 30}, {v: 25}, {v: 50}, {v: 25}, {v: 63}]}, {c:[{v: 40}, {v: 25}, {v: 50}, {v: 25}, {v: 66}]}, {c:[{v: 45}, {v: 25}, {v: 50}, {v: 25}, {v: 70}]}, {c:[{v: 50}, {v: 25}, {v: 50}, {v: 25}, {v: 75}]}, {c:[{v: 55}, {v: 25}, {v: 50}, {v: 25}, {v: 78}]}, {c:[{v: 60}, {v: 25}, {v: 50}, {v: 25}, {v: 80}]}, {c:[{v: 65}, {v: 25}, {v: 50}, {v: 25}, {v: 85}]}, {c:[{v: 70}, {v: 25}, {v: 50}, {v: 25}, {v: 90}]} ] }); var options = { chartArea: { width: '60%' }, hAxis: { ticks: [0, 15, 30, 45, 60], title: 'Time' }, isStacked: true, series: { // low 0: { areaOpacity: 0.6, color: '#FFF59D', visibleInLegend: false }, // avg 1: { areaOpacity: 0.6, color: '#A5D6A7', visibleInLegend: false }, // high 2: { areaOpacity: 0.6, color: '#EF9A9A', visibleInLegend: false }, // dogs 3: { color: '#01579B', type: 'line' } }, seriesType: 'area', title: 'Example', vAxis: { ti1cks: [0, 25, 50, 75, 100], title: 'Popularity' } }; var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); chart.draw(dataTable, options); }, packages:['corechart'] }); 
 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>