dojo chart详解

Dojo提供了一套很完善的统计图（Chart）接口，在dojox/charting下面，可以支持很多种类型的。

1、简介

Dojo统计图提供快速的、简单的接口实现美观的、交互性强的web统计图表的实现。

1.1 基本图表

下面的代码展示的是如何用html和dojo实现一个简单的统计图。

HTML：

<divid="simplechart"style=" 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 });