Javascript圖表庫: Dojo Charting

文章目錄

• 匯入Charting類
• 兩種聲明方式
• 手把手構建網站訪問量統計圖
• 動畫、圖例和標記
• 縮放（Zooming）、平移（Panning）
• 事件綁定
• 主題（Theme）
• 其他圖表

 

Dojo Charting是在Dojox目錄下的一個圖表工程，提供了眾多的圖表類型、定製選項以及各種主題。作為Dojo最強大的功能庫之一，圖表庫（Charting）可能並沒有被廣泛應用， 這不得不說是一個遺憾， 所以這篇譯文重點推薦一下強大的Dojo圖表庫，同時介紹如何利用Dojo圖表庫將枯燥無味的資料集轉化成美觀實用的圖表。

匯入Charting類

與許多別的Dojo功能庫不同，Charting不需要匯入大量的類。這歸功於Charting庫的松耦合設計，使用者只需要添加自己需要的圖表控制項陳列庫即可。在這個例子裡，一共添加了三個圖表控制項類：二維的圖表類、圖例類以及外觀主題類。

/* required modules for the basic chart */<br />//Main 2d chart class<br />dojo.require("dojox.charting.widget.Chart2D");<br />//Class to create a legend for our chart<br />dojo.require("dojox.charting.widget.Legend");<br />//A theme for our chart<br />dojo.require("dojox.charting.themes.Tom");

兩種聲明方式

與Dojo其餘絕大多數控制項類似，Charting也支援“標籤聲明”和“代碼建立”兩種方式建立圖表。接下來我們來看看對應的兩個例子。

 

下面是例子中將用到的JSON資料：

var pieData = [{ "x": "1", "y": "9420" }, { "x":"2", "y":"10126" }, { "x": "3", "y": "9803" }, { "x": "4", "y": "15965" }, { "x": "5", "y": "17290" }, { "x": "6", "y": "15667" }, { "x": "7", "y": "17762" }];

使用標籤聲明方式建立圖表

我們可以直接使用HTML標籤直接建立圖表，在建立的圖表標籤中，圖表類型（柱狀圖，餅圖，線形圖等）、尺規等都可以使用HTML標籤聲明。下面是一個餅圖的聲明樣本：

<!– create the chart –><br /><div dojoType="dojox.charting.widget.Chart2D" id="viewsChart" theme="dojox.charting.themes.PlotKit.green" style="width: 550px; height: 550px;"></p><p> <!– add the plot –><br /> <div class="plot" name="default" type="Pie" radius="200" fontColor="black" labelOffset="-20"></div></p><p> <!– pieData is the data source –><br /> <div class="series" name="January" array="pieData"></div></p><p> <!– tooltips! –><br /> <div class="action" type="Tooltip"></div></p><p> <!– slice animation! –><br /> <div class="action" type="MoveSlice" shift="2"></div></p><p></div>

 

 

使用代碼編程方式建立圖表

編程方式建立圖表同樣也很簡單，下面的javascript代碼會建立與上面一個例子中完全相同的餅圖。

 

<div id="pieChart" style="height:550px;width:550px;"></div>

dojo.addOnLoad(function(){<br />......<br />var pieData = [{ "x": "1", "y": "9420" }, { "x":"2", "y":"10126" }, { "x": "3", "y": "9803" }, { "x": "4", "y": "15965" }, { "x": "5", "y": "17290" }, { "x": "6", "y": "15667" }, { "x": "7", "y": "17762" }];<br /> //create the chart<br />var pieChart = new dojox.charting.Chart2D("pieChart");<br />//set the theme<br />pieChart.setTheme(dojox.charting.themes.Tom);<br />//add plot<br />pieChart.addPlot("default", {<br /> type: "Pie",<br /> radius: 200,<br /> fontColor: "black",<br /> labelOffset: "-20"<br />});<br />//add the data series<br />pieChart.addSeries("January",pieData);<br />//slice animation!<br />new dojox.charting.action2d.MoveSlice(pieChart,"default");<br />//tooltips!<br />new dojox.charting.action2d.Tooltip(pieChart,"default");<br />//render the chart<br />pieChart.render();<br />......<br />});

我們在回頭看一下兩種建立方式，可以發現兩者的結構非常類似。在我們接下去的例子中，將使用編程方式來建立圖表。而在在實際開發中，開發人員可以自由選擇建立方式。

手把手構建網站訪問量統計圖

現在大家對Dojo Charting已經有了一個初步的認識，下面通過建立一個簡單的圖表來進一步瞭解Charting中各個功能。這個例子裡我們使用層疊塊狀圖（StackedAreas）展示網站訪問量在3個月裡的對比。

首先，要有3個月的網站訪問量， 用JSON資料表示，同一個月的資料用資料表示：

var json = {<br /> January: [9420,10126,9803,15965,17290, /* … */ 13165,12390],<br /> February: [23990,32975,23477,22513,18069, /* … */ 12956,12815],<br /> March: [22477,24014,21116,20404,19142, /* … */ 22077,20263]<br />};

 

第二，建立層疊塊狀圖：

//we have a DIV element with an ID of "chart1"; that’s the argument<br />var chart1 = new dojox.charting.Chart2D(‘chart1′);<br />//add the default plot<br />chart1.addPlot("default", {<br /> //type of chart<br /> type: "StackedAreas",<br /> //show markers at number points?<br /> markers: true,<br /> //curve the lines on the plot?<br /> tension: "S",<br /> //show lines?<br /> lines: true,<br /> //fill in areas?<br /> areas: true,<br /> //offset position for label<br /> labelOffset: -30,<br /> //add shadows to lines<br /> shadows: { dx:2, dy:2, dw:2 }<br />});

 

 

由於在具體數字對於網站的訪問量異常重要，我們需要添加尺規（Axis），x軸尺規表示日期，y軸尺規代表訪問量。

chart1.addAxis("x");<br />chart1.addAxis("y", { vertical:true });

 

 

現在圖表的架構（類型、尺規）已經搭建起來了，下一步就是綁定每個月的資料了。另外，我們還可以通過stroke和fill變數，直接聲明每個月對應的顏色。

chart1.addSeries("January Visits",json["January"], { stroke: "red", fill: "pink" });<br />chart1.addSeries("February Visits",json["February"], { stroke: "green", fill: "lightgreen" });<br />chart1.addSeries("March Visits",json["March"], { stroke: "blue", fill: "lightblue" });

 

好了，基本的要素全到齊了，最後只需要調用render函數圖表就產生了。

chart1.render();

 

 

動畫、圖例和標記

在基本的圖表功能之外，Charting還提供了許多實用的功能。

圖例

圖例對於圖表來說也是必不可少的，在Dojo Charting中添加一個圖例也很簡單。

//this legend is created within an element with a "legend1" ID.<br />var legend1 = new dojox.charting.widget.Legend({chart: chart1}, "legend1");

動畫

為靜態圖表添加動畫互動效果（比如高亮、放大、滑出等效果），可以讓使用者更清楚地看到細節內容。不同的圖表類型都支援自己的一套動畫互動效果。下面的代碼給圖表添加了“放大”的動畫效果，當滑鼠在圖表節點上時，放大節點。

//add the magnification animation to our chart for the default plot<br />var magnify = new dojox.charting.action2d.Magnify(chart1, "default");

 

標記

儘管有x軸和y軸上的資料尺規，我們仍然不能確認每個節點的數值，所以就需要引入標記。委任標記功能也十分簡單。

var tip = new dojox.charting.action2d.Tooltip(chart1, "default");

 

 

有一點需要注意的是，委任標記（tooltip）功能，需要引入dijit的theme css檔案，這裡使用的是tundra主題。

縮放（Zooming）、平移（Panning）

Dojo Charting還提供支援圖表縮放、移動等行為的函數。相關例子可以詳見 Zooming, Scrolling, and Panning in Dojo Charting
或者 view a great example of panning, scrolling, and zooming!

事件綁定

Dojo Charting有自己的事件Binder 方法：connectToPlot 。通過這個方法，使用者可以觸發自己的事件。相關的connectToPlot函數介紹詳見Dojo Charting Reference Guide

chart1.connectToPlot("default",function(e) {<br /> /* do something */<br />});

 

主題（Theme）

Dojo Charting庫提供了超過30種不同的主題風格。可以在看到這些主題預覽，之後我還將翻譯一篇如何自訂Dojo Charting主題的文章 Dive Into Dojo Chart Theming

其他圖表

上面的例子介紹了一個具有準系統的圖表；Dojo Charting還有非常多進階特性的圖表。

• 平面圖表（例子
  ）
• 三維圖表（例子
  ）
• 與動態資料源綁定的圖表（簡單例子
  、股票圖表
  、教程
  ）

 

本文翻譯自： http://www.sitepen.com/blog/2010/07/13/dive-into-dojo-charting/