10

Google Chart APIを使用して、1 から数百万までの値のグラフを作成しています。

問題 小さい値 (例: 50 未満程度) を表すバーがグラフに表示されず、特定の x 軸に対応する値を確認できません。

バーの上に y 軸の値を何らかの方法で出力できれば、これは解決されます。

ここにも同様の問題がありますが、私の質問には答えません。

Googleインタラクティブ棒グラフの内側の棒の上にラベルを付ける

ここには、1 年以上前の未回答の質問が他にもいくつかあります。誰かが解決策または回避策を今までに見つけていることを願っています。そのため、この質問をもう一度尋ねます。

Google ビジュアライゼーション: 縦棒グラフ、単純な質問だが答えが見つからない

列の上部に値を表示する方法 Google Chart API

この Google 棒グラフをカスタマイズするにはどうすればよいですか? ?

4

2 に答える 2

19

ここで、Andrew Gallant の JSFiddle をチェックしてください。

http://jsfiddle.net/asgallant/QjQNX/

コンボ チャートの巧妙なハックを使用して、探していると思われるものを実現します。

google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Value');
  data.addColumn({type: 'string', role: 'annotation'});

  data.addRows([
    ['Foo', 53, 'Foo text'],
    ['Bar', 71, 'Bar text'],
    ['Baz', 36, 'Baz text'],
    ['Cad', 42, 'Cad text'],
    ['Qud', 87, 'Qud text'],
    ['Pif', 64, 'Pif text']
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, 1, 2]);

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

  chart.draw(view, {
    height: 400,
    width: 600,
    series: {
      0: {
        type: 'bars'
      },
      1: {
        type: 'line',
        color: 'grey',
        lineWidth: 0,
        pointSize: 0,
        visibleInLegend: false
      }
    },
    vAxis: {
      maxValue: 100
    }
  });
}
于 2013-06-11T15:38:23.377 に答える
4

注釈と非表示の線を使用して、いくつかの挫折がありました (たとえば、別のシリーズとしてツールチップに表示される)。

ラベルを SVG に挿入するために、ハックを作成しましたComboChart(いくつかの変更を加えれば動作する可能性がBarChartあります)。ColumnChart

このフィドルをチェックしてください：http://jsfiddle.net/augustomen/FE2nh/

Firefox 21、Chrome 27、IE 9 でテスト済み。

于 2013-07-04T14:41:42.400 に答える