我有一个网页,它使用 Google 的可视化 API 来生成时间线,但现在我尝试向其中添加一些 jQuery 内容,但事情却失败了。所以,我尝试用 Closure 来做到这一点。但是我似乎找不到任何关于如何在 Closure 下使用可视化 API 的示例。 有人知道我在哪里可以找到任何示例吗?
我现在所得到的是基于(批量阅读复制的)Google 带注释的时间轴示例,稍作修改即可通过 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, {});
}
I have a web page that uses Google's Visualization API to generate a timeline but now that I'm trying to add some jQuery stuff to it, things are falling over. So, I'm trying to do it with Closure. However I can't seem to find any examples of how to use the Visualization API under Closure. Does anyone know where I can find any examples?
What I've got now is based on (read copied wholesale) the Google Annotated Timeline Example with a little modification to load the data via AJAX as JSON. Right now the AJAX query is to a hard coded URL and I'm trying to make it construct the URL from a form.
I've found how to do time lines:
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});
Unfortunately, I have yet to find how to make a Bar/Column Chart (asking for 'gviz.BarChart' results in compile time errors).
What ended up working:
In the 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>
In the JS:
function drawBar(Lambda) {
dataTable = new gviz.DataTable(json_string, 0.6);
var ChartDiv = document.getElementById('chart');
chart = Lambda(ChartDiv);
chart.draw(dataTable, {});
}
发布评论
评论(2)
转到 Google 图表向导,然后点击您想要的图表样式。
下一页的右侧有一个按钮:“嵌入可视化 API”。单击此按钮将为您提供所需的代码。如果您想自定义图表,可以在单击此按钮之前完成此操作。
Go to the Google Chart Wizard and click on the chart style that you want.
The next page has a button on the right hand side: "Embed with Visualization API". Clicking this will give you the code you need. If you want to customise the chart, you can do that before clicking this button.
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
closure-library provides goog.ui.ServerChart.
http://closure-library.googlecode.com/svn/docs/class_goog_ui_ServerChart.html
See the demo for an example of how to use it:
http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/serverchart.html