Common statistical charts of dojo chart

Many Web users know that some statistical charts, such as pie charts, bar charts, trend charts, and stacked charts, are involved in many web systems. Speaking of this, I am very familiar with Web applications. jquery's highcharts can handle all the functions related to statistical charts. highcharts is also frequently used by myself. However, comrades who have used ArcGIS for JavaScript are deeply aware that the choice of ArcGIS is Dojo, which cannot be used in combination with jquery. Therefore, they have to return to dojo. The statistical graph function of dojo is also very powerful. In the first two blog posts, we have made some explanations on the statistical graph of dojo. In this section, focuses on the implementation of common statistical charts in maps.

The dojo Statistical Chart is under dojox/charting.

1. Bar Chart

There are two types of bar charts in Dojo: horizontal, bars, vertical, and columns, they are located under dojox/Charting/plot2d/bars and dojox/Charting/plot2d/columns respectively. The implementation method is as follows:

    <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>

The result of the above Code implementation is:

Bars

Columns

Bars and columns implement only one series. If there are multiple series in the chart, we need to use clusteredbars and clusteredcolumns to cluster the column chart, the column charts are located under dojox/Charting/plot2d/clusteredbars and dojox/Charting/plot2d/clusteredcolumns respectively. The implementation method is similar to the implementation method of the preceding bar chart, as follows:

    <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>

The effects of the above Code are as follows:

Clustering bars

Clustering colums

2. Pie Chart

Compared with the column chart, the pie chart is relatively simple. It is located under dojox/Charting/plot2d/pie. The implementation method is as follows:

    <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>

The implementation of the above Code is as follows:

Pie Chart

3. line chart

Relatively speaking, the implementation of a line chart is also relatively simple. It is located under dojox/Charting/plot2d/lines. The implementation code is as follows:

    <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>

Look at the code. The implementation of a line chart is the same as that of a column chart. Note that when a line chart is in addplot, there is a parameter markers, which sets whether the data points are displayed, the result is as follows:

Show data points

Do not show data points

4. Area Chart

A region chart is also a common statistical chart, which is located under dojox/Charting/plot2d/areas. The implementation code is as follows:

    <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. Stacked chart

Stacked graphs can be implemented in Dojo in many types, including stacked graphs, stacked area graphs, Stacked column charts, and stacked linear graphs. The implementation of stacked graphs is similar to that of corresponding graphs. The following uses the Stacked column chart as an example to illustrate the implementation of stacked graphs:

    <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>

The implementation result is as follows:

Stacked column chart

In addition, dojo has other statistical charts. We will not introduce them here, but we will continue to introduce them later.

Common statistical charts of dojo chart