Dojo Chart之常用統計圖

很多做web的都知道，在很多web系統中會涉及到一些統計圖，例如餅狀圖，柱狀圖、趨勢圖、以及疊加圖等。提到這兒，做web的都很熟悉的，jquery的highcharts就能搞定所有的涉及到統計圖的功能，highcharts我自己也在經常用，但是呢，用過arcgis for javascript的同志們深深地知道，arcgis的那一套選擇的是dojo，並不能很好的與jquery結合使用，所以，還得迴歸到dojo上面去。dojo的統計圖功能，也很強大的，前兩篇博文對dojo的統計圖做了一定的說明，就算入個門，在本節，重點講述在地圖中常見的統計圖的實現方式。

dojo的統計圖表在dojox/charting下面。

1、柱狀圖

在dojo中實現柱狀圖有兩種，一種是橫着的，爲Bars，一種是豎着的，爲Columns，其分別位於dojox/charting/plot2d/Bars和dojox/charting/plot2d/Columns下面。其實現方式爲：

    <script>
        require([
            "dojox/charting/Chart2D",
            "dojox/charting/plot2d/ClusteredBars",
            "dojox/charting/plot2d/ClusteredColumns",
            "dojox/charting/plot2d/Bars",
            "dojox/charting/plot2d/Columns",
            "dojox/charting/axis2d/Default",
            "dojo/domReady!"
        ], function(
            Chart2D
        ){
            var chartData = [14000,9200,11811,12000,8662,12000,8668];
            var chart = new Chart2D("barchart");
            chart.addPlot("default", {
                type: type,//Bars或者Colums
                gap: 8
            });
            var  xStr = ["週一","週二","週三","週四","週五","週六","週日"];
            // Add axes
            var myLabelFunc = function(text, value, precision){
                return xStr[text-1];
            };
            chart.addAxis("x", { labelFunc: myLabelFunc });
            chart.addAxis("y", { vertical:true, fixLower: "major", fixUpper: "major" });
            chart.addSeries("usa",chartData);
            chart.render();
        });
    </script>

上述代碼實現的結果爲：

Bars

Columns

Bars和Columns實現的只是這種只有一個series的，如果圖表中有多個series，我們得用ClusteredBars和ClusteredColumns，聚類柱狀圖，該類柱狀圖分別位於dojox/charting/plot2d/ClusteredBars和dojox/charting/plot2d/ClusteredColumns下面。其實現方式與上述柱狀圖的實現方式類似，如下：

    <script>
        require([
            "dojox/charting/Chart2D",
            "dojox/charting/plot2d/ClusteredBars",
            "dojox/charting/plot2d/ClusteredColumns",
            "dojox/charting/plot2d/Bars",
            "dojox/charting/plot2d/Columns",
            "dojox/charting/axis2d/Default",
            "dojo/domReady!"
        ], function(
            Chart2D
        ){
            var chartData1 = [14000,9200,11811,12000,8662,12000,8668];
            var chartData2 = [2000,4440,4000,5987,4567,5677,5678];
            var chart = new Chart2D("barchart");
            chart.addPlot("default", {
                type: type,
                gap: 8
            });
            var  xStr = ["週一","週二","週三","週四","週五","週六","週日"];
            // Add axes
            var myLabelFunc = function(text, value, precision){
                return xStr[text-1];
            };
            chart.addAxis("x", { labelFunc: myLabelFunc });
            chart.addAxis("y", { vertical:true, fixLower: "major", fixUpper: "major" });
            chart.addSeries("Series1",chartData1);
            chart.addSeries("Series2",chartData2);
            chart.render();
        });
    </script>

上述代碼實現的效果如下：

聚類Bars

聚類Colums

2、餅狀圖

相對於柱狀圖，餅狀圖是比較簡單的，位於dojox/charting/plot2d/Pie下面，實現方式如下：

    <script type="text/javascript">
        require([
            "dojox/charting/Chart2D",
            "dojox/charting/plot2d/Pie",
            "dojox/charting/themes/PlotKit/blue",
            "dojo/domReady!"
        ], function(
                Chart2D,
                Pie,
                theme
                ){
            var chartData=[
                {y: 10, text: "服裝", color: "powderblue", stroke: "black", tooltip:"服裝：" + 10+ "(" + 6 + "%)"},
                { y: 20, text: "電器", color: "cadetblue", stroke: "black", tooltip: "電器: " + 20 + " (" + 13 + "%)" },
                { y: 30, text: "百貨", color: "cornflowerblue", stroke: "black", tooltip: "百貨: " + 30 + " (" + 20 + "%)" },
                { y: 40, text: "建材", color: "lightsteelblue", stroke: "black", tooltip: "建材: " + 40 + " (" + 26 + "%)" },
                { y: 50, text: "其他", color: "dodgerblue", stroke: "black", tooltip: "其他:" + 50 + " (" + 33 + "%)"}
            ];

            var chart1 = new dojox.charting.Chart2D("test1",{
                title: "銷售比例圖",
                titlePos: "top",
                titleGap: 25,
                titleFont: "normal normal normal 10pt Arial",
                titleFontColor: "orange"
            });
            chart1.setTheme(dojox.charting.themes.PlotKit.blue);
            chart1.addPlot("default", {
                type: "Pie",
                font: "normal normal bold 12pt Tahoma",
                fontColor: "white",
                labelOffset: 40
            });
            chart1.addSeries("Series A", chartData);
            chart1.render();
        });
    </script>

上述代碼的實現效果爲：

餅狀圖

3、線狀圖

相對來說，線狀圖的實現也比較簡單，位於dojox/charting/plot2d/Lines下面，實現代碼如下：

    <script type="text/javascript">
        require([
            "dojox/charting/Chart2D",
            "dojox/charting/plot2d/Lines",
            "dojox/charting/plot2d/StackedAreas",
            "dojox/charting/themes/PlotKit/blue",
            "dojox/charting/action2d/Highlight",
            "dojox/charting/action2d/Tooltip",
            "dojox/charting/action2d/MoveSlice" ,
            "dojox/charting/widget/Legend",
            "dojo/domReady!"
        ], function(
                Chart2D,
                Lines,
                StackedAreas,
                theme,
                Highlight,
                Tooltip,
                MoveSlice,
                Legend
             )
        {
            var chartData = [14000,9200,11811,12000,8662,12000,8662];
            var chartData1 = [20000,13000,4000,5000,6000,7008,8000];
            var chart1 = new dojox.charting.Chart2D("chart");
            chart1.setTheme(dojox.charting.themes.PlotKit.blue);
            chart1.addPlot("default", {
                type: "Lines",
                markers:true,
                tension:"S"
            });

            var  xStr = ["週一","週二","週三","週四","週五","週六","週日"];
            var myLabelFunc = function(text, value, precision){
                return xStr[text-1];
            };
            chart1.addAxis("x", { labelFunc: myLabelFunc });
            chart1.addAxis("y", { vertical:true, fixLower: "major", fixUpper: "major" });
            chart1.addSeries("china",chartData, {stroke: {color: "#5782AE"}, fill: "#5782AE"});
            chart1.addSeries("usa",chartData1, {stroke: {color: "#000066"}, fill: "#000066"});
            chart1.render();
        });
    </script>

看代碼，線狀圖的實現方式和柱狀圖一樣，注意，線狀圖在addPlot的時候，裏面有一個參數markers，這個參數設置的是數據點是否顯示，顯示的效果如下：

顯示數據點

不顯示數據點

4、區域圖

區域圖也是一個比較常見的統計圖之一，位於dojox/charting/plot2d/Areas下面，其實現代碼如下：

    <script type="text/javascript">
        require([
            "dojox/charting/Chart2D",
            "dojox/charting/plot2d/Lines",
            "dojox/charting/plot2d/Areas",
            "dojox/charting/themes/PlotKit/blue",
            "dojox/charting/action2d/Highlight",
            "dojox/charting/action2d/Tooltip",
            "dojox/charting/action2d/MoveSlice" ,
            "dojox/charting/widget/Legend",
            "dojo/domReady!"
        ], function(
                Chart2D,
                Lines,
                Areas,
                theme,
                Highlight,
                Tooltip,
                MoveSlice,
                Legend
             )
        {
            var chartData = [14000,9200,11811,12000,8662,12000,8662];
            var chartData1 = [20000,13000,4000,5000,6000,7008,8000];
            var chart1 = new dojox.charting.Chart2D("chart");
            chart1.setTheme(dojox.charting.themes.PlotKit.blue);
            chart1.addPlot("default", {
                type: "Areas",
                markers:true,
                tension:"S"
            });

            var  xStr = ["週一","週二","週三","週四","週五","週六","週日"];
            var myLabelFunc = function(text, value, precision){
                return xStr[text-1];
            };
            chart1.addAxis("x", { labelFunc: myLabelFunc });
            chart1.addAxis("y", { vertical:true, fixLower: "major", fixUpper: "major" });
            chart1.addSeries("china",chartData, {stroke: {color: "#5782AE"}, fill: "#5782AE"});
            chart1.render();
        });
    </script>

5、堆積圖

堆積圖在dojo裏面可以實現很多種類型的，分別爲堆積圖、堆積區域圖、堆積柱狀圖、堆積線狀圖。堆積圖的實現與各相對應圖差不多，下面以堆積柱狀圖爲例，看看堆積圖的實現方式：

    <script type="text/javascript">
        require(["dojox/charting/Chart",
            "dojox/charting/axis2d/Default",
            "dojox/charting/plot2d/StackedColumns",
            "dojox/charting/themes/Wetland" ,
            "dojo/domReady!"
        ],
        function(Chart, Default, StackedColumns, Wetland){
            var chart = new Chart("chart");
            chart.addPlot("default",
                    {
                        type: "StackedColumns",
                        gap: 8
                    }
            );
            chart.addAxis("x", {fixLower: "major", fixUpper: "major"});
            chart.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", min: 0});
            chart.setTheme(Wetland);
            chart.addSeries("Series A", [1, 2, 0.5, 1.5, 1, 2.8, 0.4]);
            chart.addSeries("Series B", [2.6, 1.8, 2, 1, 1.4, 0.7, 2]);
            chart.addSeries("Series C", [6.3, 1.8, 3, 0.5, 4.4, 2.7, 2]);
            chart.render();
        });
    </script>

實現的效果如下：

堆積柱狀圖

此外，dojo還有別的統計圖，在此就不在作介紹，後面還會繼續介紹，還望後面繼續關注。