Google Chart APIを使用してバーに注釈を付ける

Question

添付されたチャート画像のアノテーションに類似したアノテーションを水平バーに追加しようとしています。例えば、バー '1'の注釈は「7.4％（+ 2.4/-1.19）」であり、バー3は「11.7％（+ 2.9/-2.4）」であり、画像の平均垂直線表示] 。

私は棒グラフを使用し、棒グラフと間隔をレンダリングするオプションを設定しました。しかし、Google Charts APIのドキュメントから、棒グラフはAnnotation/AnnotationTextをその役割でサポートしません。

Google Chart APIから選択する必要があるグラフはどれですか？ 注釈を設定するためにどのようなオプションを設定する必要がありますか？ Google Chart APIを使用してこの問題を説明する例はありますか？

画像はGoogle消費者調査ページ（http://www.google.com/insights/consumersurveys/view?survey=xirgjukonszvg&question=9&subpop&subpop）の抜粋です。

ありがとうございます！

Answer 1

Googleのビジュアライゼーションに表示されているグラフを作成する方法はありません。 DataTable Rolesを使用してエラーバーを作成できますが、BarChartは注釈をサポートしていません（つまり、投稿した例のようにグラフにテキストを表示できないことを意味します）。

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', 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; 
}