Annotazione delle barre utilizzando l'API Google Chart

Question

Sto tentando di aggiungere annotazioni alle barre orizzontali simili alle annotazioni nell'immagine del grafico allegata. [Ad esempio: l'annotazione per la barra '1' è "7.4% (+ 2.4/-.19)", la barra '3' è "11.7% (+ 2.9/-2.4)" e la rappresentazione della linea verticale media nell'immagine] .

Ho utilizzato un grafico a barre e configurato le sue opzioni per il rendering di barre e intervallo. Tuttavia, dalla documentazione dell'API di Google Charts, il grafico a barre non supporterà Annotation/AnnotationText nel suo ruolo.

Quale grafico devo scegliere dall'API Google Chart? Quali opzioni devo configurare per contrassegnare l'annotazione? C'è qualche esempio che spiega questo problema utilizzando l'API di Google Chart?

L'immagine è un estratto dalla pagina di sondaggio sui consumatori di Google (http://www.google.com/insights/consumersurveys/view?survey=xirgjukonszvg&question=9&subpop&subpop).

Grazie!

Answer 1

Non v'è attualmente alcun modo per creare il grafico visualizzato in Google visualizzazione. Puoi creare barre di errore usando DataTable Roles, ma BarChart non supporta annotazioni (il che significa che non puoi avere il testo sul grafico come nell'esempio che hai pubblicato).

È possibile armeggiare con un ComboChart, che può supportare annotazioni, ma poi si rimane bloccati con un istogramma (non un grafico a barre).

Ecco il codice per 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:'#%'}, 
     } 
     ); 
} 

Ecco il codice per una versione comboChart:

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"}} 
    }); 
} 

È possibile nascondere la linea utilizzando le opzioni, e farlo sembrare un po 'più bella, ma in generale avrà un aspetto simile (non è bello come il tuo campione).

Se nessuna di queste opzioni è accettabile, è necessario scrivere un javascript personalizzato per aggiungere i suggerimenti (annotazioni) allo BarChart manualmente. Non so come (dato che non sono un esperto di javascript), quindi ti lascio questo a te se i suddetti rimedi non sono abbastanza buoni.

Answer 2

Date un'occhiata a questo violino: http://jsfiddle.net/augustomen/FE2nh/

E 'riuscito con successo a posizionare le etichette in cima ad una ComboChart utilizzando colonne serie. Con poco adattamento è possibile posizionare le etichette nella parte anteriore della barra, allineato a sinistra.

La parte 'magia' è questo:

/* 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; 
}