dojo chart生成函数
写了一个函数,就是通过传递参数,生成图表,代码如下:
/**
* created by LZUGIS
* @param container
* @param type
* @param data
* @constructor
*/
function AddChart(container, type, data){
require([
"dojox/charting/Chart2D",
"dojox/charting/themes/PlotKit/blue",
"dojox/charting/action2d/Highlight",
"dojox/charting/action2d/Tooltip",
"dojox/charting/action2d/MoveSlice"
], function(
Chart2D,
themes,
Highlight,
Tooltip,
MoveSlice
){
var chart = new dojox.charting.Chart2D(container);
chart.setTheme(dojox.charting.themes.PlotKit.blue);//设置主题
switch(type){
case "bar":{//柱状图
chart.addPlot("default", {
type: "Columns",
gap: 8//控制柱子之间的间隔
});
break;
}
case "pie":{//饼状图
chart.addPlot("default", {
type: "Pie",
labelOffset: 40//控制标注显示位置,“+”为里面,“-”为外面
});
break;
}
case "line":{//线形图
chart.addPlot("default", {
type: "Lines",
markers:true,//数据点是否显示
tension:"X"//曲线圆滑,"X"与“S”类似,“x”为闭合圆滑
});
break;
}
case "stack":{//堆积图
chart.addPlot("default",{
type: "StackedColumns",
gap: 8
});
break;
}
default :{
break;
}
}
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("Series A", data);
new Highlight(chart, "default", {highlight: "lightskyblue"});
new Tooltip(chart, "default");
new MoveSlice(chart, "default");
// new Legend({chart: chart}, "legend");
chart.render();
});
}
使用方法很简单,如下:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>dojo chart test</title>
<style type="text/css">
@import "dojo/dojo/resources/dojo.css";
@import "dojo/dijit/themes/dijit.css";
@import "dojo/dijit/themes/tundra/tundra.css";
</style>
<script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>
<script src="js/dojochart.js"></script>
<script type="text/javascript">
var chartData = [40000,9200,11811,12000,8662,12000,8662];
AddChart("chart","bar",chartData);
</script>
</head>
<body class="tundra">
<div id="chart" style="width: 400px; height: 400px;">
</div>
<div id="legend"></div>
</body>
</html>
dojo chart生成函数的更多相关文章
- Dojo Chart之常用统计图
很多做web的都知道,在很多web系统中会涉及到一些统计图,例如饼状图,柱状图.趋势图.以及叠加图等.提到这儿,做web的都很熟悉的,jquery的highcharts就能搞定所有的涉及到统计图的功能 ...
- dojo chart详解
Dojo提供了一套很完善的统计图(Chart)接口,在dojox/charting下面,可以支持很多种类型的. .简介 Dojo统计图提供快速的.简单的接口实现美观的.交互性强的web统计图表的实现. ...
- Dojo Chart之经常使用统计图
非常多做web的都知道,在非常多web系统中会涉及到一些统计图.比如饼状图,柱状图.趋势图.以及叠加图等.提到这儿,做web的都非常熟悉的,jquery的highcharts就能搞定全部的涉及到统计图 ...
- Arcgis for Js之Graphiclayer扩展具体解释
在前两节,讲到了两种不同方式的聚类,一种是基于距离的,一种是基于区域范围的,两种不同的聚类都是通过扩展esri/layers/GraphicsLayer方法来实现的.在本节,就具体的讲讲esri/la ...
- Arcgis for Js之Graphiclayer扩展详解
在前两节,讲到了两种不同方式的聚类,一种是基于距离的,一种是基于区域范围的,两种不同的聚类都是通过扩展esri/layers/GraphicsLayer方法来实现的.在本节,就详细的讲讲esri/la ...
- (转)Arcgis for Js之Graphiclayer扩展详解
http://blog.csdn.net/gisshixisheng/article/details/41208185 在前两节,讲到了两种不同方式的聚类,一种是基于距离的,一种是基于区域范围的,两种 ...
- arcgis javascript dojo
一.为什么说ArcGIS API for JavaScript是构建于Dojo之上的? 1. 编写ArcGIS API for JavaScript的ESRI开发者使用Dojo来简化他们的开发过程,同 ...
- dojo柱形图
dojo柱形图添加属性 1.给柱状图的柱子填充颜色 .addSeries("A",[45,56,12,23,78,67],{stroke:{color:"#FF0000& ...
- dojo单柱状图
dojo单柱状图 1.dojo单柱状图源码 column.html: <!DOCTYPE HTML> <html lang="en"> <head&g ...
随机推荐
- 关于python中的查询数据库内容中用到的fetchone()函数和fetchall()函数(转)还有fetchmany()
最近在用python操作mysql数据库时,碰到了下面这两个函数,标记一下: fetchone() : 返回单个的元组,也就是一条记录(row),如果没有结果 则返回 None fetchall() ...
- org.springframework-jdbc
Spring JDBC模板类—org.springframework.jdbc.core.JdbcTemplate 博客分类: spring JDBCSpringSQL编程数据结构 今天看了下Spr ...
- Ajax传地址URL编码格式
当我们用Ajax传递路径的时候,有可能会出错,尤其是路径中有汉字的时候,传递的路径与接收的路径不同.解决方法:在传递路径的时候对路径编码,接收的时候解码存入数据库. 如: <!DOCTYPE h ...
- Spring 之定义切面尝试(基于注解)
[Spring 之定义切面尝试] 1.标记为深红色的依赖包是必须的 <dependency> <groupId>org.springframework</groupId& ...
- shell检查网络出现异常、僵尸进程、内存过低后,自动重启
#!/bin/bash while : do neterror=$(/bin/netstat -a | grep -cw "CLOSE_WAIT") echo "get ...
- jQuery图片放大预览
在线演示 本地下载
- Linux下捕捉信号
关于 信号signal的知识铺垫 点这里 信号由三种处理方式: 忽略 执行该信号的默认处理动作 捕捉信号 如果信号的处理动作是用户自定义函数,在信号递达时就调用这个自定义函数,这称为捕捉信号. 进程收 ...
- Python引用多个模块,调用模块中的函数时,要注意的地方
转自:http://blog.csdn.net/yjk13703623757/article/details/70237463 python模块是”从下到上”导入(import)的. 例如: a.py ...
- JMeter学习(二)工具简单介绍
一.JMeter 介绍 Apache JMeter是100%纯JAVA桌面应用程序,被设计为用于测试客户端/服务端结构的软件(例如web应用程序).它可以用来测试静态和动态资源的性能,例如:静态文件, ...
- [BZOJ1587]叶子合并leaves
Description 在一个美丽的秋天,丽丽每天都经过的花园小巷落满了树叶,她决定把树叶堆成K堆,小巷是笔直的 共有N片树叶(树叶排列也是笔直的),每片树叶都有一个重量值,并且每两片想邻的树叶之间的 ...