Dojo提供了一套很完善的统计图（Chart）接口，在dojox/charting下面，可以支持很多种类型的。
1、简介
统计图提供快速的、简单的接口实现美观的、交互性强的web统计图表的实现。
1.1 基本图表
下面的代码展示的是如何用html和dojo实现一个简单的统计图。
HTML：
<divid="simplechart"style="width: 250px; height: 150px; margin: 5px auto0px auto;"></div>
Javascript：
require(["dojox/charting/Chart","dojox/charting/axis2d/Default","dojox/charting/plot2d/Lines","dojo/domReady!"],
function(Chart, Default,Lines){
var chart1 =new Chart("simplechart");
chart1.addPlot("default", {type:"Lines"});
chart1.addAxis("x");
chart1.addAxis("y", {vertical:true});
chart1.addSeries("Series 1", [1,2,3,4,5,7]);
chart1.render();
});
如上代码，创建任何一个图表都需要定义Plots,Axes和Series数据，其中，Plots是定义数据如何被显示，Axes定义的是数据显示的精度以及一些特殊的标签，Series是数据本身。
1.2 标题
有时候需要给图表添加标题，下面的代码演示的是如何给图表添加标题：
require(["dojox/charting/Chart","dojo/domReady!"],function(Chart){
var chart =new dojox.charting.Chart("test", {
title:"Production(Quantity)",
titlePos:"bottom",
titleGap:25,
titleFont:"normal normal normal 15pt Arial",
titleFontColor:"orange"
});
});
1.3 添加图表
addPlot()定义了你添加图表的类型，下面展示了一些基本的图表：
需要两个参数，一个名称和一个参数数组。名称是非常重要的如果你有多种类型的图表存在的话。参数数组包含了你要定义的图标的一些参数，包括图表的类型等。下面的代码展示了的使用：
require(["dojox/charting/plot2d/Areas",...],function(Areas,...){
// ...
chart.addPlot("default",{ type: Areas });
});
1.4 2D图表
2D的图表包括以下几种：
| 类型 |
样式 |
说明 |
| 线状图 Line charts |
Default |
Universal line chart capable to draw lines,fill areas under them,and placing markers at data points. This plot type is used if no plot type was specified when adding it to a chart. |
| Lines |
Basic line chart. Uses Default. |
|
| Areas |
Area under data line(s) will be filled. Uses Default. |
|
| Markers |
Lines with markers. Uses Default. |
|
| MarkersOnly |
Markers,sans lines. Uses Default. |
|
| 堆积线图 Stacked line charts |
Stacked |
Data sets charted in relation to the prevIoUs data set. Extension of Default. |
| StackedLines |
Stacked data sets using lines. Uses Stacked. |
|
| StackedAreas |
Stacked data sets with filled areas under chart lines. Uses Stacked. |
|
| 横向柱状图 Bars |
Bars |
Horizontal bars. |
| ClusteredBars |
Horizontal bars with clustered data sets. Uses Bars. |
|
| StackedBars |
Stacked data sets with horizontal bars. Uses Bars. |
|
| 竖向柱状图 Columns |
Columns |
Vertical bars. |
| ClusteredColumns |
Vertical bars with clustered data sets. Uses Columns. |
|
| StackedColumns |
Stacked data sets with vertical bars. Uses Columns. |
|
| 其他 Miscellaneous |
饼状图 Pie |
Typical pie chart or circle graph. |
| 蜘蛛网图 Spider |
A very effective tool for comparing multiple entities based on different characteristics. |
|
| 散点图 Scatter |
Similar to MarkerOnly,yet capable to chart using gradient fields. |
|
| 气泡图 Bubble |
Similar to scatter but with bubbles elements which sizes vary depending on the data. |
|
| 网格图 Grid |
For adding a grid layer to your chart. |
|
| 仪表盘 Indicator |
For adding vertical or horizontal indicator threshold on the chart. |
1.4.1 Lines， AreasMarkersLines图表生成时，需要五个特别的参数。首先，有三个定义方向的参数，下面的代码展示了如何定义：
require(["dojox/charting/plot2d/StackedAreas", ...], function(StackedAreas, ...){
chart.addPlot("default", { type: StackedAreas,lines:true, areas:true, markers:false });
});
此外，还有两个特殊参数，tensioninterpolate。其中，tension容许你添加一些弯曲在你的图上，默认值为“”，其他可用值包括：
·“X”– 立方贝萨尔平滑曲线。
·“x”– 与“X”相似，但是默认数据点的集合是闭合循环的，一个班用于绘制真实的Xy值。
·“S” – 平方贝萨尔平滑曲线。
例如：
require(["dojox/charting/plot2d/StackedLines", function(StackedLines, {type: StackedLines,tension:"S" });
});
Interpolate让你选择在没有数据的情况下的操作，如果为false（默认值），则为折线图，否则会根据前后的值进行插值，平滑曲线显示。
Markers是固定大小与样式重新定义图表主题的。例如：
require["dojox/charting/Chart","dojox/charting/SimpleTheme"],function(Chart, SimpleTheme){
var myTheme =new SimpleTheme({
markers: {
CIRCLE:"m-6,0 c0,-8 12,m-12,8 12,0"
SQUARE:"m-6,-6 12,0 0,12 -12,0z"
}
});
var chart =new Chart().setTheme(myTheme);
});
1.4.2 BarsColumnsCandle StickBars图表有一些特殊的参数去设置，主要有：
·gap– 柱子之间的间距
·minBarSize– 最小值
·maxBarSize– 最大值
require(["dojox/charting/plot2d/Bars", function(Bars, { type: Bars,gap:5, minBarSize:3, maxBarSize:20 });
});
1.4.3 Bubble
Bubble提供特殊的参数去渲染，包括fill strokeshadow。例如：
require(["dojox/charting/plot2d/Bubble", function(Bubble, { type: Bubble,fill:"red" });
});
1.4.4 Pie
饼状图有一些特殊的参数去设置，如下（源自Pie.js）：
defaultParams: {
labels:true,
ticks:false,
fixed:true,
precision:1,
labelOffset:20,
labelStyle:"default", // default/columns/rows/auto
htmlLabels:true // use HTML to draw labels
},
optionalParams: {
font:"",
fontColor:"",
radius:0
}
1.4.5 样式控制
添加填充（fill）
require(["dojox/charting/plot2d/Columns", function(Columns, { type: Columns,stroke: {color:"blue", width:2}, fill:"lightblue"});
});
添加阴影（shadow）
require(["dojox/charting/plot2d/Lines", function(Lines, { type: Lines,markers:true,
tension:"X", shadow: {dx:2, dy:2} });
});
过滤器（filter"dojox/gfx/filters", ...,"dojox/gfx/svgext"],
function(Columns, filters,...){
chart.addPlot("default",fill:"red", filter: filters.shadows.dropShadow });
});