5

添付のチャート画像の注釈と同様に、水平バーに注釈を追加しようとしています。[例: バー '1' の注釈は「7.4% (+2.4/ -.19)」、バー '3' は「11.7% (+2.9/ -2.4)」、画像の平均垂直線表現] .

棒グラフを使用し、棒と間隔をレンダリングするオプションを構成しました。ただし、Google Charts API のドキュメントによると、Bar Chart はその役割で Annotation/ AnnotationText をサポートしません。

Google Chart API からどのチャートを選択する必要がありますか? 注釈をマークするために構成する必要があるオプションは何ですか? Google Chart API を使用してこの問題を説明する例はありますか?

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

ありがとう ！

棒グラフの例

4

2 に答える 2

4

現在、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 の専門家ではないので)方法がわからないので、上記の回避策が十分でない場合は、あなたに任せます。

于 2013-05-13T23:44:19.220 に答える
1

このフィドルを見てみましょう: 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;
}
于 2013-07-04T17:58:12.173 に答える