L'annotation à l'aide de barreaux API Google Chart

Je suis en train d'ajouter des annotations pour les barres horizontales similaire pour les annotations dans le tableau ci-joint l'image. [Par exemple: L'annotation de bar " 1 " "de 7,4% (+2.4/-.19)", bar '3' "11.7% (+2.9/-2.4)" et la moyenne de la ligne verticale de la représentation de l'image].

J'ai utilisé un graphique à barres et configuré les options de barres de rendu et l'intervalle. Mais, à partir du Google Charts documentation de l'API, le Diagramme à barres ne prend pas en charge l'Annotation/AnnotationText dans son rôle.

Graphique j'ai à choisir à partir de Google Chart API?
Quelles sont les options que je dois configurer pour marquer l'annotation?
Est-il un exemple qui explique ce problème à l'aide de Google Chart API?

L'image est un extrait de google enquête auprès des consommateurs page (http://www.google.com/insights/consumersurveys/view?survey=xirgjukonszvg&question=9&subpop&subpop).

Merci !

L'annotation à l'aide de barreaux API Google Chart

OriginalL'auteur Balu Varanasi | 2013-05-13

  1. 4

    Il n'existe actuellement aucun moyen pour créer le graphique affiché dans google visualisation. Vous pouvez créer des barres d'erreur à l'aide de DataTable Rôles, mais BarChart ne prend pas en charge les annotations (ce qui signifie que vous ne pouvez pas avoir le texte sur le tableau comme dans l'exemple que vous avez posté).

    Vous pouvez jouer avec un ComboChart, ce qui peut aider les annotations, mais puis vous êtes coincé avec un histogramme (pas un graphique à barres).

    Voici le code pour un barchart:

    function drawVisualization() {
  //Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn({type:'string', label:'label'});
  data.addColumn({type:'number', label:'value', pattern:'#.#%'});
  data.addColumn({type:'number', role:'interval', pattern:'#.#%'});  //interval role col.
  data.addColumn({type:'number', role:'interval', pattern:'#.#%'});  //interval role col.
  data.addColumn({type:'string', role:'annotation'}); //annotation role col. -- not enabled for bar charts
  data.addColumn({type:'string', role:'annotationText'}); //annotationText col. -- not enabled for bar charts
  data.addRows([
    ['1', 0.074, 0.055, 0.098, 'A', '7.4% (-1.9/2.4)'],
    ['2', 0.04, 0.027, 0.059, 'B', '4.0% (-1.3/1.9)'],
    ['3', 0.117, 0.093, 0.146, 'C', '11.7% (-2.4/2.9)'],
    ['4', 0.217, 0.185, 0.252, 'D', '21.7% (-3.2/3.5)'],
    ['5', 0.552, 0.511, 0.592, 'E', '55.2% (-4.1/4.0)'],
  ]);

  //Create and draw the visualization.
  new google.visualization.BarChart(document.getElementById('visualization')).
    draw(data,
         {title:"SubPopulation B",
          width:600, height:400,
          vAxis: {title: "Importance"},
          hAxis: {title: "Percent", format:'#%'},
         }
        );
}

    Voici le code pour un comboChart version:

    function drawVisualization() {
//Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn({type:'string', label:'label'});
data.addColumn({type:'number', label:'value', pattern:'#.#%'});
data.addColumn({type:'number', label:'line', pattern:'#.#%'});
data.addColumn({type:'number', role:'interval', pattern:'#.#%'});  //interval role col.
data.addColumn({type:'number', role:'interval', pattern:'#.#%'});  //interval role col.
data.addColumn({type:'string', role:'annotation'}); //annotation role col. -- not enabled for bar charts
data.addColumn({type:'string', role:'annotationText'}); //annotationText col. -- not enabled for bar charts
data.addRows([
['1', 0.074, 0.074, 0.055, 0.098, '7.4% (-1.9/2.4)', '7.4% (-1.9/2.4)'],
['2', 0.040, 0.040, 0.027, 0.059, '4.0% (-1.3/1.9)', '4.0% (-1.3/1.9)'],
['3', 0.117, 0.117, 0.093, 0.146, '11.7% (-2.4/2.9)', '11.7% (-2.4/2.9)'],
['4', 0.217, 0.217, 0.185, 0.252, '21.7% (-3.2/3.5)', '21.7% (-3.2/3.5)'],
['5', 0.552, 0.552, 0.511, 0.592, '55.2% (-4.1/4.0)', '55.2% (-4.1/4.0)'],
]);
//Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Subpopulation B',
width: 600,
height: 400,
vAxis: {title: "Percentage", format:'#%'},
hAxis: {title: "Importance"},
seriesType: "bars",
series: {1: {type: "line"}}
});
}

    Vous pouvez masquer la ligne en utilisant les options, et le rendre un peu plus jolie, mais en général ça va ressembler (il n'est pas aussi jolie que votre échantillon).

    Si aucune de ces sont bon pour vous, alors vous aurez besoin d'écrire du code javascript personnalisé pour ajouter des info-bulles (annotations) à la BarChart manuellement. Je ne sais pas comment (car je ne suis pas expert javascript), donc je vais laisser ça pour vous si les solutions ci-dessus ne sont pas assez bon.

    OriginalL'auteur jmac

  2. 1

    Prendre un coup d'oeil à ce violon: http://jsfiddle.net/augustomen/FE2nh/

    Il réussi à placer des étiquettes sur le dessus d'un ComboChart à l'aide de colonnes de la série. Avec peu d'adaptation, vous pouvez placer les étiquettes devant de la barre, aligné à gauche.

    La "magie", c'est

        /* Here comes the hack!
We're going to add a svg text element to each column bar.
This code will work for this data setup only. If you add/remove a series, this code must be adapted
*/    
rects = mydiv.find('svg > g > g > g > rect');
var row = 0;
for (i = 0; i < rects.length; i++) {
//this selector also retrieves gridlines
//we're excluding them by height
el = $(rects[i]);
if (parseFloat(el.attr("height")) <= 2) { continue; }
aparent = el.parent();
do { //skips 'null' values
text = data.getValue(row++, 1);
} while (text == null && row < data.getNumberOfRows());
if (text) {
text = formatter.formatValue(text);
//see below
pos = getElementPos(el);
attrs = {x: pos.x + pos.width / 2, y: pos.y - 2,
fill: 'black', 'font-family': 'Arial', 'font-size': 11, 'text-anchor': 'middle'};
aparent.append(addTextNode(attrs, text, aparent));
}
}
function getElementPos($el) {
//returns an object with the element position
return {
x: parseFloat($el.attr("x")),
width: parseFloat($el.attr("width")),
y: parseFloat($el.attr("y")),
height: parseFloat($el.attr("height"))
}
}
function addTextNode(attrs, text, _element) {
//creates an svg text node
var el = document.createElementNS('http://www.w3.org/2000/svg', "text");
for (var k in attrs) { el.setAttribute(k, attrs[k]); }
var textNode = document.createTextNode(text);
el.appendChild(textNode);
return el;
}

    OriginalL'auteur Augusto Men