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. 窗口缩小div内容隐藏看不到怎么解决？

    div的宽度设置为100%,并设置其背景颜色,但当窗口发生变化出现横向滚动条,拉滚动条的时候发现右面是空白的. 解决方法:body{min-width:1024px},给body加上一个最小宽度.ie ...

  2. CSS核心内容之浮动

    1.浮动涉及到左浮动,右浮动,清除浮动． 2.浮点的特点: 1.向指定的方向浮动,并且让出空间 2.如果后面的元素也是浮动的,那么后面的元素就会在碰到前面的浮动的元素或者边框时,就定位在那里 3.如果 ...

  3. Installing VirtualBox

    The (VirtualBox) website has a lot of quality documentation including: End-user documentation Techni ...

  4. 使用guava变形数据结构

    在java日常开发中,经常需要使用各种数据结构,在涉及到数据结构之间如何优雅的转换时,我们可以借助google的guava提供的相关功能来优雅的实现.以下记录一些开发中经常需要使用数据结构的变形,以便 ...

  5. BZOJ 4455: [Zjoi2016]小星星 [容斥原理 树形DP]

    4455: [Zjoi2016]小星星 题意:一个图删掉一些边形成一棵树,告诉你图和树的样子,求让图上的点和树上的点对应起来有多少方案 看了很多题解又想了一段时间,感觉题解都没有很深入,现在大致有了自 ...

  6. Go终端读写

    终端读写 操作终端相关文件句柄常量 os.Stdin:标准输入 os.Stdout:标准输出 os.Stderr:标准错误输出 终端读写实例: package main import ( " ...

  7. 2018-01-08 学习随笔 SpirngBoot整合Mybatis进行主从数据库的动态切换,以及一些数据库层面和分布式事物的解决方案

    先大概介绍一下主从数据库是什么?其实就是两个或N个数据库,一个或几个主负责写(当然也可以读),另一个或几个从只负责读.从数据库要记录主数据库的具体url以及BigLOG(二进制日志文件)的参数.原理就 ...

  8. VS2012如何调试JS

    下面的操作步骤描述了怎样利用vs.net中的调试器来调试javascript: 1,首先,要让你的ie允许调试脚本,具体步骤如下:    打开ie->工具菜单->inter选项->高 ...

  9. 【Tools】ubuntu虚拟机Vmware Tools 安装记录

    1.下载VmwareTools 链接: https://pan.baidu.com/s/1c4baji4 密码: h3si 2.终端打开下载文件位置 cd /home/ubuntu/Downloads ...

  10. IDEA的导包优化问题

    一.现象 文件初始导包状态 package co.x.dw.function; import java.text.SimpleDateFormat; import java.util.ArrayLis ...