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 ...
随机推荐
- C/C++中的输出对齐设置
输出对齐有两个方面,一是输出宽度,一是左对齐还是又对齐. 在C++里面,默认是右对齐,可以通过cout.setf(std::ios::left)调整为左对齐,而且这种调整是全局的 ,一次设置,后面都有 ...
- Codeforces Round #475 (Div. 2)
B. Messages 题意:有n个消息分别在ti的时候收到.设所有消息收到时初始值为A,每过一秒,其值减去B.当在某一秒选择读某个消息时,获值为当前消息的值:如果在某一秒结束的时候,手上有k则消息未 ...
- PL/SQL编程—变量
SQL> declare c_tax_rate ,):=0.03; v_name ); v_passwd ); v_sale ,); v_tax_sale ,); begin select na ...
- CodeForces - 919D Substring (拓扑排序+dp)
题意:将一个字符串上的n个字符视作点,给出m条有向边,求图中路径上最长出现的相同字母数. 分析:首先如果这张图中有环,则可以取无限大的字符数,在求拓扑排序的同时可以确定是否存在环. 之后在拓扑排序的结 ...
- 保护你的代码,生成.a文件以及.framework文件需要注意的地方
一个好的设计,一个方便使用的控件封装,一个酷炫的动画... 是不是迫不及待要分享给大家你的每一个突然蹦出来的好的idea,那就下手吧! 可是,你想要的只是让大家使用它,而不是把所有技术点都公开给每个人 ...
- centos7 上搭建私有云
OwnCloud环境搭建 一. 环境搭建 1. 环境需求 服务器操作系统:Centos7.0 外网服务器操作系统:Centos7.0 Php版本号:5.4.16 Mysql版本号:5.5.52 Apa ...
- python学习笔记:函数参数
1. 位置参数:一般的参数 2. 默认参数: def power(x, n=2): s = 1 while n > 0: n = n - 1 s = s * x return s 参数里有默认赋 ...
- Java:判断字符串是否为数字的五种方法
Java:判断字符串是否为数字的五种方法 //方法一:用JAVA自带的函数 public static boolean isNumeric(String str){ for (int i = str. ...
- 20 个 OpenSSH 最佳安全实践
来源:https://linux.cn/article-9394-1.html OpenSSH 是 SSH 协议的一个实现.一般通过 scp 或 sftp 用于远程登录.备份.远程文件传输等功能.SS ...
- 俄罗斯最新开源的牛掰数据库ClickHouse
ClickHouse是俄罗斯最近刚刚开源的用于数据库管理系统能够实时生成分析数据报告,性能非常强悍! 使用SQL查询. 他拥有切割你的数据更多的新方法 ClickHouse的性能超过同类市场上目前用于 ...