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 ...
随机推荐
- java项目地址和服务器地址区分
项目地址String filePath = request.getSession().getServletContext().getRealPath("/") + "up ...
- Soap 教程
SOAP 构建模块 一条 SOAP 消息就是一个普通的 XML 文档,包含下列元素: · 必需的 Envelope 元素,可把此 XML 文档标识为一条 SOAP 消息 · 可选的 Header 元素 ...
- 113. Path Sum II(求等于某个数的所有路径)
Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given su ...
- python中数据类型转换
python中list和str互转 1.list转str 假设有一个名为test_list的list,转换后的str名为test_str 则转换方法: test_str = "" ...
- 【leetcode刷题笔记】Rotate Image
You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise). ...
- python步长为负时的情况
Sequence[start:end:step] python 的序列切片中,第一个:隔离了 起始索引 和 结束索引,第二个:隔离了 结束索引和 步长 step为正,则从左到右切片,如果 start ...
- Java经纬读坐标的距离计算
问题引出: 今天遇到经纬度坐标转换距离的工作,根据网站登录者的IP确定登录者目前的位置信息,将其经纬度信息与所有的营业厅的经纬度进行对比,网页上显示出距离登录者最近的营业厅地址,本打算就做一个二维坐标 ...
- 基于jQuery和Bootstrap的手风琴垂直菜单
在线演示 本地下载
- 跳出弹窗页面禁止滚动(PC端和手机端)
pc端如何实现 1.当弹窗显示时,为body元素添加属性:overflow:hidden, 当关闭弹窗时移除该属性即可2.在弹窗的div上设置 @scroll.stop.prevent 3.前端页面弹 ...
- java实验一报告
北京电子科技学院(BESTI) 实 验 报 告 课程:Java 班级: 1352 姓名:黄晓妍 学号:20135227 成绩: 指导教师:娄嘉 ...