九游游戏修改器:Javascript图表库: Dojo Charting - Dojo中文博客 - CSD...

  Javascript图表库: Dojo Charting 收藏
 Dojo Charting是在Dojox目录下的一个图表工程，提供了众多的图表类型、定制选项以及各种主题。作为Dojo最强大的功能库之一，图表库（Charting）可能并没有被广泛应用， 这不得不说是一个遗憾， 所以这篇译文重点推荐一下强大的Dojo图表库，同时介绍如何利用Dojo图表库将枯燥无味的数据集转化成美观实用的图表。导入Charting类
与许多别的Dojo功能库不同，Charting不需要导入大量的类。这归功于Charting库的松耦合设计，用户只需要添加自己需要的图表控件库即可。在这个例子里，一共添加了三个图表控件类：二维的图表类、图例类以及外观主题类。view plaincopy to clipboardprint?
01./* required modules for the basic chart */ 
02.//Main 2d chart class  
03.dojo.require("dojox.charting.widget.Chart2D");  
04.//Class to create a legend for our chart  
05.dojo.require("dojox.charting.widget.Legend");  
06.//A theme for our chart  
07.dojo.require("dojox.charting.themes.Tom"); 
/* required modules for the basic chart */
//Main 2d chart class
dojo.require("dojox.charting.widget.Chart2D");
//Class to create a legend for our chart
dojo.require("dojox.charting.widget.Legend");
//A theme for our chart
dojo.require("dojox.charting.themes.Tom"); 两种声明方式
与Dojo其余绝大多数控件类似，Charting也支持“标签声明”和“代码创建”两种方式新建图表。接下来我们来看看对应的两个例子。下面是例子中将用到的JSON数据：view plaincopy to clipboardprint?
01.var pieData = [{ "x": "1", "y": "9420" }, { "x":"2", "y":"10126" }, { "x": "3", "y": "9803" }, { "x": "4", "y": "15965" }, { "x": "5", "y": "17290" }, { "x": "6", "y": "15667" }, { "x": "7", "y": "17762" }]; 
var pieData = [{ "x": "1", "y": "9420" }, { "x":"2", "y":"10126" }, { "x": "3", "y": "9803" }, { "x": "4", "y": "15965" }, { "x": "5", "y": "17290" }, { "x": "6", "y": "15667" }, { "x": "7", "y": "17762" }]; 使用标签声明方式创建图表
我们可以直接使用HTML标签直接创建图表，在新建的图表标签中，图表类型（柱状图，饼图，线形图等）、标尺等都可以使用HTML标签声明。下面是一个饼图的声明示例：view plaincopy to clipboardprint?
01. 
02. 

 使用代码编程方式创建图表
编程方式创建图表同样也很简单，下面的javascript代码会创建与上面一个例子中完全相同的饼图。view plaincopy to clipboardprint?
01. 
view plaincopy to clipboardprint?
01.dojo.addOnLoad(function(){  
02.......  
03.var pieData = [{ "x": "1", "y": "9420" }, { "x":"2", "y":"10126" }, { "x": "3", "y": "9803" }, { "x": "4", "y": "15965" }, { "x": "5", "y": "17290" }, { "x": "6", "y": "15667" }, { "x": "7", "y": "17762" }];  
04.   //create the chart  
05.var pieChart = new dojox.charting.Chart2D("pieChart");  
06.//set the theme  
07.pieChart.setTheme(dojox.charting.themes.Tom);  
08.//add plot  
09.pieChart.addPlot("default", {  
10.        type: "Pie",  
11.        radius: 200,  
12.        fontColor: "black",  
13.        labelOffset: "-20" 
14.});  
15.//add the data series  
16.pieChart.addSeries("January",pieData);  
17.//slice animation!  
18.new dojox.charting.action2d.MoveSlice(pieChart,"default");  
19.//tooltips!  
20.new dojox.charting.action2d.Tooltip(pieChart,"default");  
21.//render the chart  
22.pieChart.render();  
23.......  
24.}); 
dojo.addOnLoad(function(){
......
var pieData = [{ "x": "1", "y": "9420" }, { "x":"2", "y":"10126" }, { "x": "3", "y": "9803" }, { "x": "4", "y": "15965" }, { "x": "5", "y": "17290" }, { "x": "6", "y": "15667" }, { "x": "7", "y": "17762" }];
   //create the chart
var pieChart = new dojox.charting.Chart2D("pieChart");
//set the theme
pieChart.setTheme(dojox.charting.themes.Tom);
//add plot
pieChart.addPlot("default", {
        type: "Pie",
        radius: 200,
        fontColor: "black",
        labelOffset: "-20"
});
//add the data series
pieChart.addSeries("January",pieData);
//slice animation!
new dojox.charting.action2d.MoveSlice(pieChart,"default");
//tooltips!
new dojox.charting.action2d.Tooltip(pieChart,"default");
//render the chart
pieChart.render();
......
}); 我们在回头看一下两种创建方式，可以发现两者的结构非常类似。在我们接下去的例子中，将使用编程方式来创建图表。而在在实际开发中，开发者可以自由选择创建方式。手把手构建网站访问量统计图
现在大家对Dojo Charting已经有了一个初步的认识，下面通过创建一个简单的图表来进一步了解Charting中各个功能。这个例子里我们使用层叠块状图（StackedAreas）展示网站访问量在3个月里的对比。首先，要有3个月的网站访问量， 用JSON数据表示，同一个月的数据用数据表示：view plaincopy to clipboardprint?
01.var json = {  
02.        January: [9420,10126,9803,15965,17290, /* … */  13165,12390],  
03.        February: [23990,32975,23477,22513,18069, /* … */ 12956,12815],  
04.        March: [22477,24014,21116,20404,19142, /* … */ 22077,20263]  
05.}; 
var json = {
        January: [9420,10126,9803,15965,17290, /* … */  13165,12390],
        February: [23990,32975,23477,22513,18069, /* … */ 12956,12815],
        March: [22477,24014,21116,20404,19142, /* … */ 22077,20263]
}; 第二，创建层叠块状图：view plaincopy to clipboardprint?
01.//we have a DIV element with an ID of "chart1";  that’s the argument  
02.var chart1 = new dojox.charting.Chart2D(‘chart1′);  
03.//add the default plot  
04.chart1.addPlot("default", {  
05.        //type of chart  
06.        type: "StackedAreas",  
07.        //show markers at number points?  
08.        markers: true,  
09.        //curve the lines on the plot?  
10.        tension: "S",  
11.        //show lines?  
12.        lines: true,  
13.        //fill in areas?  
14.        areas: true,  
15.        //offset position for label  
16.        labelOffset: -30,  
17.        //add shadows to lines  
18.        shadows: { dx:2, dy:2, dw:2 }  
19.}); 
//we have a DIV element with an ID of "chart1";  that’s the argument
var chart1 = new dojox.charting.Chart2D(‘chart1′);
//add the default plot
chart1.addPlot("default", {
        //type of chart
        type: "StackedAreas",
        //show markers at number points?
        markers: true,
        //curve the lines on the plot?
        tension: "S",
        //show lines?
        lines: true,
        //fill in areas?
        areas: true,
        //offset position for label
        labelOffset: -30,
        //add shadows to lines
        shadows: { dx:2, dy:2, dw:2 }
}); 由于在具体数字对于网站的访问量异常重要，我们需要添加标尺（Axis），x轴标尺表示日期，y轴标尺代表访问量。view plaincopy to clipboardprint?
01.chart1.addAxis("x");  
02.chart1.addAxis("y", { vertical:true }); 
chart1.addAxis("x");
chart1.addAxis("y", { vertical:true }); 现在图表的框架（类型、标尺）已经搭建起来了，下一步就是绑定每个月的数据了。另外，我们还可以通过stroke和fill变量，直接声明每个月对应的颜色。view plaincopy to clipboardprint?
01.chart1.addSeries("January Visits",json["January"], { stroke: "red", fill: "pink" });  
02.chart1.addSeries("February Visits",json["February"], { stroke: "green", fill: "lightgreen" });  
03.chart1.addSeries("March Visits",json["March"], { stroke: "blue", fill: "lightblue" }); 
chart1.addSeries("January Visits",json["January"], { stroke: "red", fill: "pink" });
chart1.addSeries("February Visits",json["February"], { stroke: "green", fill: "lightgreen" });
chart1.addSeries("March Visits",json["March"], { stroke: "blue", fill: "lightblue" }); 好了，基本的要素全到齐了，最后只需要调用render函数图表就生成了。view plaincopy to clipboardprint?
01.chart1.render(); 
chart1.render();  动画、图例和标记
在基本的图表功能之外，Charting还提供了许多实用的功能。图例
图例对于图表来说也是必不可少的，在Dojo Charting中添加一个图例也很简单。view plaincopy to clipboardprint?
01.//this legend is created within an element with a "legend1" ID.  
02.var legend1 = new dojox.charting.widget.Legend({chart: chart1}, "legend1"); 
//this legend is created within an element with a "legend1" ID.
var legend1 = new dojox.charting.widget.Legend({chart: chart1}, "legend1"); 动画
为静态的图表添加动画交互效果（比如高亮、放大、滑出等效果），可以让用户更清楚地看到细节内容。不同的图表类型都支持自己的一套动画交互效果。下面的代码给图表添加了“放大”的动画效果，当鼠标在图表节点上时，放大节点。view plaincopy to clipboardprint?
01.//add the magnification animation to our chart for the default plot  
02.var magnify = new dojox.charting.action2d.Magnify(chart1, "default"); 
//add the magnification animation to our chart for the default plot
var magnify = new dojox.charting.action2d.Magnify(chart1, "default"); 标记
尽管有x轴和y轴上的数据标尺，我们仍然不能确认每个节点的数值，所以就需要引入标记。添加标记功能也十分简单。view plaincopy to clipboardprint?
01.var tip = new dojox.charting.action2d.Tooltip(chart1, "default"); 
var tip = new dojox.charting.action2d.Tooltip(chart1, "default");  有一点需要注意的是，添加标记（tooltip）功能，需要引入dijit的theme css文件，这里使用的是tundra主题。缩放（Zooming）、平移（Panning）
Dojo Charting还提供支持图表缩放、移动等行为的函数。相关例子可以详见 Zooming, Scrolling, and Panning in Dojo Charting 或者 view a great example of panning, scrolling, and zooming! 事件绑定
Dojo Charting有自己的事件绑定方法：connectToPlot 。通过这个方法，用户可以触发自己的事件。相关的connectToPlot函数介绍详见Dojo Charting Reference Guide view plaincopy to clipboardprint?
01.chart1.connectToPlot("default",function(e) {  
02.       /* do something */ 
03.}); 
chart1.connectToPlot("default",function(e) {
       /* do something */
}); 主题（Theme）
Dojo Charting库提供了超过30种不同的主题风格。可以在看到这些主题预览，之后我还将翻译一篇如何自定义Dojo Charting主题的文章 Dive Into Dojo Chart Theming  其他图表
上面的例子介绍了一个具有基本功能的图表；Dojo Charting还有非常多高级特性的图表。•二维图表（例子 ）
•三维图表（例子 ）
•与动态数据源绑定的图表（简单例子 、股票图表 、教程 ）
 本文翻译自： http://www.sitepen.com/blog/2010/07/13/dive-into-dojo-charting/ 发表于 @ 2010年10月28日　17:42:00 | 评论( 3 ) | 编辑| 举报| 收藏 旧一篇:理解dojo.require机制 | 新一篇:部分Dojo常用函数简介（一）——Javascript基础扩展函数
查看最新精华文章 请访问博客首页相关文章obullxl 发表于2011年1月7日 2:52:14  IP:124.74.45.*举报回复删除
和jfreechart做出来的东西好像啊，Dojoconvict_EVA 发表于2011年3月28日 10:04:49  IP:221.221.17.*举报回复删除
dojo.require("dojox.charting.widget.Chart2D"); 报dojo is not defined 错误.dojo怎么导入？dojotoolkit 发表于2011年3月28日 10:53:05  IP:220.248.0.*举报回复删除
请参考最新的Hello Dojo教程发表评论表 情：          评论内容： 用 户 名：登录 注册 匿名评论 匿名用户验 证 码：  重新获得验证码
  热门招聘职位荷兰互联网公司诚聘Web(Rails)开发工程师【重庆大龙网】高薪诚聘中高级软件工程师美资高薪诚聘软件开发及数据库人才【新迪数字】高薪诚聘JAVA项目软件架构师、JAVA项目主管！！【尚品网】诚招软件开发工程师【UniQlick】【8K-12K】急招Java工程师、技术工程师、数据分析师【 CSDN】高薪诚聘：java、运营、就业、商务策划经理、网站编辑！【武汉亨通科技】高薪诚聘项目经理、高级软件工程师，邀您加盟！【careerfocus】科锐福克斯猎头公司强悍猎聘IT人才！【沃尔玛中国】信息系统部急聘IT英才（上海，深圳）！！！【融资城】投融资平台高薪诚聘技术总监、产品经理等【搜狐公司】海量技术职位火热招聘中!荷兰互联网公司诚聘Web(Rails)开发工程师【重庆大龙网】高薪诚聘中高级软件工程师美资高薪诚聘软件开发及数据库人才【新迪数字】高薪诚聘JAVA项目软件架构师、JAVA项目主管！！【尚品网】诚招软件开发工程师【UniQlick】【8K-12K】急招Java工程师、技术工程师、数据分析师【 CSDN】高薪诚聘：java、运营、就业、商务策划经理、网站编辑！【武汉亨通科技】高薪诚聘项目经理、高级软件工程师，邀您加盟！【careerfocus】科锐福克斯猎头公司强悍猎聘IT人才！【沃尔玛中国】信息系统部急聘IT英才（上海，深圳）！！！【融资城】投融资平台高薪诚聘技术总监、产品经理等【搜狐公司】海量技术职位火热招聘中! 公司简介|招贤纳士|广告服务|银行汇款帐号|联系方式|版权声明|法律顾问|问题报告
北京创新乐知信息技术有限公司 版权所有, 京 ICP 证 070598 号
世纪乐知(北京)网络技术有限公司 提供技术支持
江苏乐知网络技术有限公司 提供商务支持
 Email:webmaster@csdn.net
Copyright © 1999-2010, CSDN.NET, All Rights Reserved
 本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/dojotoolkit/archive/2010/10/28/5972462.aspx