Аннотирование баров с использованием API диаграмм Google

Question

Я пытаюсь добавить аннотации к горизонтальным столбцам, аналогичным аннотациям на прикрепленном изображении диаграммы. [Например: аннотация для бара «1» составляет «7,4% (+ 2,4/-19)», бар «3» - «11,7% (+ 2,9/-2,4)» и среднее вертикальное представление линии на изображении] ,

Я использовал гистограмму и сконфигурировал ее варианты визуализации штрихов и интервалов. Но, из документации API Google Charts, Bar Chart не будет поддерживать Annotation/AnnotationText в своей роли.

Какой график мне нужно выбрать из API Google Chart API? Какие параметры мне нужно настроить, чтобы отметить аннотацию? Есть ли какой-либо пример, объясняющий эту проблему с помощью API диаграммы Google?

Изображение является выдержкой из страницы опроса потребителей Google (http://www.google.com/insights/consumersurveys/view?survey=xirgjukonszvg&question=9&subpop&subpop).

Спасибо!

Answer 1

Там в настоящее время нет способа создать отображаемую в визуализации Google Chart. Вы можете создавать строки ошибок, используя DataTable Roles, но BarChart не поддерживает аннотации (это означает, что текст на диаграмме не может быть указан в примере, который вы опубликовали).

Вы можете поиграть с ComboChart, который может поддерживать аннотации, но затем вы застряли с диаграммой столбцов (а не с гистограммой).

Вот код для 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:'#%'}, 
     } 
     ); 
} 

Вот код для версии 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"}} 
    }); 
} 

Вы можете скрыть строку, используя опции, и сделать его немного красивее, но в целом он будет выглядеть похожим (это не так хорошо, как ваш образец).

Если ни один из них не подходит для вас, вам нужно будет написать собственный javascript для добавления всплывающих подсказок (аннотаций) к BarChart вручную. Я не знаю, как (поскольку я не эксперт по javascript), поэтому я оставлю это до вас, если вышеупомянутые обходные пути недостаточно хороши.

Answer 2

Взгляните на эту скрипку: http://jsfiddle.net/augustomen/FE2nh/

Это удалось успешно разместить надписи на верхней части серии с использованием колонок ComboChart. С небольшой адаптацией вы можете поместить ярлыки спереди бара, с выровненным слева.

'волшебный' часть это:

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