非常多做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,这个參数设置的是数据点是否显示。显示的效果例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvR0lTU2hpWGlTaGVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

显示数据点

不显示数据点

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还有别的统计图,在此就不在作介绍,后面还会继续介绍。还望后面继续关注。

Dojo Chart之经常使用统计图的更多相关文章

  1. dojo chart详解

    Dojo提供了一套很完善的统计图(Chart)接口,在dojox/charting下面,可以支持很多种类型的. .简介 Dojo统计图提供快速的.简单的接口实现美观的.交互性强的web统计图表的实现. ...

  2. dojo chart生成函数

    写了一个函数,就是通过传递参数,生成图表,代码如下: /** * created by LZUGIS * @param container * @param type * @param data * ...

  3. Dojo Chart之常用统计图

    很多做web的都知道,在很多web系统中会涉及到一些统计图,例如饼状图,柱状图.趋势图.以及叠加图等.提到这儿,做web的都很熟悉的,jquery的highcharts就能搞定所有的涉及到统计图的功能 ...

  4. Chart图形 [GDI+] OWCChart统计图的封装类 (转载)

    点击下载 OWCChart.zip 利用OWC11进行作统计图的封装类. /// <summary> /// 类说明:进行作统计图的封装类 /// 联系方式:361983679 /// 更 ...

  5. highcharts实现统计图效果

    highcharts实现统计图效果 ① 根据需求确定需要使用的案例图 把这个界面的html模板文件复制出来,放入./Application/Admin/View/User下改名为chart.html ...

  6. Arcgis for Js之Graphiclayer扩展具体解释

    在前两节,讲到了两种不同方式的聚类,一种是基于距离的,一种是基于区域范围的,两种不同的聚类都是通过扩展esri/layers/GraphicsLayer方法来实现的.在本节,就具体的讲讲esri/la ...

  7. Arcgis for Js之Graphiclayer扩展详解

    在前两节,讲到了两种不同方式的聚类,一种是基于距离的,一种是基于区域范围的,两种不同的聚类都是通过扩展esri/layers/GraphicsLayer方法来实现的.在本节,就详细的讲讲esri/la ...

  8. (转)Arcgis for Js之Graphiclayer扩展详解

    http://blog.csdn.net/gisshixisheng/article/details/41208185 在前两节,讲到了两种不同方式的聚类,一种是基于距离的,一种是基于区域范围的,两种 ...

  9. jfreeChart柱状图各属性详细设置

    一. 下载与环境配置 此最新版本为 1.0.13 解压jfreechart-1.0.13.zip 将lib目录下的jfreechart-1.0.13.jar .jcommon-1.0.16.jar 复 ...

随机推荐

  1. zzulioj--1807--小明在努力(递归)

    1807: 小明在努力 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 95  Solved: 35 SubmitStatusWeb Board Des ...

  2. BZOJ 4269 高斯消元求线性基

    思路: 最大: 所有线性基异或一下 次大: 最大的异或一下最小的线性基 搞定~ //By SiriusRen #include <cstdio> #include <algorith ...

  3. vue项目的环境变量

    关于项目中环境变量的总结 背景 项目环境一般分为开发环境,测试环境,线上环境 因为每个环境的接口域名.webpack 配置都是不同的,所以在打包构建时,我们需要区分这些环境,这时就用到了环境变量 在工 ...

  4. ArchLinux 调节屏幕亮度和音量大小

    我使用的是dwm,所以这种琐碎小事还要我们亲自动手, 以后考虑做个脚本,把声音调节.屏幕亮度什么的统统塞进去 屏幕亮度 # 查看亮度最大值 cat /sys/class/backlight/intel ...

  5. HDU-1032 The 3n+1 problem 模拟问题(水题)

    题目链接:https://cn.vjudge.net/problem/HDU-1032 水题 代码 #include <cstdio> #include <algorithm> ...

  6. fuser ---显示出当前程序使用磁盘上的某个文件

    fuser 可以显示出当前哪个程序在使用磁盘上的某个文件.挂载点.甚至网络端口,并给出程序进程的详细信息. fuser只把PID输出到标准输出,其他的都输出到标准错误输出. a 显示所有命令行中指定的 ...

  7. 【IDEA】Error: java: Compliance level '1.6' is incompatible with target level '1.8'. A compliance level '1.8' or better is required解决办法

    在运行的时候常常出现如下错误: Error: java: Compliance level '1.6' is incompatible with target level '1.8'. A compl ...

  8. Java 异常的捕获与处理详解(二)

    (一).throws关键字 throws关键字主要是在定义上使用的,表示的是此方法中不进行异常处理,而交给被调用处处理. 例如: class MyMath { public int div(int x ...

  9. 【Educational Codeforces Round 37 E】Connected Components?

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] bfs. 用一个链表来记录哪些点已经确定在某一个联通快里了. 一开始每个点都能用. 然后从第一个点开始进行bfs. 然后对于它的所有 ...

  10. windows server 打开 FTP 服务器上的文件夹时发生错误。请检查是否有权限访问该文件夹。

    解决方案1: 打开高级安全windows防火墙,设置出入站规则. 然后,再打开windows防火墙界面,点击左上角“允许程序或功能通过windows防火墙”,勾选上设置的出入站名称和FTP服务器. 如 ...