如何利用dojo製作柱狀圖?

Tags: 資料, 柱狀圖,

dojo作為js實現的一種工具包,其中就有圖表功能。但是dojo圖表資料,網上涉及到較少。前段時間,有人問我有關dojo圖的一個問題,我搜索網上的大部分資料,發現dojo圖的資料特別少。下面將講述如何製作dojo柱狀圖,具體步驟如下:

工具/原料

dojo核心js

MyEclipse10

Tomcat7.0.x

JDK1.7

方法/步驟

實現dojo圖表,需要建立Web專案,執行在伺服器上;建立一個Java Web專案,在WebRoot目錄下新建一個pages資料夾,並在該資料夾下建立JSP頁面,修改jsp中的title,如下圖所示:

如何利用dojo製作柱狀圖

引入頁面主題CSS樣式檔案以及核心JS

如下圖所示:

如何利用dojo製作柱狀圖

在body中新增柱狀圖容器,並將主題樣式類加到body裡

如下圖所示:

如何利用dojo製作柱狀圖

除了第二步中的js,圖形還需要引入其他的js,不過是利用require引入;在引入js同時,編寫柱狀圖資料來源

如下圖所示:

如何利用dojo製作柱狀圖

啟動伺服器,在瀏覽器上預覽圖形,結果發現js報錯,具體報錯如下

如何利用dojo製作柱狀圖

柱狀圖的js是"dojox/charting/plot2d/Columns",而我用的是"dojox/charting/plot2d/Bars";並且function(Chart, Default, StackedAreas, Wetland, ready)中用的是StackedAreas,這完全不搭配

現在要修改js

如下圖所示:

如何利用dojo製作柱狀圖

重新啟動伺服器,執行專案,發現這次圖形出來了,並且是我們需要的圖形

如下圖所示:

如何利用dojo製作柱狀圖

注意事項

JS中要保證圖形的核心JS一致

瞭解dojo圖形的規律和如何繫結資料來源

相關問題答案