dojo作為js實現的一種工具包,其中就有圖表功能。但是dojo圖表資料,網上涉及到較少。前段時間,有人問我有關dojo圖的一個問題,我搜索網上的大部分資料,發現dojo圖的資料特別少。下面將講述如何製作dojo柱狀圖,具體步驟如下:
工具/原料
dojo核心js
MyEclipse10
Tomcat7.0.x
JDK1.7
方法/步驟
實現dojo圖表,需要建立Web專案,執行在伺服器上;建立一個Java Web專案,在WebRoot目錄下新建一個pages資料夾,並在該資料夾下建立JSP頁面,修改jsp中的title,如下圖所示:
引入頁面主題CSS樣式檔案以及核心JS
如下圖所示:
在body中新增柱狀圖容器,並將主題樣式類加到body裡
如下圖所示:
除了第二步中的js,圖形還需要引入其他的js,不過是利用require引入;在引入js同時,編寫柱狀圖資料來源
如下圖所示:
啟動伺服器,在瀏覽器上預覽圖形,結果發現js報錯,具體報錯如下
柱狀圖的js是"dojox/charting/plot2d/Columns",而我用的是"dojox/charting/plot2d/Bars";並且function(Chart, Default, StackedAreas, Wetland, ready)中用的是StackedAreas,這完全不搭配
現在要修改js
如下圖所示:
重新啟動伺服器,執行專案,發現這次圖形出來了,並且是我們需要的圖形
如下圖所示:
注意事項
JS中要保證圖形的核心JS一致
瞭解dojo圖形的規律和如何繫結資料來源