首页 > 代码库 > dojo chart详解
dojo chart详解
Dojo提供了一套很完善的统计图（Chart）接口，在dojox/charting下面，可以支持很多种类型的。
1、简介
Dojo统计图提供快速的、简单的接口实现美观的、交互性强的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,2,3,4,5,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"
}); });添加标题的参数如下：
名称 | 类型 | 默认值 | 描述 |
titlePos | string | top | 定义添加标题的位置 |
titleGap | number | 20 | 定义标题之间的间距 |
title | string | null | 定义标题显示的内容 |
1.3 添加图表
addPlot()定义了你添加图表的类型，下面展示了一些基本的图表：
addPlot()需要两个参数，一个名称和一个参数数组。名称是非常重要的如果你有多种类型的图表存在的话。参数数组包含了你要定义的图标的一些参数，包括图表的类型等。下面的代码展示了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， Areas和Markers图表
Lines， Areas和Markers图表生成时，需要五个特别的参数。首先，有三个定义方向的参数，下面的代码展示了如何定义：
require(["dojox/charting/plot2d/StackedAreas", ...], function(StackedAreas, ...){
chart.addPlot("default", { type: StackedAreas, lines:true, areas:true, markers:false });
});此外，还有两个特殊参数， tension和interpolate。其中，tension容许你添加一些弯曲在你的图上，默认值为“”，其他可用值包括：
· “X” –立方贝萨尔平滑曲线。
· “x” –与“X”相似，但是默认数据点的集合是闭合循环的，一个班用于绘制真实的Xy值。
· “S” –平方贝萨尔平滑曲线。
例如：
require(["dojox/charting/plot2d/StackedLines", ...], function(StackedLines, ...){
chart.addPlot("default", {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,-8 12,0, m-12,0 c0,8 12,8 12,0"
SQUARE:"m-6,-6 12,0 0,12 -12,0z"
} });var chart =new Chart().setTheme(myTheme);
});1.4.2 Bars，Columns和Candle Stick图表
Bars，Columns和Candle Stick图表有一些特殊的参数去设置，主要有：
· gap –柱子之间的间距
· minBarSize –最小值
· maxBarSize –最大值
require(["dojox/charting/plot2d/Bars", ...], function(Bars, ...){
chart.addPlot("default", { type: Bars, gap:5, minBarSize:3, maxBarSize:20 });
});1.4.3 Bubble
Bubble提供特殊的参数去渲染，包括fill， stroke和shadow。例如：
require(["dojox/charting/plot2d/Bubble", ...], function(Bubble, ...){
chart.addPlot("default", { 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, ...){
chart.addPlot("default", { type: Columns, stroke: {color:"blue", width:2}, fill:"lightblue"});
});添加阴影（shadow）
require(["dojox/charting/plot2d/Lines", ...], function(Lines, ...){
chart.addPlot("default", { type: Lines, markers:true,
tension:"X", shadow: {dx:2, dy:2} });
});过滤器（filter）
require(["dojox/charting/plot2d/Columns","dojox/gfx/filters", ... , "dojox/gfx/svgext"],
function(Columns, filters, ...){
chart.addPlot("default", { type: Columns, fill:"red", filter: filters.shadows.dropShadow });
});样式化函数（styleFunc）
require(["dojox/charting/plot2d/Columns", ...], function(Columns, ...){
chart.addPlot("default", { type: Columns, styleFunc:function(item){
if(item.y<10){
return { fill :"red" };
}elseif(item.y>60){
return { fill:"green" };
}return {};
}});});标注（label）
require(["dojox/charting/plot2d/Columns", ...], function(Columns, ...){
chart.addPlot("default", { type: Columns, label:true, labelStyle:"outside", labelOffset:25 });
});1.4.6 Spider
Spider有一些特殊的参数去设置，参数如下：
defaultParams: {
precision:1,
labelOffset: -10, // axis title offset
divisions: 3, // axis tick count
axisColor: "", // spider axis color
axisWidth: 0, // spider axis stroke width
axisFont:"normal normal normal 11pt Arial"// spider axis font
spiderColor: "", // spider web color
spiderWidth: 0, // spider web stroke width
seriesWidth: 0, // plot border with
seriesFillAlpha:0.2, // plot fill opacity
spiderOrigin: 0.16, // distance of 0 value from the middle of the circle
markerSize: 3, // radius of plot vertex (px)
divisions:5, // set division of the radar chart
precision:0, // set decimal of the displayed number
spiderType: "polygon", // style of spider web, "polygon" or "circle"
animationType: dojo.fx.easing.backOut,
}下面的例子展示了相关参数的使用与设置：
require(["dojox/charting/plot2d/Spider","dojox/charting/widget/SelectableLegend", ...], function(Spider, SelectableLegend, ...){
// ...
chart.addPlot("default", {
type: Spider,
labelOffset:-10,
divisions:5,
seriesFillAlpha:0.2,
markerSize:3,
precision:0,
spiderType:"polygon"
});chart.addSeries("China", {data: {"GDP":2,"area":6,"population":2000,"inflation":15,"growth":12}}, { fill:"blue" });
chart.addSeries("USA", {data: {"GDP":3,"area":20,"population":1500,"inflation":10,"growth":3}}, { fill:"green" });
// ...
chart.addSeries("Canada", {data: {"GDP":1,"area":18,"population":300,"inflation":3,"growth":15}}, { fill:"purple" });
chart.render();var legend =new SelectableLegend({chart: chart, horizontal:true},"legend");
});1.4.7 grid
Grid也是一个参数比较独特的图表。该图表在marker绘制直线，并通过四个布尔型的参数设置直线是否显示，如下：
require(["dojox/charting/plot2d/Grid", ...], function(Grid, ...){
chart.addPlot("default", { type: Grid,
hMajorLines:true,
hMinorLines:false,
vMajorLines:true,
vMinorLines:false,
majorHLine: { color:"green", width:3 },
majorVLine: { color:"red", width:3 } });
});1.5 配置坐标轴
1.5.1 制定坐标轴
require(["dojox/charting/plot2d/Lines", ...], function(Lines, ...){
chart.addPlot("default", {type: Lines, hAxis:"x", vAxis:"y"});
chart.addAxis("x");
chart.addAxis("y", {vertical:true});
});零值处理
chart.addAxis("x", {fixUpper:"major", fixLower:"minor"});
chart.addAxis("y", {vertical:true, fixUpper:"major", includeZero:true});
坐标标注重复处理leftBottom
require(["dojox/charting/Chart","dojox/charting/plot2d/Lines", ...], function(Chart, Lines, ...){
// ...
var chart =new Chart("simplechart");
chart.addPlot("default", {type: Lines});
chart.addPlot("other", {type: Areas, hAxis:"other x", vAxis:"other y"});
chart.addAxis("x");
chart.addAxis("y", {vertical:true});
chart.addAxis("other x", {leftBottom:false});
chart.addAxis("other y", {vertical:true, leftBottom:false});
chart.addSeries("Series 1", [1,2,2,3,4,5,5,7]);
chart.addSeries("Series 2", [1,1,4,2,1,6,4,3],
{plot:"other", stroke: {color:"blue"}, fill:"lightblue"}
); chart.render();});1.5.2 坐标的标题
Name | Type | Default | Description |
title | string | null | axis title text. |
titleGap | number | 15 | the spacing between title and corresponding axis, measured by pixel. |
titleFontColor | string | black | axis title font color. |
titleOrientation | string | axis | determine the title orientation to the axis, facing to the axis by “axis”, or facing away from the axis by “away”. |
1.5.3 坐标轴颜色等
chart.addAxis("other y", {vertical:true,
leftBottom:false,
max:7,
stroke:"green",
font:"normal normal bold 14pt Tahoma",
fontColor:"red",
majorTick: {color:"red", length:6},
minorTick: {stroke:"black", length:3}
});1.5.4 坐标轴标注
chart.addAxis("x", {
labels: [{value:1, text:"Jan"}, {value:2, text:"Feb"},
{value:3, text:"Mar"}, {value:4, text:"Apr"},
{value:5, text:"May"}, {value:6, text:"Jun"},
{value:7, text:"Jul"}, {value:8, text:"Aug"},
{value:9, text:"Sep"}, {value:10, text:"Oct"},
{value:11, text:"Nov"}, {value:12, text:"Dec"}]
});或者labelfunc
var myLabelFunc =function(text, value, precision){
return text+" my unit";
};chart.addAxis("x", { labelFunc: myLabelFunc });
dojo chart详解