0

Google の Visualization API を使用してタイムラインを生成する Web ページがありますが、jQuery のものをいくつか追加しようとしているのですが、問題が発生しています。だから、私は閉鎖でそれをやろうとしています。ただし、Closure で Visualization API を使用する方法の例が見つからないようです。誰かが私がどこで例を見つけることができるか知っていますか?

私が今持っているものは、AJAX経由でJSONとしてデータをロードするために少し変更を加えたGoogle注釈付きタイムラインの例に基づいています(コピーされた卸売りを読む)。現在、AJAX クエリはハードコードされた URL に対するものであり、フォームから URL を構築しようとしています。


タイムラインを実行する方法を見つけました:

goog.require('gviz.AnnotatedTimeLine');
goog.require('gviz.DataTable');
goog.require('gviz.DataView');

//...

var dataTable = new gviz.DataTable(json_string, 0.6);
var ChartDiv = document.getElementById(chart_id);
chart = new gviz.AnnotatedTimeLine(ChartDiv);
chart.draw(dataTable, {'displayAnnotations': true});

残念ながら、棒グラフ/縦棒グラフを作成する方法をまだ見つけていません(「gviz.BarChart」を要求すると、コンパイル時にエラーが発生します)。


何がうまくいったか:

HTML では:

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript" src="My.js"></script> 
<script type="text/javascript">
  google.load("visualization", "1", {packages:["columnchart"]})
  var ChartGen = function(x) {
    return new google.visualization.ColumnChart(x);
  }
  drawBar(ChartGen);
</script>

JS で:

function drawBar(Lambda) {
  dataTable = new gviz.DataTable(json_string, 0.6);
  var ChartDiv = document.getElementById('chart');
  chart = Lambda(ChartDiv);
  chart.draw(dataTable, {});
}
4

2 に答える 2

1

Google チャート ウィザードに移動し、必要なチャート スタイルをクリックします。

次のページの右側に「Embed with Visualization API」というボタンがあります。これをクリックすると、必要なコードが表示されます。グラフをカスタマイズする場合は、このボタンをクリックする前に行うことができます。

于 2010-10-22T21:46:54.670 に答える
1

closure-library は goog.ui.ServerChart を提供します。

http://closure-library.googlecode.com/svn/docs/class_goog_ui_ServerChart.html

使用方法の例については、デモを参照してください。

http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/serverchart.html

于 2012-01-03T20:51:54.323 に答える