web-dev-qa-db-ja.com

Google縦棒グラフにラベルを付ける方法

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

問題小さい値（例：50未満など）を表すバーはグラフに表示されず、特定の値に対応する値を確認できませんx軸。

どういうわけかバーの上にy軸の値を印刷できれば、これは解決されますが、APIドキュメントでその方法についての言及は見つかりませんでした。

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

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

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

Google Visualization：縦棒グラフ、簡単な質問ですが、答えが見つかりません

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

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

javascriptjquerychartsgoogle-visualizationjqplot
10
Watt

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
    }
  });
}
19
Jeremy Faller

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

ラベルをSVGに挿入するために、ComboChartをハックしました（BarChartとColumnChartでも機能しますが、いくつかの変更が加えられています）。

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

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

4
Augusto Men