使用 Google 的 Visualization API 和 Closure 生成 BarChart

发布于 2024-09-27 21:31:44 字数 1749 浏览 10 评论 0 原文

我有一个网页，它使用 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, {});
}

分享到QQ

分享到微博