當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Dojo Charting 控件高级用法

發(fā)布時間：2023/12/8 编程问答 48 豆豆

生活随笔收集整理的這篇文章主要介紹了 Dojo Charting 控件高级用法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

現如今，隨著 web2.0 及其相關技術越來越流行，web 矢量圖技術也變得越來越重要，尤其是在 web 數據的可視化方面，矢量圖技術發(fā)揮著不可磨滅的作用。Dojo，一個流行且強大的 web 開發(fā)控件庫，有著一個專門針對 web 矢量圖開發(fā)的控件包 -- "dojox.charting"，里面封裝了很多功能完善的矢量圖控件。開發(fā)人員只需要基于已有的數據序列，再加上極少量的代碼，就可以快速的畫出復雜且美觀的 web 矢量圖形。與此同時，開發(fā)人員也可以通過設定相關參數以實現基于矢量圖本身的交互效果。"dojox.charting"控件包不僅包括基本矢量圖的接口（如：線狀圖、柱狀圖、餅狀圖等等），也包括很多復雜的工業(yè)級的矢量圖控件（如股票走勢圖、雷達圖、甘特圖等等）。這篇文章會介紹一些"dojox.charting"的高級編程技巧，如 x，y 軸的特殊定制，plot 定制的一些特殊的參數，以及 3-D 的矢量圖等等，讓開發(fā)人員能夠更加升入的了解 Dojo 的矢量圖控件庫。

簡介

Dojo 有一個非常強大的矢量圖組件庫—— dojox.charting 組件庫，你只需要很少的代碼，就能在頁面上畫出功能強大且美觀的矢量圖形（如柱狀圖，餅圖等等）。與此同時，對于高級的用戶， dojox.charting 也提供了許多定制參數，滿足許多更為深層次的需要，如坐標軸的定制，矢量圖類型的擴展定制以及基于數據序列（data series）的圖形控件的定制。本文著力于探討 dojox.charting 組件庫的這些鮮為人知的高級功能。

高級矢量圖

Dojox charting 圖庫除了很多基本的矢量圖外（線圖，柱狀圖等等），還有一些偏向于商業(yè)應用行業(yè)的圖，舉其中的 High-low 矢量圖和 Candlesticks 矢量圖為例：

High-low 矢量圖

這種矢量圖主要用于查看走勢，以下是該圖形的例圖：

圖 1. High-low 矢量圖

該圖形創(chuàng)建方法如下：

清單 1. High-low 矢量圖

(new dojox.charting.Chart(node)). addPlot("default",{type: "Candlesticks", gap: 1, minBarSize: 2, maxBarSize: 5 }). addAxis("x", {fixLower: "major", fixUpper: "major", includeZero: true}). addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", natural: true}). addSeries("Series A", [ { open: 24, close: 8, high: 24, low: 5 }, { open: 8, close: 16, high: 22, low: 2 }, { open: 16, close: 12, high: 19, low: 7 }, { open: 12, close: 20, high: 22, low: 8 }, { open: 20, close: 16, high: 22, low: 8 }, ................ ],{ stroke: { color: "green" }, fill: "lightgreen" } ). render();

可以看出，除了 series，其它圖形屬性與一般基本圖形無異。Series 的設定多出了四種屬性：“open”，“close”，“high”，“l(fā)ow”，一般情況下，對應著初始值，結束值，最高值和最低值。

與此同時，該圖形還可以設定 minBarSize 和 maxBarSize ，以限定該圖形（plot）中柱子的最大寬度和最小寬度，單位為 px。

Candlesticks 矢量圖

這種矢量圖比 high-low 圖更加完善，更多的用于股票行情走勢，以下是該圖形的例圖：

圖 2. Candlesticks 矢量圖

該圖形創(chuàng)建方法與 high-low 矢量圖基本類似，如下：

清單 2. Candlesticks 矢量圖

(new dojox.charting.Chart(node)). addPlot("default", {type: "Candlesticks", gap: 1}). addAxis("x", {fixLower: "major", fixUpper: "major", includeZero: true}). addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", natural: true}). addSeries("Series A", [ { open: 20, close: 16, high: 22, low: 8 }, { open: 16, close: 22, high: 26, low: 6, mid: 18 }, { open: 22, close: 18, high: 22, low: 11, mid: 21 }, { open: 18, close: 29, high: 32, low: 14, mid: 27 }, { open: 29, close: 24, high: 29, low: 13, mid: 27 }, { open: 24, close: 8, high: 24, low: 5 }, { open: 8, close: 16, high: 22, low: 2 }, { open: 16, close: 12, high: 19, low: 7 }, { open: 12, close: 20, high: 22, low: 8 }, { open: 20, close: 16, high: 22, low: 8 }, { open: 16, close: 22, high: 26, low: 6, mid: 18 }, { open: 22, close: 18, high: 22, low: 11, mid: 21 }, ................ ],{ stroke: { color: "green" }, fill: "lightgreen" } ). render();

可以看出，Series 設定的四種屬性：“open”，“close”，“high”，“l(fā)ow”，可以說分別對應著股票的開盤點，收盤點，最高點以及最低點。Candlesticks 可以設定其“mid”屬性，表示著當日平均值，更加接近股票走勢圖。

Spider 矢量圖

這種圖俗稱蛛網圖，又名雷達圖。當你需要看到某個對象的一系列屬性情況時，雷達圖是再適合不過了。比如，需要查看某個人的綜合素質（專業(yè)素質，管理能力，溝通能力等等），或者某個公司的各項財務指標（主營業(yè)務收入，輔助業(yè)務收入，營業(yè)外收入等等），用雷達圖能非常清晰直觀明了的看出來其各項指標的情況。雷達圖還有一個最為強大的功能：比較不同對象間各個相同屬性的優(yōu)劣，如比較不同人的各項綜合素質，又如：比較不同國家的各項經濟環(huán)境指標。

圖 3. Spider 矢量圖

如圖，可以清晰的看到各個國家（中，法，德，美等等）的各項經濟環(huán)境指標（GDP 國民生產總值，Population 人口，Inflation 通貨膨脹情況等等）。很明顯，中國的人口最多，但是國民生產總值很一般。

使用 Spider 矢量圖也很容易：

清單 3. Spider 矢量圖

chart1 = new dojox.charting.Chart("test1"); chart1.setTheme(dojox.charting.themes.PlotKit.blue); chart1.addPlot("default", { type: "Spider", labelOffset: -10, divisions: 6, axisColor: "lightgray", spiderColor: "silver", seriesFillAlpha: 0.2, spiderOrigin: 0.16, markerSize: 3, precision:0, spiderType: "polygon" }); chart1.addSeries("China", {data: {"GDP": 2,"area": 6,"population": 2000,"inflation": 15,"growth": 12}}, { fill: "blue" } ); chart1.addSeries("France", {data: {"GDP": 6,"area": 15,"population": 500,"inflation": 5,"growth": 6}}, { fill: "red" }); chart1.addSeries("USA", {data: {"GDP": 3,"area": 20,"population": 1500,"inflation": 10,"growth": 3}}, { fill: "green" }); chart1.addSeries("Japan", {data: {"GDP": 4,"area": 2,"population": 1000,"inflation": 20,"growth": 2}}, { fill: "yellow" }); chart1.addSeries("Korean", {data: {"GDP": 10,"area": 10,"population": 800,"inflation": 2,"growth": 18}}, { fill: "orange" }); chart1.addSeries("Canada", {data: {"GDP": 1,"area": 18,"population": 300,"inflation": 3,"growth": 15}}, { fill: "purple" }); chart1.render();

雷達圖（或稱蛛網圖）有很多參數，這些參數都有默認值，使用時可以不用給它們一一設定，如果需要做一些高級個性化定制，可以參考如下參數設定描述：

labelOffset: -10, // 坐標軸標簽偏移量，負值代表箭頭向外方向的偏移量，以 px 為單位

divisions: 6, // 坐標軸截段數

axisColor: "lightgray", // 坐標軸的顏色

spiderColor: "silver", // 蛛網格的顏色

axisWidth: 0, // 坐標軸的寬度

spiderWidth: 0, // 蛛網格的寬度

seriesFillAlpha: 0.2, // 各多邊形序列圖的透明度

spiderOrigin: 0.16, // 各坐標軸起始點占坐標軸總長的比例

markerSize: 3, // 多邊形序列圖頂點的半徑

spiderType: "polygon" // 蛛網格的形式，可以為多邊形，也可以為圓形

animationType: dojo.fx.easing.backOut,// 變換動畫類型

其中 divisions 不宜設置過大（默認為 3）：過多則容易使坐標軸上的坐標太過密集而不易閱讀。也不宜過少：過少則無法區(qū)分和比較各個不同對象的屬性值情況。labelOffset 通常推薦使用負值，讓其置于箭頭之外。

animationType 支持所有的 dojo.fx.easing 的動畫模式。

回頁首

3-D 圖庫

Dojo 現在主要支持兩種 3-D 矢量圖：圓柱狀 3-D 和條狀 3-D

圓柱狀 3-D 圖

圖 4. 圓柱狀 3-D 圖

從圖上可以看出，它主要包括 3 個數據序列，并分別以紅，黃，藍三種方式呈現，這種 3-D 立體的方式能更加直觀的看出趨勢以及它們相互之間的差別。其用法也是比較簡單的：

清單 4. 圓柱狀矢量圖

這里的用法可能稍顯繁瑣，是因為里面配置了不少參數，這些參數都是有默認值的，所以大部分可以省略。這里我們來詳細介紹一下這些參數：

Lights：這里主要用于配置光源，其中的 direction 就是光源的光照方向，color 為光的顏色。

Ambient：設定物體環(huán)境參數

Specular：反射參數設定

m.cameraRotateXg(10)，m.cameraRotateYg(10)：坐標旋轉參數

m.scale(0.8)：鏡頭的縮放參數定制

m.cameraTranslate(-50, -50, 0)：鏡頭的偏移，分別對應（x 軸，y 軸，z 軸）

Material：三維物體的材質，主要用于配置其外觀膚色。

條狀 3-D 圖

條狀 3-D 圖類似于橫向的柱狀 3-D 圖，其參數配置與柱狀 3-D 圖基本一致。

回頁首

矢量圖 widget 控件

清單 5. Dojo 矢量圖 widget

<div dojoType="dojox.data.HtmlStore" dataId="tableExample" jsId="tableStore"></div> <table id="tableExample" style="display: none;"> <thead> <tr><th>value</th> </tr> </thead> <tbody> <tr><td>6.3</td></tr> <tr><td>1.8</td></tr> <tr><td>3 </td></tr> <tr><td>0.5</td></tr> <tr><td>4.4</td></tr> <tr><td>2.7</td></tr> <tr><td>2 </td></tr> </tbody> </table> <div dojoType="dojox.charting.widget.Chart2D" theme="dojox.charting.themes.Tufte" margins="{ l: 0, r: 0, t: 0, b: 0 }"style="width: 100px; height: 15px;"> <div class="plot" name="default" type="Lines" ></div> <div class="series" name="Series A" store="tableStore" valueFn="Number(x)"></div> </div>

事實上 Dojo 矢量圖 widget 可以直接寫在 HTML 代碼里，同我們經常用到的 Dojo widget 一樣。上述代碼就是一個線狀圖的 Dojo 矢量圖 widget，其數值序列基于 dojox.data.HtmlStore 的“tableStore”，其它屬性也是通過在 HTML 里直接設定，可以看出，此時的 Dojo 矢量圖 widget 就如同一個矢量圖的 Dojo 控件（widget）。

清單 6. Sparkline 矢量圖 widget

這是另一種矢量圖 widget，可以看出其屬性設定與之前的稍有區(qū)別，這種寫法與我們熟悉的 Dojo widget 就幾乎一模一樣了。

回頁首

Dojo Data 矢量圖

所謂 Data Chart，其實有點像 Dojo 的 Data Grid，用過 dojox.grid 的人可能都知道，它其實就是一個基于 dojo.data 的控件，即其數據內容是來自于 dojo.data 對象，通過該對象加載最原始的數據，然后填充到 Dojo chart 中。這種 Data Chart 適用于數據量比較大的情況。

Data 矢量圖

圖 5. Data 矢量圖例圖

Dojo Data 矢量圖支持幾乎所有的基本矢量圖，其區(qū)別主要是它的數據源不再是簡單的數組或對象數組，而是一個包裝了原始 JSON 數據的 dojo.data 對象。

清單 7. 創(chuàng)建 Data 矢量圖

var linesC = new dojox.charting.DataChart("linesC", { displayRange:6, xaxis:{labelFunc:"seriesLabels"}, yaxis:{minorLabels:true}, type: dojox.charting.plot2d.Lines, comparative:true }); linesC.setStore(store, {symbol:"*"}, "price");

其中，store 的數據結構如下：

清單 8. Data 矢量圖數據源的數據結構

{ "identifier": "symbol", "idAttribute":"symbol", "label": "symbol","items": [ { "symbol":"ANDT", "price":3.52, "low":3.13, "high":3.69 }, { "symbol":"ATEU", "price":6.76, "low":6.56, "high":6.77 }, { "symbol":"BGCN", "price":3.98, "low":3.77, "high":4.11 }, { "symbol":"BAYC", "price":9.60, "low":9.60, "high":9.81 }, { "symbol":"CRCR", "price":8.44, "low":8.22, "high":8.44 }, { "symbol":"DTOA", "price":2.47, "low":2.11, "high":3.01 } ]}

這里詳細解釋一下它的各個參數：

displayRange：限制 x 軸的范圍，其值代表坐標軸主標記的限制數量。

labelFunc：坐標軸標簽生成函數，這里的“seriesLabels”是 Data 矢量圖內置的一個坐標軸標簽生成函數，表示標簽由該 Data 矢量圖數據源的 label 屬性值替代。這里的數據源的 label 屬性值為“symbol”對應的值，所以我們可以看到“AUNT”，“ATEU”等等。

setStore(store, {symbol:"*"}, "price")：這里表示 Data 矢量圖的 Y 軸數據源為該 Data 矢量圖數據源中的“price”屬性值構成。這里注意，“{symbol:"*"}”是用于過濾 Identifier 屬性的，這里“*”號相當于是沒做任何過濾。

Data Series

Data Series 也是基于 dojo.data 構建矢量圖數據源序列。在使用 Data Series 時，其它的初始化 Dojo chart 的方式不變，只有在“addSeries”的時候，使用 dojox.charting.DataSeries 對象。

清單 9. 使用 Data Series 序列

chartL = new dojox.charting.Chart("lines"). setTheme(dojox.charting.themes.ThreeD). addAxis("x", {fixLower: "major", fixUpper: "major", natural: true, majorTickStep: 5}). addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", includeZero: true}). addPlot("default", {type: dojox.charting.plot2d.Markers}). addSeries("Price", new dojox.charting.DataSeries( store, {query: {symbol: "*"}}, "price")). render();

可以看出，其參數設置方式和 Data 矢量圖的“setStore”基本一樣。“{query: {symbol: "*"}}”這里也是用于過濾。

Store Series

類似 Data Series，Dojo 矢量圖還能夠基于 dojo.store 構建數據源序列。

圖 6. Dojo 矢量圖（Store Series）例圖

清單 10. 使用 Store Series 序列

dojo.xhrGet({ url: "stock.json", sync: true, handleAs: "json"}).then(function(data){ store = dojo.store.Observable(new dojo.store.Memory({data:data})); }); chartC = new dojox.charting.Chart("cols"). setTheme(dojox.charting.themes.ThreeD). addAxis("x", {natural: true}). addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", includeZero: true}). addPlot("default", {type: dojox.charting.plot2d.Columns}). addSeries("Low", new dojox.charting.StoreSeries( store, {query: {}}, dojo.hitch(null, valTrans, "low"))). addSeries("Price", new dojox.charting.StoreSeries( store, {query: {}}, dojo.hitch(null, valTrans, "price"))). addSeries("High", new dojox.charting.StoreSeries( store, {query: {}}, dojo.hitch(null, valTrans, "high"))). render();

可見，其使用方式與 Data Series 基本相同，但是它的數據源是基于 dojo.store 的，所以，其有些參數的設定是按照 dojo.store 的參數設定方式。

回頁首

特殊定制參數

Dojo 矢量圖中其實有很多地方是可以定制的，但是由于種種原因，這些定制參數可能并不為人所知，這里我們來詳細討論一下這些參數。

手動觸發(fā)圖形的相關事件

使用過 Dojo 矢量圖的人可能知道，Dojo 矢量圖可以加入很多交互效果，它支持鼠標的 onmouseover，onmouseout，onclick 等等交互事件。

圖 7. Dojo Chart fire event 例圖

圖 7 說明，對“Series 3”的第 3 段手動執(zhí)行“mouseover”的操作，于是該區(qū)域（紅框）會出現和鼠標懸停在上一樣的效果。其使用方式其實很簡單：

清單 11. chart.fireEvent 介紹

chart.fireEvent( "Series 3", "onmouseover", "3" );

利用這種功能 , 可以做出很多很好的 Dojo 矢量圖的附加效果 .

數據序列中支持空 ("Null") 值

其實這是 Dojo 矢量圖的內置功能，并不需要程序員額外的參數配置。

圖 8. “NULL”值的例圖

程序員只需要給沒有數據的地方置“null”即可。

清單 12. “NULL”的用法

new dojox.charting.Chart("test" + (i + 1)) .addAxis("x", { vertical: false, min: 0, max: 15 }) .addAxis("y", { vertical: true, min: 0, max: 15 }) .addPlot("default", { type: type }) .addSeries("Series A", [3, 5, null, 4, 0, 4, null, 1, 6, 5] , { stroke: {color: "blue"}, fill: "lightblue" }) .addSeries("Series B", [6, 9, null, 5, 10, 7, 6, 3, 8, 6] , { stroke: {color: "red"}, fill: "lightpink" }) .render();

將數據源序列某些之置“NULL”，即可達到截斷效果。

對圖形塊和數據序列的重新排序

Dojo 矢量圖支持多個圖形區(qū)域（plot），即在一個矢量圖上可以顯示多種類型的矢量圖，如線狀圖和柱狀圖并存，多個泡狀圖并存。這些圖形區(qū)域均有一定的前后關系。

圖 9. 多個 Bubble plot 的 Dojo chart

由圖 9 可見，最先渲染的 plot1 離原點最近。如果我們改變它們的順序，則顯示方式會變化，見圖 10。（chart.setPlotOrder(["plot2", "plot1", "plot3"]) 或者 chart1.movePlotToFront("Plot1")）

圖 10. 重新排序 plot 后的多 Bubble plot 的 Dojo 矢量圖

可見，順序變成了紅 1，綠 2，藍 3，于是紅色的 plot 離原點最近。

其實，dojo 矢量圖的 plot 對應的數據序列 series 也能排序，其中排在最前面的會顯示在最上方，然后依次遮蓋排在后面的 series。（chart.setSeriesOrder(["plot2", "plot1", "plot3"]) 或者 chart1.moveSeriesToFront("Plot1")）

圖 11. 重新排序 series 后的多 Bubble plot 的 Dojo 矢量圖

坐標軸 (Axis) 的高級定制

關于 Dojo 矢量圖坐標軸的定制也有很多高級用法。

清單 13. 坐標軸 label 旋轉

chart.addAxis("x", { htmlLabels: false, fixLower: "major", fixUpper: "major", min: 0, max: 6, labels: [ {value: 0, text: "zero"}, {value: 1, text: "one"}, {value: 2, text: "two"}, {value: 3, text: "three"}, {value: 4, text: "four"}, {value: 5, text: "five"}, {value: 6, text: "six"} ], rotation: 45 })

只需要設定 rotation 參數即可實現坐標軸的旋轉，這里是 x 軸 label 逆時針旋轉 45 度。

圖 12. 旋轉的 label

坐標軸標簽（label）不僅能旋轉，還可以截斷，這對于比較長的 label 相當有效。

清單 14. 坐標軸標簽（label）截斷

var chart1 = new dojox.charting.Chart("test1"). addAxis("x", { fixLower: "major", fixUpper: "major", includeZero: true, labels: [ {value: 0, text: "first start point"}, {value: 2, text: "two"}, {value: 5, text: "last end point"} ], maxLabelSize: 20, trailingSymbol: "." }).

“maxLabelSize”代表 label 可顯示的最大長度（以 px 為單位），如果超出，則用省略符“。。?！碧娲?#xff0c;當然，這里的省略符也可以定制，在“trailingSymbol”中可以設定其為任意字符。當鼠標懸浮在 label 上的時候，后在 tooltip 中顯示全部 label 信息。

圖 13. 截斷的 label

而且，在 dojo1.6 中引入了 Dojo 矢量圖標題和坐標軸標題，其設定也很簡單，如下：

清單 15. Dojo 矢量圖標題

var chart2 = new dojox.charting.Chart("test2", { title: "Production(Quantity)", titlePos: "bottom", titleGap: 25, titleFont: "normal normal normal 15pt Arial", titleFontColor: "orange" })

清單 16. 坐標軸標題

chart1.addAxis("x", { title: "Quarter of 2010", titleGap: gap, titleFontColor: "orange", titleOrientation: orientation, rotation: rotation, includeZero: true, natural: true, fixLower: "major", fixUpper: "major", labels: [ {value: 0, text: ""},{value: 1, text: "1 Qtr"},{value: 2, text: "2 Qtr"}, {value: 3, text: "3 Qtr"},{value: 4, text: "4 Qtr"},{value: 5, text: "End"} ] })

可見，通過“title”，“titleGap”， “titleFontColor”等等屬性，可以定制你要的 title 展示樣式：

titleGap：表示 title 離主矢量圖邊緣的距離。

titleOrientation：表示 title 的朝向，此屬性專用于定制坐標軸標題，如果為“axis”，則代表文字朝向坐標軸，“away”表示文字“背對”坐標軸。

圖 14. Dojo chart 的標題

另外，在一個矢量圖中，可以隨時隱藏坐標軸

清單 17. 坐標軸隱藏

var chart3 = new dojox.charting.Chart("test3"). setTheme(customTheme). addAxis("x", {type: "Invisible", fixLower: "major", fixUpper: "major",natural: true, includeZero: true}). addAxis("y", {type: "Invisible",vertical: true, fixLower: "major",fixUpper: "major", natural: true, includeZero: true}). addPlot("default", {type: "Markers"}). addSeries("Series A", [{x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 1}]). addSeries("Series B", [{x: 3, y: 2}, {x: 4, y: 3}, {x: 5, y: 2}]). addSeries("Series C", [{x: 5, y: 3}, {x: 6, y: 4}, {x: 7, y: 3}]). render();

這里其實只需要加上一個“type: "Invisible"”即可。

Tension 的定制

Tension 字面上講是“張力”的意思，其實這在 Dojo 矢量圖里面主要用于對線狀圖的定制，點與點之間可以用直線連接，也可以用曲線甚至貝葉斯曲線的方式連接。

清單 18. Tension 定制

var chart = new dojox.charting.Chart("test_chart"). setTheme(theme). addAxis("x", {natural: true, min: 0, max: 3}). addAxis("y", {vertical: true, natural: true, min: 0, max: 3}). addPlot("S tension", {tension: "S"}). addSeries("\"S\" tension", data, {plot: "S tension"}). addPlot("x tension", {tension: "x"}). addSeries("\"x\" tension", data, {plot: "x tension"}). addPlot("X tension", {tension: "X"}). addSeries("\"X\" tension", data, {plot: "X tension"}). addPlot("no tension", {markers: true, tension: ""}). addSeries("No Tension", data, {plot: "no tension"}). render();

定制很簡單，只需要在 plot 的參數里面加上“tension”參數即可，程序員可以參考如下示意圖：

圖 15. Tension 定制效果

回頁首

矢量圖皮膚的定制

可以通過“dojox/charting/tests/test_themes.html”案例來查看 Dojo 皮膚的效果，進而選擇相應的自己喜歡的皮膚

圖 16. 皮膚定制

所有“dojox.charting.themes”下面的對象都是 Dojo 支持的皮膚類型，開發(fā)人員只需要“charts.setTheme(dojox.charting.themes.claro).render();”一句話即可實現皮膚的切換。

回頁首

結束語

這篇文章介紹了 Dojo 開發(fā)中關于 Dojo 矢量圖開發(fā)的一些更深層次的知識，基于 Dojo 的實例源代碼，闡述了 Dojo 矢量圖控件的很多高級功能，高級參數的定制以及高級對象的使用方式等等，同時，也介紹了 Dojo 矢量圖數據源的多種定制方式，包括與 dojo.data，dojo.store 結合的方式。最后還提到了一些比較特殊的定制參數，這些大小細節(jié)我們可以在開發(fā)過程中盡量注意一下，以盡可能多的完善我們的 Web 應用。

原文鏈接：

http://www.ibm.com/developerworks/cn/web/1109_zhouxiang_dojocharting/

總結

以上是生活随笔為你收集整理的Dojo Charting 控件高级用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：详解麦克风阵列的原理、分类及作用
下一篇： VS2010高速绘图Hight-Spee