Dojox.charting 简介Dojo charting 是 Dojox 目录下的一个矢量图组件库，它提供了众多图表类型，如点线图、柱状图、饼图、聚簇柱图、网状图等 2D 图形以及 3D 图和地图，同时包含支持图表动态效果和主题的各种组件，如 Legend、Highlight 以及 Tooltip，为可视化的 Web 应用开发者提供的诸多方便。
下面将介绍如何用 Dojox.charting 创建图表，并实现并实现图表的实时更新。
创建静态图表创建一个静态图表的过程如下：
清单 1.创建简单图表1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <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
| 下面介绍如何创建示例图 1 中，用于实时更新的图表。
|
Chart 参数
- 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 参数1
2
3
| Var myChart = new Chart(domNode, {
margins: {l: 40,r: -60,t: 0,b: 0},
});
|
数据转换1
| 实时上，我们使用 REST 服务返回的数据进行绘图时，服务器返回的数据往往是 JSON 格式的坐标值，例如：
|
清单 3 .REST API 返回的绘图数据1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| 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 值转换函数1
2
3
4
5
6
7
8
9
10
11
12
| _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.添加数据1
2
| myChart.addSeries(‘value’,_valueTrans(rawData,’value’));
myChart.addSeries(‘id’,_valueTrans(rawData,’id’));
|
|
