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还有别的统计图，在此就不在作介绍，后面还会继续介绍，还望后面继续关注。
Dojo Chart之常用统计图的更多相关文章
- dojo chart生成函数
写了一个函数,就是通过传递参数,生成图表,代码如下: /** * created by LZUGIS * @param container * @param type * @param data * ...
- Dojo Chart之经常使用统计图
非常多做web的都知道,在非常多web系统中会涉及到一些统计图.比如饼状图,柱状图.趋势图.以及叠加图等.提到这儿,做web的都非常熟悉的,jquery的highcharts就能搞定全部的涉及到统计图 ...
- dojo chart详解
Dojo提供了一套很完善的统计图(Chart)接口,在dojox/charting下面,可以支持很多种类型的. .简介 Dojo统计图提供快速的.简单的接口实现美观的.交互性强的web统计图表的实现. ...
- matplotlib绘制常用统计图
常见统计图:单条折线图.多条折线图.直方图.柱状图.饼状图 #!/usr/bin/python # -*- coding: utf-8 -*- import numpy as np import ma ...
- 介绍几种搭建Dojo环境的方法
Hello World! 的时间到了,在你所学过的众多语言中,哪个不是从此学起的呢?但在此之前,我们要先构建一个开发环境,如同刚开始学习Java的时候,还是需要我们先安装JDK.配置好环境变量等等,H ...
- Arcgis for Js之Graphiclayer扩展详解
在前两节,讲到了两种不同方式的聚类,一种是基于距离的,一种是基于区域范围的,两种不同的聚类都是通过扩展esri/layers/GraphicsLayer方法来实现的.在本节,就详细的讲讲esri/la ...
- （转）Arcgis for Js之Graphiclayer扩展详解
http://blog.csdn.net/gisshixisheng/article/details/41208185 在前两节,讲到了两种不同方式的聚类,一种是基于距离的,一种是基于区域范围的,两种 ...
- Arcgis for Js之Graphiclayer扩展具体解释
在前两节,讲到了两种不同方式的聚类,一种是基于距离的,一种是基于区域范围的,两种不同的聚类都是通过扩展esri/layers/GraphicsLayer方法来实现的.在本节,就具体的讲讲esri/la ...
- 利用Selenium自动化web测试
简介: Selenium 是一个没有正式指导手册的开源项目,这让测试人员的问题调查很费时间.本文为基于 Selenium 1.0(发布于 2009 年 6 月)的测试期间的常见问题提供最佳实践. 简介 ...
随机推荐
- NUnit.Framework的使用方法演示
using NUnit.Framework; namespace CheckExcel { [TestFixture] public class TestExcelHelper { /// <s ...
- SqlAlchemy基本
安装SQLAlchemy: $ easy_install sqlalchemy 数据库表是一个二维表,包含多行多列 [ ('1', 'Michael'), ('2', 'Bob'), ('3', 'A ...
- python之路 面向对象进阶篇
一.字段 字段包括:普通字段和静态字段,他们在定义和使用中有所区别,而最本质的区别是内存中保存的位置不同, 普通字段属于对象 静态字段属于类 class Province: # 静态字段 countr ...
- Spark机器学习1·编程入门(scala/java/python)
Spark安装目录 /Users/erichan/Garden/spark-1.4.0-bin-hadoop2.6 基本测试 ./bin/run-example org.apache.spark.ex ...
- input-file 部分手机不能拍照问题
曾经遇到一个需求,用户拍身份证上传验证, 然后我卡在了拍照这个点上. 最初采用的是微信的 api,wx.chooseImage, 但随后发现,返回的是一种只有微信才能预览的 url 格式, 但验证是要 ...
- Oracle函数如何把符串装换为小写的格式
我们都知道Oracle函数在实际的应用中比较广泛,对其的实际操作与其相关功能也是颇为熟悉,但是你了解Oracle函数怎样使将字符串装换为小写的格式的具体操作吗?如果你有兴趣的话你就可以浏览以下的文章. ...
- JAVA基础补漏--内部类
成员内部类 public class InnerClass { public static void main(String[] args) { System.out.println("++ ...
- C# word 类库基本属性介绍
using System;using System.Collections.Generic;using System.Text;using Microsoft.Office.Interop.Word; ...
- 在NLP中深度学习模型何时需要树形结构？
在NLP中深度学习模型何时需要树形结构? 前段时间阅读了Jiwei Li等人[1]在EMNLP2015上发表的论文<When Are Tree Structures Necessary for ...
- scala学习手记32 - trait选择性混入
继续上一节. 狗当然是人类的好朋友.但是藏獒呢?这玩意儿又蠢又笨又凶狠,肯定不能算很多人的好朋友了.其实,刚才那句话还可以修正一下下:我们接受的狗才是我们的好朋友. 用程序怎么实现呢?在java里面, ...