使用Google的Visualization API和Closure生成一個BarChart

我有一個使用Google的Visualization API生成時間軸的網頁，但現在我試圖向它添加一些jQuery的東西，事情正在崩潰。所以，我試圖用Closure做到這一點。不過，我似乎無法找到任何關於如何在Closure下使用Visualization API的例子。 有誰知道我在哪裏可以找到任何例子？使用Google的Visualization API和Closure生成一個BarChart

我現在得到的是基於Google Annotated Timeline Example的Google Annotated Timeline Example的一些修改，以通過AJAX作爲JSON加載數據。現在，AJAX查詢是一個硬編碼的網址，我正在努力使其成爲construct the URL from a form。

我發現怎麼辦時間線：

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});

不幸的是，我還沒有找到如何使Bar/Column Chart（詢問「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, {}); 
}

來源

2010-10-15 BCS

給我們一個樣本，我們可以看到你的努力做 – Petah 2010-10-15 02:14:44

轉到Google Chart Wizard並單擊圖表樣式，你想。

下一頁在右側有一個按鈕：「嵌入可視化API」。點擊這個會給你你需要的代碼。如果你想自定義圖表，你可以在點擊這個按鈕之前做到這一點。

來源

2010-10-22 21:46:54 Gus

首先，我寧可不使用圖像圖表和第二，「新的google.visualization。*」不關閉下工作。 – BCS 2010-10-22 22:05:32

碰巧，只有一行的內容不起作用，所以添加一個lambda作爲間接級別來解決它。 – BCS 2010-10-22 23:12:27

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-03 20:51:54 ahochhaus

這是使用服務器端渲染。我特別尋找客戶端SVG/Canvas呈現形式。 – BCS 2012-01-06 01:08:46

有道理。爲了幫助其他人閱讀本文，[goog.ui.ServerChart]（https://groups.google.com/forum/?fromgroups#!topic/closure-library-discuss/GslON64NSEA）已被[棄用]（https：/ /developers.google.com/chart/terms），因此它對新代碼不好。 – ahochhaus 2012-04-26 16:36:11

使用Google的Visualization API和Closure生成一個BarChart

回答

相關問題