添加曲线添加曲线可以直接使用 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 参数1
2
3
4
| 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.添加坐标1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| 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 int
if(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()函数中，当该点不存在时，仍然需要返回 ‘-‘ 或者’ ’(空格字符串)。
添加动态效果组件在图 1 的示例中，我们使用了如下三种效果组件。
- dojox/charting/action2d/Highlight
- dojox/charting/action2d/Magnify
- dojox/charting/action2d/Tooltip
Highlight 和 Magnify 使鼠标悬浮在该点时，该点能放大并且高亮显示。
Tooltip 使鼠标悬浮在该点时，显示提示信息。提示信息为 series 数据中的 tooltip 字段，该字段不存在时，默认显示该点 y 坐标值。
修改清单 4 中函数，可以同时转换 tooltip。
清单 8.tooltip 换函数1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| _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.');
}
if(arrData[obj].message){
tmpItem.tooltip = arrData[obj][yName] : arrData[obj][yName]+'<br>'+arrData[obj].message;
tmpItem.fill = '#DF0101';
tmpItem.stroke = {color : '#DF0101'};
}
series.push(tmpItem);
};
return series;
};
|
|
