dojo单柱状图

1、dojo单柱状图源码

column.html：

<!DOCTYPE HTML>
<html lang="en">
	<head>
<![endif]>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>单柱状图</title>
        <style type="text/css">
            @import "../dojoroot/dojo/resources/dojo.css";
            @import "../dojoroot/dijit/tests/css/dijitTests.css";
            @import "../dojoroot/dijit/themes/claro/claro.css";
			@import "../dojoroot/dojox/charting/resources/Legend.css";
        </style>

        <script type="text/javascript" src="../dojoroot/dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
        <script type="text/javascript">
            dojo.require("dijit.dijit");
            dojo.require("dojox.charting.Chart");
            dojo.require("dojox.charting.axis2d.Default");
            dojo.require("dojox.charting.plot2d.Columns");
			dojo.require("dojox.charting.themes.ThreeD");
			dojo.require("dojox.charting.widget.SelectableLegend");
        	dojo.addOnLoad(function(){
				var columnsChart = new dojox.charting.Chart("columns").
					setTheme(dojox.charting.themes.ThreeD).
					addPlot("default",{type: "Columns",gap:2}).
					addAxis("y",{natural: true, includeZero: true, vertical:true}).
					addAxis("x",{natural: true}).
					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]).
					render();
				var columnsLegend = new dojox.charting.widget.SelectableLegend({chart: columnsChart},"columnsLegend");
				new dojox.charting.action2d.Shake(columnsChart, "default", {shiftY: 0});
		        new dojox.charting.action2d.Tooltip(columnsChart);
			})

        </script>
    </head>
    <body class="claro" style="width:96%;height:100%; text-align: center;">
		<h2 style="text-align: center;">柱状图</h2>
		<div id="columns" class="columns" style="width:1200px;height:400px;"></div>
		<div id="columnsLegend" style="text-align: center; width:100%;"></div>
    </body>
</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. Spring MVC的DispatcherServlet

    Spring MVC提供了一个名为org.springframework.web.servlet.DispatcherServlet的Selvet充当前端控制器,所有的请求驱动都围绕这个Dispatc ...

  2. ES6知识点大汇总

    1 //1.搭建ES6的开发环境: 2 let a=1; 3 console.log(a); 4 //2.var 声明的是全局变量 全局变量会污染外部的区块 5 //let 局部变量 6 //cons ...

  3. SDN第5次上机作业

    SDN第5次上机作业 实验目的 1.搭建如下拓扑并连接控制器 2.下发相关流表和组表实现负载均衡 3.抓包分析验证负载均衡 实验步骤 1.建立以下拓扑,并连接上ODL控制器. 提交要求:ODL拓扑界面 ...

  4. Google 搜索引擎语法

    Google Hack原理很简单,就是利用搜索引擎强大的搜索能力,来查找一些存在漏洞的网站.要利用Google来查找网站的漏洞自然要学会Google这个搜索引擎的语法了.下面先给大家讲解一下Googl ...

  5. LeetCode - 654. Maximum Binary Tree

    Given an integer array with no duplicates. A maximum tree building on this array is defined as follo ...

  6. python的面向对象和面向过程

    一.面向对象和面向过程的区别: a.面向过程: 1)根据业务逻辑从上到下写代码 2)开发思路是将数据和函数按照执行的逻辑顺序组织在一起 3)分开考虑数据与函数 定义性文字: 面向对象编程(Object ...

  7. Jenkins代码管理

    1.1  Jenkins安装与下载应用代码   应用部署   http://jenkins-ci.org   http://wordpress.org/   http://core.svn.wordp ...

  8. php获取今日开始时间戳和结束时间戳

    1.php获取今日开始时间戳和结束时间戳  $beginToday=mktime(0,0,0,date('m'),date('d'),date('Y'));$endToday=mktime(0,0,0 ...

  9. 隱藏在素數規律中的Pi -- BZOJ1041解題報告

    退役狗在刷程書的過程中看到了一個有趣的視頻, 講解了一個有趣的問題. 在網上隨便搜索了一下居然還真的找到了一道以它爲背景的OI題目, BZOJ1041. 下面的內容會首先回顧一下視頻所討論的知識, 有 ...

  10.     My GitHub

    0.引言 利用python开发,借助Dlib库捕获摄像头中的人脸,进行实时特征点标定: 图1 工程效果示例(gif) 图2 工程效果示例(静态图片) (实现比较简单,代码量也比较少,适合入门或者兴趣学 ...