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. [TFRecord格式数据]利用TFRecords存储与读取带标签的图片

    利用TFRecords存储与读取带标签的图片 原创文章,转载请注明出处~ 觉得有用的话,欢迎一起讨论相互学习~Follow Me TFRecords其实是一种二进制文件,虽然它不如其他格式好理解,但是 ...

  2. Sizeof的三种作用

    一.计算常量占用的字节数 例如:int num=sizeof(10); printf("%i",num); 二.计算变量占用的字节数 例如:int num2=3; int resu ...

  3. python3中time模块的用法及说明

    python中,导入time模块使用的命令是 import time 可以使用以下命令查看time模块内置的能够使用的方法: dir(time) 可以使用以下命令查看time模块中每个内置方法的说明: ...

  4. ABP官方文档翻译 6.1.1 MVC控制器

    ASP.NET MVC控制器 介绍 AbpController基类 本地化 其他 过滤器 异常处理和结果包装 审计日志 验证 授权 工作单元 介绍 ABP通过Abp.Web.Mvc nuget包集成到 ...

  5. 网络搬砖是件苦力活 CMS推荐GHOS博客程序

    搬砖不是技术活,而是苦力(bi)活,富有技术含量的苦力活说不定就是一门可以持续的生意. 我们不生产内容,我们只是互联网的内容搬运工,这是大部分不具备原创能力个人站长的心声.虽然原创能力不够,但是服务目 ...

  6. 洛谷 [P2764]最小路径覆盖问题

    二分图应用模版 #include <iostream> #include <cstdio> #include <algorithm> #include <cs ...

  7. sublime插件AndyJS2安装教程

    1.下载AndyJS2包,已整理上传,下载AndyJS2.rar,附上网址.(https://github.com/jiaoxueyan/AndyJS2) 2.点击首选项(preference)=&g ...

  8. xBIM WeXplorer xViewer 基本应用

    目录 基础 xBIM WeXplorer 简要介绍 xBIM WeXplorer xViewer 基本应用 xBIM WeXplorer xViewer 浏览器检查 xBIM WeXplorer xV ...

  9. 关于HTML文档的文档模式

    HTML文档的文档模式包括混杂模式和标准模式,这两种模式主要影响CSS内容的呈现,但在某些情况下也会影响到JavaScript的解释执行. 如果在文档开始处没有发现文档类型声明,则所有浏览器都会默认开 ...

  10. Asp.net core Razor 页面

    创建asp.net core 空项目->MyWeb 修改Startup.cs启动文件添加Razor页面支持: public void ConfigureServices(IServiceColl ...