Dojo charting 是 Dojox 目录下的一个矢量图组件库，它提供了众多图表类型，如点线图、柱状图、饼图、聚簇柱图、网状图等 2D 图形以及 3D 图和地图，同时包含支持图表动态效果和主题的各种组件，如 Legend、">Highlight 以及 Tooltip，为可视化的 Web 应用开发者提供的诸多方便。
下面将介绍如何用 Dojox.charting 创建图表，并实现并实现图表的实时更新。
创建静态图表
创建一个静态图表的过程如下：
清单 1.创建简单图表
<div id="chartOne" style="width: 400px; height: 240px; margin: 10px auto 0px auto;"></div><script>require(["dojox/charting/Chart", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/StackedAreas", "dojox/charting/themes/Wetland" , "dojo/ready"], function(Chart, Default, StackedAreas, Wetland){ var chart = new Chart("chartOne"); chart.addPlot("default", {type: StackedAreas, tension:3}) .addAxis("x", {fixLower: "major", fixUpper: "major"}) .addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", min: 0}) .setTheme(Wetland) .addSeries("Series A", [1, 2, 0.5, 1.5, 1, 2.8, 0.4]) .addSeries("Series B", [2.6, 1.8, 2, 1, 1.4, 0.7, 2]) .render();});</script>
创建动态图表
图 1.Chart 示例
下面介绍如何创建示例图 1 中，用于实时更
新的图表。
Chart 参数
Dojox.charting 参数介绍： margins：图表显示的
大小，由参数中’domNode’的样式决定，设置 width 和 height 可以改变图表的大小。margins 参数用来控制图表在 Dom 节点中的位置。如果出现 Y 轴坐标值长度较长时，造成图表不居中时，可以修改 margins.l 和 margins.r 使图表达到
合适的效果。 stroke : 图表边框的样式，dojox.gfx.Stroke 对象。
例如 stroke: {width:2,color:'red'}; fill ： 图表背景色，dojox.gfx.Fill。例如 fill : 'lightblue', delayInMs：Number, 延迟渲染时间，以 ms 为单位。
在清单 1 中，添加创建图表的第一步 new chart()中的参数，修改图表样式，对于图 1 中的示例，我们使用如下参数：
清单 2 .Chart 参数
Var myChart = new Chart(domNode, {margins: {l: 40,r: -60,t: 0,b: 0},});
数据转换
实时上，我们使用 REST 服务返回的数据进行绘图时，服务器返回的数据
往往是 JSON 格式的坐标值，例如：
清单 3 .REST API 返回的绘图数据
var rawData = {"statistics": [{ "id": 1, "healthState": "OK", "captureTime": "2013-08-13 10:00:40", "value": 0 },{ "id": 2, "healthState": "OK", "captureTime": "2013-08-13 10:01:10", "value": 3 },{ "id": 3, "healthState": "ERROR", "message": "Pass the error threshold!", "captureTime": "2013-08-13 10:01:40", "value": 6 }]}
因此，我们需要将 JSON 格式的数据转化成 Dojo Chart 能识别的数据类型。Dojo Chart 支持 addSeries 时使用 JSON 对象的数组。图 1 中，我们以’captureTime’为横轴,分别为’value’和’id’绘制 2D 曲线，则需要将’value’和’id’分别转换成转换为’y’值。
清单 4 .Y 值转换函数
_valTrans = function (arrData,yName){var series = [];for(var obj in arrData){var tmpItem = {}; if(arrData[obj][yName]!==undefined){ tmpItem.y = parseFloat(arrData[obj][yName]);}else{ console.warn('series:',yName,'not exist.'); } series.push(tmpItem);};return series;},
清单 5.添加数据
myChart.addSeries(‘value’,_valueTrans(rawData,’value’));myChart.addSeries(‘id’,_valueTrans(rawData,’id’));
添加曲线
添加曲线可以直接使用 addPlot(‘plotName’,{args})函数。
plot 具体参数：
type : 曲线类型，如 Areas, Bars, Bubble , Columns , Pie , Markers ,Lines 等，每种类型曲线支持的数据结构和其它参数不同。 其它基本参数： hAxis : String，横坐标名称； vAxis : String，纵坐标名称； lines ：Boolean 值，在点之间是否画线； areas ：Boolean 值，是否画面； markers ：Boolean 值，是否显示点 tension ： Number|String，将曲线平滑化，支持数字，或者’x’, ’X’, ‘S’; stroke ：dojox.gfx.Stroke 对象，设置该图中所有曲线的样式； fill ：dojox.gfx.Fill 对象，设置该图中所有点的样色； markerStroke ：dojox.gfx.Stroke 对象，设置该图中所有点的样式； styleFunc ：根据每个点，返回样式对象。
图 1 示例中，我们使用如下参数：
清单 6.Plot 参数
myChart.addPlot("default",{ type : 'Markers': markerStroke:{width:1}};
添加坐标轴
使用 addAxis()函数添加坐标轴。
addAxis 函数参数介绍：
name : 坐标名； kwArgs ：其它参数对象 vertical ：Boolean， 确定是横坐标还是纵坐标； fixUpper ：String ，最大值显示方式，"major", "minor", "micro", 或 "none"； fixLower ：String，最小值显示方式，"major", "minor", "micro", 或 "none"； includeZero ：Boolean，是否显示 0； min: Number，坐标最小值； max: Number，坐标最大值； labels: {value:’’,text:’’}对象数组，根据 value 排序； labelFunc ： 返回坐标值的文本 text； dropLabels ：Boolean, 是否显示所有坐标值，默认 true。 title : 坐标标题； titleGap、titleFont、titleFontColor、titleOrientation: 标题样式； rotation ：坐标文本旋转角度。 labelSizeChange : 放大缩小时，坐标是否同步放大缩小。
为图 1 示例添加坐标：
清单 7.添加坐标
myChart.addAxis("x", {labelFunc : function(value){var label = _getLabels(rawData,value);return label;},max : totalPoint ,labelSizeChange : true,//dropLabels : false,rotation : 15});myChart.addAxis("y, {vertical : true,fixUpper : "major",fixLower : "major",});_getLabels : function(arrData,value){// value not all intif(arrData.length < 1 ||arrData.length <= value||parseInt(value)!=value){return '-';}else{//console.log('label:',arrData[value]);return arrData[value].captureTime.toString();}};
清单 4 中已经将所需绘图的数据相应 y 值转换，所以，这里 y 坐标会直接显示 Number 类型数据，不需单独设置 lable。未设置’max’和’min’时，坐标轴会根据当前数据的最大最小值，自动 s 适配坐标范围。
在以时间为横轴的动态图中，需要将时间转换成 Dojox.Charting 能识别的数据，清单 7 中，通过_getLables()函数，得到 x 轴的坐标文本。其中，参数’value’指横坐标刻度的索引值，不全为整数，默认情况，x 轴会显示该索引值，所以需要将 rawData 中的 captureTime 字段数据替代 x 轴的索引值。初始化时，rawData 数据长度可能会比图的总点数少，而 labelFunc 的函数需要每个 x 轴上的 value 都有 label 的返回值，因此在_getLabels()函数中，当该点不存在时，仍然需要返回 ‘-‘ 或者’ ’(空格字符串)。