dojo单柱状图

1、dojo单柱状图源码

column.html：

  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. 	<head>
  4. <![endif]>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.         <title>单柱状图</title>
  7.         <style type="text/css">
  8.             @import "../dojoroot/dojo/resources/dojo.css";
  9.             @import "../dojoroot/dijit/tests/css/dijitTests.css";
  10.             @import "../dojoroot/dijit/themes/claro/claro.css";
  11. 			@import "../dojoroot/dojox/charting/resources/Legend.css";
  12.         </style>
  13.  
  14.         <script type="text/javascript" src="../dojoroot/dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
  15.         <script type="text/javascript">
  16.             dojo.require("dijit.dijit");
  17.             dojo.require("dojox.charting.Chart");
  18.             dojo.require("dojox.charting.axis2d.Default");
  19.             dojo.require("dojox.charting.plot2d.Columns");
  20. 			dojo.require("dojox.charting.themes.ThreeD");
  21. 			dojo.require("dojox.charting.widget.SelectableLegend");
  22.         	dojo.addOnLoad(function(){
  23. 				var columnsChart = new dojox.charting.Chart("columns").
  24. 					setTheme(dojox.charting.themes.ThreeD).
  25. 					addPlot("default",{type: "Columns",gap:2}).
  26. 					addAxis("y",{natural: true, includeZero: true, vertical:true}).
  27. 					addAxis("x",{natural: true}).
  28. 					addSeries("月销售量",[24,56,35,96,45,12,78,48,52,20,34,71,40,38,28,74,50,70,10,90,24,56,35,96,45,12,78,48,85,67]).
  29. 					render();
  30. 				var columnsLegend = new dojox.charting.widget.SelectableLegend({chart: columnsChart},"columnsLegend");
  31. 				new dojox.charting.action2d.Shake(columnsChart, "default", {shiftY: 0});
  32. 		        new dojox.charting.action2d.Tooltip(columnsChart);
  33. 			})
  34.  
  35.         </script>
  36.     </head>
  37.     <body class="claro" style="width:96%;height:100%; text-align: center;">
  38. 		<h2 style="text-align: center;">柱状图</h2>
  39. 		<div id="columns" class="columns" style="width:1200px;height:400px;"></div>
  40. 		<div id="columnsLegend" style="text-align: center; width:100%;"></div>
  41.     </body>
  42. </html>

2、运行结果

（1）初始化时

（2）取消勾选复选框

dojo单柱状图的更多相关文章

  1. Scrapy爬取猫眼《复仇者联盟4终局之战》影评

    一.分析 首先简单介绍一下Scrapy的基本流程: 引擎从调度器中取出一个链接(URL)用于接下来的抓取 引擎把URL封装成一个请求(Request)传给下载器 下载器把资源下载下来,并封装成应答包( ...

  2. DOJO 如何清空表单

          在Dojo里,清空表单非常简单 在设置好了相关的环境之后,只要设置dom.byId('formid').reset(); / dijit.byId('formid').reset; Jqu ...

  3. 编写单例的 dojo class

    define([ "dojo/_base/declare" ],function( declare ){ var TimeChartService = declare(" ...

  4. dojo中引入FusionCharts柱状图报错

    1.今天,做项目的过程中,我发现Java后台查询的数据都是正确的,并且拼接成JSON格式也正确,但是传到JSP页面时,图无法显示出来还报错,后来经过检查发现是JavaScript和引入FusionCh ...

  5. jQuery学习之：Validation表单验证插件

    http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...

  6. 开始学习Dojo

    学习:Dojo入门简易教程 Dojo Toolkit 简介 Dojo 于 2004 年创建,使开发 DHTML 和 JavaScript web 应用程序开发流程更为容易,隐藏了很多现代 web 浏览 ...

  7. Dojo

    dojo的类机制支持类声明.继承.调用父类方法等功能.dojo在底层实现上是通过操作原型链来实现其类机制的,而在实现继承时采用类式继承的方式.值得一提的是,dojo的类机制允许进行多重继承(注意,只有 ...

  8. Dojo框架学习笔记<二>

    一.dojo/dom    该模块定义了Dojo Dom API,主要有以下几种用法:    1.dom.byId();(相当于document.getElementById())    ①最直接的用 ...

  9. 《静静的dojo》 总体教程介绍

    web2.0时代,ajax技术成为整个前端开发领域的基石.大部分的书籍.博客由此切入来介绍前端类库与框架,所以dojo往往只被当做一个ajax类库来介绍,然而仅仅以此来定位dojo,无异于管中窥豹.对 ...

随机推荐

  1. [squid] kid1| ERROR: No forward-proxy ports configured.

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  2. WebService学习------小实例开发（号码归属地查询）

    1.WebService简介: WebService是一种跨平台,跨语言的,可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级的独立的通讯技术.通过SOAP在Web上提 ...

  3. 获取sap登陆用户名的中文描述

    一.业务场景: 当通过MKPF-USNAM查找ADRP-NAME_LAST时,中间缺少一个表,即USR21.否则,MKPF-USNAM不能和ADRP-PERSNUMBER直接对等. 二.解决方法: D ...

  4. ABP官方文档翻译 3.3 仓储

     仓储 默认仓储 自定义仓储 自定义仓储接口 自定义仓储实现 基础仓储方法管理数据库连接 查询 获取单个实体 获取实体列表 关于IQueryable 自定义返回值 插入 更新 删除 其他 关于异步方法 ...

  5. [转载]完全版线段树 by notonlysuccess大牛

    原文出处:http://www.notonlysuccess.com/ (好像现在这个博客已经挂掉了,在网上找到的全部都是转载) 今天在清北学堂听课,听到了一些很令人吃惊的消息.至于这消息具体是啥,等 ...

  6. 51Nod 欢乐手速场1 A Pinball[DP 线段树]

    Pinball xfause (命题人)   基准时间限制:1 秒 空间限制:262144 KB 分值: 20 Pinball的游戏界面由m+2行.n列组成.第一行在顶端.一个球会从第一行的某一列出发 ...

  7. 高仿QQ Xplan的H5页面

    概述 这个h5的主要玩法很简单:地球自转的时候会播放背景音乐(比如海浪声),为了找到这个声音是从哪个地球上哪个地方传来的,需要长按下方的按钮,这时地球会自动转动到目标地点,然后镜头拉近,穿过云层,最后 ...

  8. [Python Study Notes]计算cpu使用率

    ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...

  9. TJ4运行环境

    http://springwq2011.blog.51cto.com/4332889/966028 http://blog.csdn.net/u013573789/article/details/45 ...

  10. apache服务器绑定泛解析域名

    <VirtualHost *:80> DocumentRoot "E:\web\bubuchu" ServerName bubuchu.com ServerAlias ...