Javascript Girl
  1. Javascript Girl
  3. Barres centrées sur Google Chart BarChart?
Intereting Posts
Pourquoi la console JS renvoie un extra indéfini? Knockout incapable de traiter la liaison "foreach" L'objet ne prend pas en charge la propriété ou la méthode 'transformNode' dans Internet Explorer 10 (Windows 8) Rétroaction automatique sur l'erreur JavaScript Déplacement d'un objet le long d'une ligne droite à une vitesse constante du point A à B Comment aligner correctement l'entrée de texte pour réagir en mode natif? Comment se connecter via php curl qui est soumis par javascript, c'est-à-dire pas de bouton de soumission dans la forme Problème avec HTML Parser dans IE Chargez jQuery avec Javascript et utilisez jQuery Chargement du fichier local dans le navigateur référencé css ou js Cordova InAppBrowser publie un formulaire pour url Erreur IE9: SCRIPT5007: Impossible d'obtenir la valeur de la propriété 'ajax': l'objet est nul ou indéfini Javascript: lors de l'utilisation de l'objet littéral, la commande des propriétés est-elle importante? Comment puis-je faire correspondre un regex au début ou à la fin de la ligne? Pourquoi l'ajout dynamique de .onclic sur un élément img, en boucle, nécessite-t-il une fonction de retour ()?

Barres centrées sur Google Chart BarChart?

Existe-t-il un moyen d'utiliser l'API Google Chart Javascript pour centrer les barres sur un diagramme à barres semblable à celui-ci – Exemple de Google Chart ? Je voudrais imiter un graphique en entonnoir avec Google Charts. Google Charts ne prend pas en charge un type de graphique en entonnoir.

Entrez la description de l'image ici

Oui, c'est possible. En principe, ce qu'ils font dans cet exemple, c'est créer un graphique à barres de base ( http://code.google.com/apis/chart/interactive/docs/gallery/barchart.html ). Pour obtenir cet effet «entonnoir», ils créent un tableau empilé (en javascript, voir la propriété isStacked). Le premier élément qu'ils colorent en blanc et l'élément suivant dans cet exemple est orange.

Vous pouvez le voir en modifiant la propriété de couleur: chco = ffffff, FF9900, par exemple chco = aaaaaa, FF9900.

Http: //chart.apis.google.com/chart? Cht = bhs & chco = aaaaaa, FF9900 & chxt = x, x, y & chxl = 1: Pourcentage% 20conversant | 2: | Étape% 206 | Étape% 205 | Étape% 204 | Étape% 203 | Étape% 202 | Étape% 201 & chxp = 1,50 | 3,50 & chd = t: 0,12,5,28,29,35,5,48.5 | 100,75,44,42,29,3 & chbh = a & chs = 800×230 & chm = N **%, 000000,1, -1,11, c & chds = 0,100

Ensuite, vous verrez qu'il s'agit d'un graphique empilé de base, et pas vraiment un nouveau type de graphique.

Le code suivant montre comment procéder: 

function drawVisualization() { // Create and populate the data table. var data = new google.visualization.DataTable(); var raw_data = [['Invisible', 10, 20, 30, 40], ['Visible', 80, 60, 40, 20]]; var years = ["Step1", "Step2", "Step3", "Step4"]; data.addColumn('string', 'Year'); for (var i = 0; i < raw_data.length; ++i) { data.addColumn('number', raw_data[i][0]); } data.addRows(years.length); for (var j = 0; j < years.length; ++j) { data.setValue(j, 0, years[j].toString()); } for (var i = 0; i < raw_data.length; ++i) { for (var j = 1; j < raw_data[i].length; ++j) { data.setValue(j-1, i+1, raw_data[i][j]); } } // Create and draw the visualization. new google.visualization.BarChart(document.getElementById('visualization')). draw(data, {title:"Yearly Coffee Consumption by Country", width:600, height:400, colors: ['ffffff','aaaaaa'], vAxis: {title: "Year"}, hAxis: {title: "Cups", gridlineColor : 'ffffff'}, isStacked: true} ); }