电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: Dojo Chart 动态绘图及性能调优（2） [打印本页]

作者: look_w 时间: 2018-10-19 21:16 标题: Dojo Chart 动态绘图及性能调优（2）

添加曲线添加曲线可以直接使用 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;
};

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)