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基础、判断、循环、列表、字典,day1
一.Python 简介 1.介绍 Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python 的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标 ...
- Java全局变量
全局变量:Java程序中,不能在所有类之外定义全局变量,只能通过在一个类中定义公用.静态的变量来实现一个全局变量.例如:ClassGlobalVar{public static global_var; ...
- C# 复杂算法
1.添加命名空间引用using Microsoft.JScript; //formula 是公式如:(1+2)*3/10 private double GetComputeValueByStringF ...
- Visual Studio各版本区别
Visual Studio 是微软公司推出的开发环境,Visual Studio 可以用来创建 Windows 平台下的 Windows 应用程序和网络应用程序,也可以用来创建网络服务.智能设备应用程 ...
- APDU指令返回码及其代表含义
9000 正常 成功执行6200 警告 信息未提供6281 警告 回送数据可能出错6282 警告 文件长度小于Le6283 警告 选中的文件无效6284 警告 FCI格式与P2指定的不符6300 警告 ...
- c语言URL通过Http下载mp3 格式
通过http协议下载MP3的关键就是 整块打包,一块一块向文件里面存储.读取的时候用二进制 /***szWebAddr: 页面地址(包含host+addr) szMp3FileName:将要存储文件的 ...
- Spark机器学习6·聚类模型(spark-shell)
K-均值(K-mean)聚类 目的:最小化所有类簇中的方差之和 类簇内方差和(WCSS,within cluster sum of squared errors) fuzzy K-means 层次聚类 ...
- Apache 源码包安装
系统:Centos 7.4 服务:Apache 2.4.33.apr 1.5.2.apr-util 1.5.4 依赖包: pcre.x86_64 pcre-devel.x86_64 openssl.x ...
- django使用migrations迁移版本和数据库中报错解决方案
1.到数据库表django_migrations中查看app中看看app列 2.到项目对应的app模块中打开migrations文件查看生成的文件与数据库app列中的是不是一样 3.找到哪里不一致的文 ...
- Spring_事务(1)