dojo 图表初步

  dojo中有一个专门针对Web矢量图开发的控件包--dojox.charting,这里面有不少功能完善的图形控件。“dojo.charting”控件不仅包括基本的图形(如:现状图、柱状图、饼状图),也包括很多复杂的工业级图形(如股票走势图、雷达图、甘特图)。本篇仅介绍三种进本图形:柱状图、饼状图、3D柱状图。

  要想使用这些图形需要引入如下命名空间:

dojo.require("dojox.charting.action2d.MoveSlice");
        dojo.require("dojox.charting.Chart2D");
        dojo.require("dojox.charting.Chart3D");
        dojo.require("dojox.charting.plot3d.Bars");
        dojo.require("dojox.charting.action2d.Highlight");
        dojo.require("dojox.charting.action2d.Tooltip");

1、柱状图

首先创造一个div来承载图形,

1 this.currentDiv = dojo.create("div");
2             this.currentDiv.style.width = "280px";
3             this.currentDiv.style.height = "230px";
4             dijit.byId("siteBar").setContent(this.currentDiv);

设置图标需要的数据,以及创建图表

//图标需要如下的数据数组
            var dataSeries = [staObj["服装"], staObj["电器"], staObj["百货"], staObj["建材"], staObj["其他"]];
            //创建图表并显示在div中
            var chartBar = new dojox.charting.Chart2D(this.currentDiv);
            console.log("displayChartBar:创建绘图区域");

下面进行图表参数的设置,x轴、y轴

//增加X轴,但并不需要显示
            chartBar.addAxis("x", {
                labels: [
                    {value: 1, text: "服装"},
                    {value: 2, text: "电器"},
                    {value: 3, text: "百货"},
                    {value: 4, text: "建材"},
                    {value: 5, text: "其他"}],
                majorTick: {length: 0},
                minorTick: {length: 0},
                natural: true
            });
            //增加Y轴,但也不需要显示
            chartBar.addAxis("y", {
                vertical: true,
                stroke: "black",
                fontColor: "black",
                majorTick: {length: 0},
                minorTick: {length: 0},
                includeZero: true
            });

定义图表类型,为图表添加数据,设置柱条的颜色

//定义图标类型,这里用柱状图
            chartBar.addPlot("default",{
                type: "Columns",
                gap: 8,
                font: "normal normal bold 8pt Tahoma",
                fontColor: "black"
            });
            //指定图标使用的数据以及图表中柱条的颜色
            chartBar.addSeries("SeriesA", dataSeries, {stroke: {color: "steelblue"}, fill: "steelblue"});

设置图形特效

//当鼠标移动到柱条上时高亮显示
            var anim1 = new dojox.charting.action2d.Highlight(chartBar, "default", {highlight: "lightskyblue"});
            var anim2 = new dojox.charting.action2d.Tooltip(chartBar, "default");
            //渲染
            chartBar.render();

这里介绍几个图表中的特效:
Highlight:需要引入命名空间“dojox.charting.action2d.Highlight”;当将鼠标悬停与一个元素上方时,此动作突出显示图表的单独元素

  magnify: 同样需要引入命名空间“dojox.charting.action2d.Magnify”,当鼠标悬停于某元素上方时,此动作扩大元素,该效果常与突出显示同用

  moveSlice:需要引入命名空间“dojox.charting.action2d.MoveSlice”;此动作常用于饼图中,将饼图稍微移除一部分,实际上是略微改变x和y值

  shake:需要引入命名空间“dojox.charting.action2d.Shake”;鼠标悬停于某一元素时,绘制元素

 

2、饼图

主要步骤同柱状图类似:

this.currentDiv = dojo.create("div");
            this.currentDiv.style.width = "280px";
            this.currentDiv.style.height = "230px";
            dijit.byId("sitePie").setContent(this.currentDiv);

            var sum = staObj["服装"]+staObj["电器"]+staObj["百货"]+ staObj["建材"]+ staObj["其他"];
            //计算所占百分比
            var fzPct = Math.round((staObj["服装"] / sum) * 100);
            var dqPct = Math.round((staObj["电器"] / sum) * 100);
            var bhPct = Math.round((staObj["百货"] / sum) * 100);
            var jcPct = Math.round((staObj["建材"] / sum) * 100);
            var qtPct = Math.round((staObj["其他"] / sum) * 100);

            //使用饼图
            var chartPie = new dojox.charting.Chart2D(this.currentDiv);
            chartPie.addPlot("default", {
                type: "Pie",
                font: "normal normal bold 8pt Tahoma",
                fontColor: "black",
                radius: 65,
                labelOffset: -25
            });
            //添加数据
            chartPie.addSeries("Series A", [
                {y: staObj["服装"], text: "服装", color: "powderblue", stroke: "black", tooltip:"服装:" + staObj["服装"] + "(" + fzPct + "%)"},
                { y: staObj["电器"], text: "电器", color: "cadetblue", stroke: "black", tooltip: "电器: " + staObj["电器"] + " (" + dqPct + "%)" },
                { y: staObj["百货"], text: "百货", color: "cornflowerblue", stroke: "black", tooltip: "百货: " + staObj["百货"] + " (" + bhPct + "%)" },
                { y: staObj["建材"], text: "建材", color: "lightsteelblue", stroke: "black", tooltip: "建材: " + staObj["建材"] + " (" + jcPct + "%)" },
                { y: staObj["其他"], text: "其他", color: "dodgerblue", stroke: "black", tooltip: "其他" + staObj["其他"] + " (" + qtPct + "%)"}
            ]);
            //添加特殊效果与信息
            var animMoveSlice = new dojox.charting.action2d.MoveSlice(chartPie, "default");
            var animHighlightSlice = new dojox.charting.action2d.Highlight(chartPie, "default");
            var animSliceTooltip = new dojox.charting.action2d.Tooltip(chartPie, "default");

            chartPie.render();

3、3D柱状图

this.currentDiv = dojo.create("div");
            this.currentDiv.style.width = "280px";
            this.currentDiv.style.height = "230px";
            dijit.byId("siteBar3D").setContent(this.currentDiv);
            //配置参数
            var m = dojox.gfx3d.matrix;
            var chartBar3D = new dojox.charting.Chart3D(this.currentDiv,{
                lights: [{direction: {x:5,y:5,z:-5}, color: "white"}],//配置光源
                ambient: {color: "white", intensity: 2},//设置物体环境参数
                specular: "white"},//反射参数设定
                [m.cameraRotateXg(10), m.cameraRotateYg(-10), m.scale(0.8), m.cameraTranslate(-50,-50,0)]//配置相机参数
            );
            //设置绘制场景,数据
            var plot1 = new dojox.charting.plot3d.Bars(200, 200, {gap:8, material:"#FE74FF"});
            plot1.setData([staObj["服装"],staObj["电器"],staObj["百货"],staObj["建材"],staObj["其他"]]);
            chartBar3D.addPlot(plot1);
            //渲染
            chartBar3D.generate().render();

 3D柱状图参数较为复杂:

    Lights:这里主要用于配置光源,direction为光源的光照方向,color微光的颜色;

    Ambient:设定物体的环境参数;

    Specular:反射参数设定;

    m.cameraRotateXg(10), m.cameraRotateYg(10);坐标参数旋转

     m.scale(0.8):镜头的缩放参数

    m.cameraTranslate(-50, -50, 0):镜头的偏移,对应(x,y,z)

    Material:三维物体的材质,主要用于配置其颜色外观

以上是基本的绘图介绍,想进一步了解绘图内容请参考这篇文章:

http://www.ibm.com/developerworks/cn/web/1109_zhouxiang_dojocharting/index.html

时间: 2024-11-16 22:58:12

dojo 图表初步的相关文章

WebSphere sMash的创新型使用,第1部分:构建灵活实用的仪表板框架

当新技术出现时,尤其是编程语言和模型出现时,通常都会有这样一个时期,即会出现很多有助于开发人员开发工作的 how to 文章.随着时间的推移,这些指南会深入介绍更高级的概念,但是通常却不会介绍实际技术应用的实现细节.Hello World 是基础应用的典型示例,但是当您想要自己构建应用,则只有实际示例才能为下一个杀手级应用项目提供灵感. 本系列文章展示了 3 个实际示例,即如何选择 IBM WebSphere sMash,以及如何使用它执行创新型和有价值的任务.这些示例都与 IBM 在美国康乃狄

Panoptes 1.6发布 监控工具

Panoptes是一个可扩展网络和主机的监控工具.它包括一个基于Dojo工具包的动态Web管理界面,可以用来监控SNMP,TCP端口的可用性,ICMP,HTTP响应和内容和内部SSL认证.通过shell脚本来监控任何其他应用程序,还包括一个主机.端口和OS的数据包捕获工具. Panoptes是一个基于JFace/SWT的图形化JMX Management管理界面.Panoptes能够工作在任何JMX服务器如jboss,Tomcat 或其它J2EE服务器. Panoptes 1.6版本支持记录警报

探索使用Dojo相关组件绘制实时动态图表

Dojo charting 是 Dojox 目录下的一个矢量图组件库,它提供了众多图表类型,如点线图.柱状图.饼图.聚簇柱图.网状图等 2D 图形以及 3D 图和地图,同时包含支持图表动态效果和主题的各种组件,如 Legend.http://www.aliyun.com/zixun/aggregation/16636.html">Highlight 以及 Tooltip,为可视化的 Web 应用开发者提供的诸多方便. 下面将介绍如何用 Dojox.charting 创建图表,并实现并实现图

dojo在ASP.NET中使用Ajax初步

我想先介绍一下dojo中的浏览器事件,由于不同的浏览器对dom事件的支持是不同的,dojo在这方面做了统一的封装,所以使用dojo不用担心浏览器事件不兼容的问题.问题也就由此而来,由于要兼容不同的浏览器事件,dojo中的事件与某一个浏览器的事件在命名上也就有所区别(昨晚上就是卡在这了).请先看下面的一个网址: http://http://www.bianceng.cn/webkf/Dojo/201101/23290_5.htm 现在来看一下我们的例子: <script type="text

交互设计:关于设计视觉图表的一些思考

信息图表为我们提供新的方法去理解和思考信息.它包含了大量不同类别的视觉资料,通过图表.地图.简表.数据可视化以及技术.教学和科学的解释,使信息图表具备多途径交流的能力.随着我们了解复杂世界的需求日益增长,信息图表会变得更具价值. 最近,我花了大半个礼拜时间排名.评判那些提交到Malofiej 18的信息图表.Malofiej 18是视觉记者.信息图表艺术家们每年在西班牙潘普洛纳举行的一项赛事和全球峰会.在那里,我看到的设计作品主题连贯,视觉效果突出,易于理解.令人信服. 下面概括一下我对什么才是

使用Dojo和Grails快速实现数据的增删改查(CRUD)

选择 Grails 和 Dojo 的原因 随着 web 的广泛应用,web application 的开发项 目越来越多,而大部分的 web 开发归根结底都是对数据库的增删改查.对于一张数据库表的 增删改查,采用基于 MVC(模型 - 视图 - 控制器)设计模式的开发往往需要 Domain class . Controller.4 个增删改查的页面.form 输入数据的校验等.这样就免不了大量类似功 能的复制粘贴修改. 如果你想从重复劳动中解放出来,Grails 是一个很好的选择. 使用 Gra

ppt怎么设计漂亮的饼形图图表?

ppt怎么设计漂亮的饼形图图表?   1.这里我用的是wps演示,首先我们先新建一个演示文稿,或是大家随意一个ppt里面跟着我的脚步也可以哦,新建是本人的一个习惯,大家过滤就好啦,接下来跟大家分享下圆形图表即饼状图如何制作; 2.在ppt菜单栏插入--图表,记得要选"图表"而不是"在线图标"哦,不要选错喽,打开"图表"菜单选择"饼图",点击确定,这样我们就可以初步得到一个饼状图表了;

常用Excel图表类型详解

在上两节课程中,我们主要使用的Excel图表类型是柱形图,我们也初步了解,对于相同的数据,如果选择不同的图表类型,那么得到的图表外观是有很大差别的,为了用图表准确的表达我们的观点,完成数据表的创建之后,最重要的事情就是选择恰当的图表类型.文章末尾提供原文件供大家下载参考. 本课目标:通过实际例子熟悉常用的图表类型,包括柱形图.饼图.折线图和面积图等. 一. 熟悉柱形图的子类型 柱形图的主要用途为显示或比较多个数据组.子类型中包括簇状柱形图和堆积柱形图,前面的例子中默认使用的是簇状柱形图,下面来熟

使用Dojo及Node-webkit创建基于JavaScript本地桌面应用程序

作为一名 Web 前端工程师,我们的工作在大多数情况下,就是与各种浏览器打交道,开发以页面为主的 Web 应用程序.为此,非常的熟悉 HTML.CSS.JavaScript 以及各类主流的 JavaScript 工具库,比如 Dojo.jQuery.YUI 等.但是,浏览器的安全沙盒把我们限制在了一个小小的圈子里,我们不能用 JavaScript 访问操作系统的本地文件系统,不能发起一个 Socket 请求, 不能获取 CPU 和内存的使用情况, 也不能访问关系型数据库或者 NoSQL 数据库.