dojo 圖表初步

　　dojo中有一個專門針對Web矢量圖開發的控件包--dojox.charting，這里面有不少功能完善的圖形控件。“dojo.charting”控件不僅包括基本的圖形（如：現狀圖、柱狀圖、餅狀圖），也包括很多復雜的工業級圖形（如股票走勢圖、雷達圖、甘特圖）。本篇僅介紹三種進本圖形：柱狀圖、餅狀圖、3D柱狀圖。

　　要想使用這些圖形需要引入如下命名空間：

　　

dojo.require("dojox.charting.action2d.MoveSlice");
        dojo.require("dojox.charting.Chart2D");
        dojo.require("dojox.charting.Chart3D");
        dojo.require("dojox.charting.plot3d.Bars");
        dojo.require("dojox.charting.action2d.Highlight");
        dojo.require("dojox.charting.action2d.Tooltip");

 

1、柱狀圖

首先創造一個div來承載圖形，

this.currentDiv = dojo.create("div");
            this.currentDiv.style.width = "280px";
            this.currentDiv.style.height = "230px";
            dijit.byId("siteBar").setContent(this.currentDiv);

設置圖標需要的數據，以及創建圖表

//圖標需要如下的數據數組
            var dataSeries = [staObj["服裝"], staObj["電器"], staObj["百貨"], staObj["建材"], staObj["其他"]];
            //創建圖表並顯示在div中
            var chartBar = new dojox.charting.Chart2D(this.currentDiv);
            console.log("displayChartBar:創建繪圖區域");

下面進行圖表參數的設置，x軸、y軸

//增加X軸，但並不需要顯示
            chartBar.addAxis("x", {
                labels: [
                    {value: 1, text: "服裝"},
                    {value: 2, text: "電器"},
                    {value: 3, text: "百貨"},
                    {value: 4, text: "建材"},
                    {value: 5, text: "其他"}],
                majorTick: {length: 0},
                minorTick: {length: 0},
                natural: true
            });
            //增加Y軸，但也不需要顯示
            chartBar.addAxis("y", {
                vertical: true,
                stroke: "black",
                fontColor: "black",
                majorTick: {length: 0},
                minorTick: {length: 0},
                includeZero: true
            });

定義圖表類型，為圖表添加數據，設置柱條的顏色

//定義圖標類型，這里用柱狀圖
            chartBar.addPlot("default",{
                type: "Columns",
                gap: 8,
                font: "normal normal bold 8pt Tahoma",
                fontColor: "black"
            });
            //指定圖標使用的數據以及圖表中柱條的顏色
            chartBar.addSeries("SeriesA", dataSeries, {stroke: {color: "steelblue"}, fill: "steelblue"});

設置圖形特效

//當鼠標移動到柱條上時高亮顯示
            var anim1 = new dojox.charting.action2d.Highlight(chartBar, "default", {highlight: "lightskyblue"});
            var anim2 = new dojox.charting.action2d.Tooltip(chartBar, "default");
            //渲染
            chartBar.render();

這里介紹幾個圖表中的特效：
　　Highlight：需要引入命名空間“dojox.charting.action2d.Highlight”；當將鼠標懸停與一個元素上方時，此動作突出顯示圖表的單獨元素

　　magnify: 同樣需要引入命名空間“dojox.charting.action2d.Magnify”，當鼠標懸停於某元素上方時，此動作擴大元素，該效果常與突出顯示同用

　　moveSlice:需要引入命名空間“dojox.charting.action2d.MoveSlice”；此動作常用於餅圖中，將餅圖稍微移除一部分，實際上是略微改變x和y值

　　shake：需要引入命名空間“dojox.charting.action2d.Shake”；鼠標懸停於某一元素時，繪制元素

 

2、餅圖

主要步驟同柱狀圖類似：

this.currentDiv = dojo.create("div");
            this.currentDiv.style.width = "280px";
            this.currentDiv.style.height = "230px";
            dijit.byId("sitePie").setContent(this.currentDiv);

            var sum = staObj["服裝"]+staObj["電器"]+staObj["百貨"]+ staObj["建材"]+ staObj["其他"];
            //計算所占百分比
            var fzPct = Math.round((staObj["服裝"] / sum) * 100);
            var dqPct = Math.round((staObj["電器"] / sum) * 100);
            var bhPct = Math.round((staObj["百貨"] / sum) * 100);
            var jcPct = Math.round((staObj["建材"] / sum) * 100);
            var qtPct = Math.round((staObj["其他"] / sum) * 100);

            //使用餅圖
            var chartPie = new dojox.charting.Chart2D(this.currentDiv);
            chartPie.addPlot("default", {
                type: "Pie",
                font: "normal normal bold 8pt Tahoma",
                fontColor: "black",
                radius: 65,
                labelOffset: -25
            });
            //添加數據
            chartPie.addSeries("Series A", [
                {y: staObj["服裝"], text: "服裝", color: "powderblue", stroke: "black", tooltip:"服裝：" + staObj["服裝"] + "(" + fzPct + "%)"},
                { y: staObj["電器"], text: "電器", color: "cadetblue", stroke: "black", tooltip: "電器: " + staObj["電器"] + " (" + dqPct + "%)" },
                { y: staObj["百貨"], text: "百貨", color: "cornflowerblue", stroke: "black", tooltip: "百貨: " + staObj["百貨"] + " (" + bhPct + "%)" },
                { y: staObj["建材"], text: "建材", color: "lightsteelblue", stroke: "black", tooltip: "建材: " + staObj["建材"] + " (" + jcPct + "%)" },
                { y: staObj["其他"], text: "其他", color: "dodgerblue", stroke: "black", tooltip: "其他" + staObj["其他"] + " (" + qtPct + "%)"}
            ]);
            //添加特殊效果與信息
            var animMoveSlice = new dojox.charting.action2d.MoveSlice(chartPie, "default");
            var animHighlightSlice = new dojox.charting.action2d.Highlight(chartPie, "default");
            var animSliceTooltip = new dojox.charting.action2d.Tooltip(chartPie, "default");

            chartPie.render();

 

3、3D柱狀圖

this.currentDiv = dojo.create("div");
            this.currentDiv.style.width = "280px";
            this.currentDiv.style.height = "230px";
            dijit.byId("siteBar3D").setContent(this.currentDiv);
            //配置參數
            var m = dojox.gfx3d.matrix;
            var chartBar3D = new dojox.charting.Chart3D(this.currentDiv,{
                lights: [{direction: {x:5,y:5,z:-5}, color: "white"}],//配置光源
                ambient: {color: "white", intensity: 2},//設置物體環境參數
                specular: "white"},//反射參數設定
                [m.cameraRotateXg(10), m.cameraRotateYg(-10), m.scale(0.8), m.cameraTranslate(-50,-50,0)]//配置相機參數
            );
            //設置繪制場景，數據
            var plot1 = new dojox.charting.plot3d.Bars(200, 200, {gap:8, material:"#FE74FF"});
            plot1.setData([staObj["服裝"],staObj["電器"],staObj["百貨"],staObj["建材"],staObj["其他"]]);
            chartBar3D.addPlot(plot1);
            //渲染
            chartBar3D.generate().render();

　　3D柱狀圖參數較為復雜：

　　　　Lights：這里主要用於配置光源，direction為光源的光照方向，color微光的顏色；

　　　　Ambient：設定物體的環境參數；

　　　　Specular：反射參數設定；

　　　　m.cameraRotateXg(10), m.cameraRotateYg(10)；坐標參數旋轉

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

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

　　　　Material：三維物體的材質，主要用於配置其顏色外觀

以上是基本的繪圖介紹，想進一步了解繪圖內容請參考這篇文章：

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