示範如何製作一個將資料顯示在表格裡面的視覺效果:
<![CDATA[
// Class constructor. Parameter container is a DOM element.
function MyTable(container) {
this.containerElement = container;
}
// Main drawing logic.
// Parameter data is of type google.visualization.DataTable.
// Parameter options is a name/value map of options.
MyTable.prototype.draw = function(data, options) {
// Create an html table
var showLineNumber = options.showLineNumber; // Boolean configuration option.
var html = [];
html.push('<table border="1">');
// Header row
html.push('<tr>');
if (showLineNumber) {
html.push('<th>Seq</th>');
}
for (var col = 0; col < data.getNumberOfColumns(); col++) {
html.push('<th>' + this.escapeHtml(data.getColumnLabel(col)) + '</th>');
}
html.push('</tr>');
for (var row = 0; row < data.getNumberOfRows(); row++) {
html.push('<tr>');
if (showLineNumber) {
html.push('<td align="right">', (row + 1), '</td>');
}
for (var col = 0; col < data.getNumberOfColumns(); col++) {
html.push(data.getColumnType(col) == 'number' ? '<td align="right">' : '<td>');
html.push(this.escapeHtml(data.getFormattedValue(row, col)));
html.push('</td>');
}
html.push('</tr>');
}
html.push('</table>');
this.containerElement.innerHTML = html.join('');
}
// Utility function to escape HTML special characters
MyTable.prototype.escapeHtml = function(text) {
if (text == null)
return '';
return text.replace(/&/g, '&amp;').replace(/</g, '&lt;')
.replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}
]]>
視覺效果圖示一個類別(Javascript 函數), 建構的時候傳入一個產生效果時要放置的 DOM.
<![CDATA[
function MyTable(container) {
this.container = container
}
]]>
視覺效果還必須有個
draw 方法, 定義在視覺效果類別的原型上. 這個方法接受兩個參數:
- 包含要顯示資料的 DataTable
- 選擇參數(Object), 這個參數可以是 null. 使用 name/value 的方式來定義
每個參數都應該有預設值, 用於沒有特別指定的情況時使用.
<![CDATA[
MyTable.prototype.draw = function(data, options) {
// Process data and options and render output into the container element.
}
]]>
Including Your Visualization in a Web Page
將視覺效果的 Javascript code 存放在可取得的地方, 接下來的例子我們假設是儲存在
http://www.mydomain.com/myvis.js
<![CDATA[
<html>
<head>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript" src="//www.mydomain.com/myvis.js"></script>
<script type="text/javascript">
google.load("visualization", "1");
google.setOnLoadCallback(drawVisualization); // Set callback to run when API is loaded
function drawVisualization() {
// Called once the Visualization API is loaded
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Daily Hours');
data.addRows(5);
data.setCell(0, 0, 'Work');
data.setCell(0, 1, 11);
// Add more data rows and cells here
var vis = new MyVisualization(document.getElementById('mydiv'));
vis.draw(data, {showLineNumber: true});
}
</script>
</head>
<body>
<div id="mydiv"></div">
</body>
</html>
]]>
Avoiding Namespace Conflicts
製作視覺效果的時候應該盡量避免跟其他 Javascript 的命名或是 CSS 規則, 產生衝突.
避免使用全域變數. 可以建立一個獨立的命名空間存放所有資料. Google 的所有視覺效果都使用
google.visualization 這個命名空間.
<![CDATA[
var acme = {}; // Namespace, single global variable
acme.MyChart = function(container) {
// ...
}
acme.MyChart.prototype.draw = function(data, options) {
// ...
}
]]>
如果需要使用到 CSS, 不要編寫 CSS 規則, 這可能會影響到其他的視覺效果. 舉例來說,
td {color: blue;} 會直接影響到畫面上其他
<td>, 並非只限於你的視覺效果圖.
克服這種問題還有個解決方法, 將整個視覺效果內容使用有 class 名稱的
div 包裝起來, 而所有的 CSS 規則使用在這個 class 名稱底下. 例如, 底下這範例的 CSS 規則只在 class 是 "acme-visualization" 底下的
<td> 上有作用.
<![CDATA[
.acme-visualization td { color: blue; }
]]>
而視覺效果應該寫在這裡面:
<![CDATA[
<div class="acme-visualization">
// ...
</div>
]]>
Documentation and Samples
留下文件與做個範例可以讓視覺效果更方便其他人使用.
- 寫下所有支援的選項; 每個選項名稱; 預期的類型, 以及預設值.
- 寫下所有支援的方法.
draw 方法是所有視覺效果共有的, 但是每個視覺效果都可以擁有各自額外的方法.
- 寫下所有可處發的事件; 每個事件名稱和屬性以及每個事件觸發的時機.
- 製作一個範例, 描述如何使用視覺效果, 以及如何使用它支援的選項參數, 事件, 方法.
- 清楚的描述視覺效果的資料策略. 大部分的視覺效果在瀏覽器中直接處理資料, 但是有些必須送資料到主機上, 例如建立一個圖案或是地圖. 如果你送資料到主機的話:
- 清楚的定義傳送什麼資料.
- 提醒資料會在主機上存放多久.
- 記載什麼樣的資料會被誰取用. E.g.: Company XYZ, etc.
- 當資料被紀錄下來時會放多久.
Troubleshooting
如果程式碼不起作用時, 有幾種方法可能可以協助你解決問題:
發表文章
