IDEC MICROSmart FC6A-C16K1CE, Руководство по связи, Страница: 239 / 252

FC6A S
ERIES
M
ICRO
S
MART
A
LL
-
IN
-O
NE
T
YPE
C
OMMUNICATION
M
ANUAL
FC9Y-B1730 11-21
11: W
EB
S
ERVER
The parameters that can be set as an element of bars[] are as follows. If the default value of the parameter is acceptable, it does
not need to be set.
When the div tag is coded as follows, two vertical bar graphs are displayed using the data in double words D2040 and D2042 (decimal).
Bar Graph (Horizontal)
When the monitor function is enabled and the div tag and parameters are coded on the HTML file, it will be automatically
converted to a JavaScript request and the values of the data registers acquired via CGI will be displayed in a horizontal bar graph.
To draw a horizontal bar graph, first set the id attribute to a string that indicates a unique ID for each graph, set the data-graph
attribute to "hbar" that indicates the type of data, and code the parameters in the div tag.
The parameters that can be set are as follows. If the default value of the parameter is acceptable, it does not need to be set.
min_val: : The minimum value of the graph. This parameter is required.
max_val : The maximum value of the graph. This parameter is required.
label : The label name. The default is a string that combines the device and device number.
back_col : The background color of the graph. The default value is "#FFFFFF".
front_col : The foreground color of the graph. The default value is a color that differs for each element.
scale_on : This parameter sets whether or not the graph has a scale. The default setting is false (no scale).
scale_lbl_on : This parameter sets whether or not there is a label for the scale on the graph.
The default setting is false (no label).
<div id="div11" data-graph="vbar">
device:"D", address:2040, driver:0, net_no:0, format:"DEC-D",
width:300, height:300, line_col:"#000000",
barvgutter:30, barwidth:20,
gutter:20, type:"square", scalewidth:5,
bars:[
{
min_val:0, max_val:100, label:"dev A",
back_col:"#FFFFFF", front_col:"#0000FF",
scale_on:true, scale_lbl_on:true
},
{
min_val:0, max_val:100, label:"dev B",
back_col:"#FFFFFF", front_col:"#FF0000",
scale_on:false, scale_lbl_on:false
}
]</div>
device : The device. Set this to "D" (data register).
address : The device number. Set this as a numeric value.
driver : The driver number. Set this to 0.
net_no : The network number. Set this to 0.
format : The web data type string.
width : The width of the div border in pixels. The default value is 300.
height : The height of the div border in pixels. The default value is 300.
line_col : The line color of the div border. The default value is "#000000".
barhgutter : The horizontal space from the div border to the graph in pixels.
The default value is 30.
barwidth : The width of the graph in pixels. The default value is 20.
gutter : The space between graphs in pixels when displaying multiple graphs.
The default value is 20.
type : The shape of the ends of the graph. Select "square", "round", "sharp", or "soft". The default setting is "square".
scalewidth : The width of the scale in pixels. The default value is 5.
labelvgutter : The vertical space from the graph where the label will be displayed in pixels.
The default value is 20.
labelhgutter : The horizontal space from the graph where the label will be displayed in pixels.
The default value is 30.
bars[] : An array of parameters that configures each graph. Code the parameters for each array in { } and separate
each array element with ",".
100
99
dev A
0
45
dev B