0

我有一个使用 Google 的 Visualization API 生成时间线的网页,但现在我正在尝试向其中添加一些 jQuery 的东西,事情正在崩溃。所以,我正在尝试用 Closure 来做到这一点。但是,我似乎找不到任何关于如何在 Closure 下使用 Visualization API 的示例。有谁知道我在哪里可以找到任何例子?

我现在得到的是基于(阅读复制批发)谷歌注释时间线示例,稍作修改以通过 AJAX 将数据加载为 JSON。现在 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 图表向导,然后单击所需的图表样式。

下一页的右侧有一个按钮:“嵌入可视化 API”。单击此按钮将为您提供所需的代码。如果要自定义图表,可以在单击此按钮之前执行此操作。

于 2010-10-22T21:46:54.670 回答
1

闭包库提供 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 回答