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


目录
相关文章
|
机器学习/深度学习 数据采集 存储
【机器学习】机器学习流程之收集数据
【机器学习】机器学习流程之收集数据
482 1
|
JavaScript 前端开发 UED
jQuery 自动刷新页面但不闪烁的实现方法
jQuery 自动刷新页面但不闪烁的实现方法
|
8月前
|
JavaScript Linux iOS开发
Motrix:Star46.4k,有了这个开源项目你的烦恼基本少了一半?一款开源功能全面的下载管理器,用上它妈妈再也不用担心下载速度啦~~~
嗨,大家好,我是小华同学。今天为大家介绍一款全能下载管理器——Motrix。它支持HTTP、FTP、BitTorrent等多种协议,拥有简洁易用的界面和强大的下载功能,包括选择性下载、多线程加速、自动更新Tracker列表等,适用于工作、学习和娱乐场景。欢迎关注我们,获取更多优质开源项目和高效工具。
346 15
Motrix:Star46.4k,有了这个开源项目你的烦恼基本少了一半?一款开源功能全面的下载管理器,用上它妈妈再也不用担心下载速度啦~~~
|
SQL 安全 前端开发
【组件健壮性】后端开发常见安全问题、防范与开发规范
本文介绍后端开发过程中遇到的常见安全问题及其解决方案,包括越权漏洞、SQL注入、XSS跨站脚本攻击、CSRF跨站请求伪造攻击等。
|
前端开发 JavaScript UED
前端开发的魔法:CSS动画与JavaScript的完美结合
本文将探讨如何利用CSS动画和JavaScript的结合,为前端页面增添生动的效果。我们将通过实例展示如何使用这两种技术为网页元素创建吸引人的动画效果,并讨论它们的优缺点和适用场景。
245 0
|
算法
Modbus-RTU数据帧
Modbus-RTU数据帧
444 0
|
移动开发 JavaScript 前端开发
分享113个JS特效动画效果,总有一款适合您
分享113个JS特效动画效果,总有一款适合您
527 0
|
Linux 编译器 数据安全/隐私保护
Linux 权限-+完整思维导图+实图例子+深入细节+通俗易懂建议收藏(一)
Linux 权限-+完整思维导图+实图例子+深入细节+通俗易懂建议收藏(一)
|
API 开发工具 UED
优酷折叠屏适配上——整体思路与实现
优酷折叠屏适配上——整体思路与实现
796 0
|
容器
写了个自定义指令,支持elementUI2.0下拉框组件虚拟列表显示
由于业务对页面性能要求很高,如果下拉框数据很大,一个页面有多个下拉框,那么就导致页面很卡顿。由于elementPlus已经支持了下拉组件虚拟列表,但所在项目仍然使用elementUI2.0,所以需要自己扩展支持下拉组件虚拟列表
767 0
写了个自定义指令,支持elementUI2.0下拉框组件虚拟列表显示

热门文章

最新文章