图形分析
概述
图形分析
示例
一：配置demo
<WebChartList>
<WebChart Name="MyChart" Title="图形分析配置">
<Chart Id="Chart">
<DataSource Type="SqlServer">
<![CDATA[
--序列图，柱状图，曲线图，折线图数据源：
select * from (
select '2012-01-01' a,'62' b,'63' c,'74' d,'55' e,'96' f
union
select '2012-01-02' a,'83' b,'64' c,'75' d,'66' e,'77' f
union
select '2012-01-03' a,'74' b,'55' c,'46' d,'57' e,'88' f
union
select '2012-01-04' a,'35' b,'56' c,'57' d,'68' e,'79' f
union
select '2012-01-05' a,'82' b,'39' c,'64' d,'85' e,'66' f
union
select '2012-01-06' a,'35' b,'84' c,'55' d,'66' e,'37' f
union
select '2012-01-07' a,'34' b,'75' c ,'54' d,'45' e,'45' f
union
select '2012-01-08' a,'13' b,'23' c,'33' d,'45' e,'65' f) a
where a='{@Request['categoryField']}'
--饼图数据源
--select '77' a,'62' b,'63' c,'74' d,'55' e,'96' f
--冒泡图数据源(x,y,r 三个字段必须为number类型)
--select '1' a,'62' b,'13' c
--仪表盘数据源(仪表盘指针指向的值)
--select '33'
]]>
</DataSource>
<SeriesDataSource Type="SqlServer">
<![CDATA[
select '测试数据一,测试数据二,测试数据三,测试数据四,测试数据五' legend,--图例 固定别名'legend'
'column,curve,column,curve,column' seriesType,--序列类型 固定别名'seriesType'
'#EA7500,#84C1FF,#82D900,#EA0000,#F9F900' color,--序列颜色 固定别名'color'
'11,25,39,55' dashboardValues--仪表盘显示的值 固定别名'dashboardValues'
]]>
</SeriesDataSource>
<ChartAlertLines>
<ChartAlertLine LineColor="#000000" LineToolTip="警戒线" LineValue="85"/>
</ChartAlertLines>
<Config ChartType="ColumnChart" XField="a" IsShowDataLable="false" IsShowAlertLine="false"
IsShowCategory="true" Is3D="true" IsRotate="false"
IsShowYTickLine="true" IsShowXTickLine="false" RadiusField="c"
IsShowGridLines="true" IsShowDataTips="true" IsShowDataEffect="true" IsClickEnabled="false"
/>
</Chart>
<Setting ChartFrame="Horizontal" />
<Scripts>
<Script>
<![CDATA[
//图项单击 {itemIndex:图项索引, categoryField:分类轴数据,Value:直线轴值,legendTitle:图例标题,chartId:图id, chartInde图索引 }
function chartItemOnClick(ItemIndex, categoryValue, Value, legendTitle, chartId, chartIndex)
{
alert(ItemIndex+","+categoryValue+","+Value+","+legendTitle+","+chartId+","+chartIndex);
}
//图单击chartIndex图索引
function chartOnClick(chartIndex){
}
]]>
</Script>
</Scripts>
</WebChart>
</WebChartList>
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
二：配置属性说明
**一：chart****标签：**1.Id 图形id，唯一标识，须给定。 2.IsDataForGrid 设为true时，图形分析的数据来自同一配置文件中的网格数据源，默认为false。
二：ChartAlertLine 标签 **（LineChart,ColumnChart,CurveChart,SerialChart****有效）**1. LineColor 警戒线颜色
- LineValue 警戒线值 3. LineToolTip 警戒线提示信息
**三：Config****标签 {****图形配置信息}**1. Unit 单位(将被添加到值标签)
Xfield X轴字段 3. IsRotate (是否旋转图形(柱状图，折现图，曲线图有效)，默认为false
RadiusField半径，冒泡图有效
LegendPosition 图例位置，默认为right
IsShowCategory 是否显示分类轴数据，默认为true
ChartType 图类型
IsShowAlertLine 是否显示警戒线，默认为true
IsShowDataLable是否显示数据标签
Is3D 是否3D效果显示 ，默认为true
IsShowGridLines 是否显示背景网格，默认为false
IsClickEnabled是否启用图形点击事件，默认为true
IsShowDataTips 是否显示图形提示信息，默认为true
LinearAxisMaxNum 直线轴数据显示最大值
LinearAxisMinNum 直线轴数据显示最小值
IsLoadVisible 页面加载时是否可见
\17. IsShowYTickLine 是否显示y轴刻度线，默认为true \18. IsShowXTickLine 是否显示x轴刻度线，默认为true \19. IsShowDataEffect 是否启用动画效果 默认为false 20 GridLinesYFillColor 图网格背景纵向填充颜色（16进制,如"#FFFFFF"）.
\21. GridLinesXFillColor图网格背景横向填充颜色（16进制,如"#FFFFFF"）
\22. GridLinesYStrokeColor图网格背景纵向线条颜色（16进制,如"#FFFFFF"）
23．GridLinesXStrokeColor图网格背景横向线条颜色（16进制,如"#FFFFFF"）
\24. Diameter 仪表盘直径
\25. IsShowDashboardData 是否显示仪表盘数据
\26. CategoryItemAdjustLen 分类轴项调整长度（图形校准值）
27 . IsShowChartCursor 是否显示图表光标(柱状图，折现图，曲线图，序列图有效)
**四：Setting****标签 {图形整体配置信息}：**1. Width 图形宽度 \2. Height 图形高度 \3. ChartFrame 布局
- IsShowBorder 是否显示边框 五：Lable 标签
- id Id唯一标识
- txt显示文本
- x x坐标
- y y坐标
三：javascript Demo
<Scripts>
<Script Src="UI/Chart/FlexChart.js"></Script>
<Script>
<![CDATA[
$(document).ready(function(){
var chartArray = new Array("柱状图;ColumnChart","序列图;SerialChart", "曲线图;CurveChart", "折现图;LineChart", "饼图;PieChart", "雷达图;RadarChart", "冒泡图;BubbleChart", "仪表盘;Dashboard");
var obj = document.createElement("select");
for (var i = 0; i < chartArray.length; i++) {
op = document.createElement("option");
op.value = chartArray[i].split(";")[1];
op.text = chartArray[i].split(";")[0];
op.innerText = chartArray[i].split(";")[0];
obj.options.appendChild(op);
}
obj.onchange=function(){selChanged(this)};
obj.options[0].selected = true;
document.body.appendChild(obj);
var div = document.createElement("div");
div.id = "chartDiv";
div.style.cssText = "width:100%;height:80%;";
document.body.appendChild(div);
window.chart = new FlexChart("Demo/Demo_FlexChart", "MyChart");//参数一：图形分析配置文件路径，参数二：图形分析名称，参数三：自定义默认属性
/*options= {
DataSource: "" --自定义数据源
, ChartType: "" --图类型
, Id: "" --图id
, Legend: "" --图例 用","隔开
, Color: "" --图形项颜色 用","隔开
, DashboardValues: "" --仪表盘显示的值集合， 用","隔开
, IsShowDataLable: "" --是否显示数据图标
}*/
window.chart.addInput("categoryField","2012-01-01");//添加参数到url，此方法必须在renderFlexChart之前调用方有效
lableInfo={id:"lable","txt":"自定义标签","x":100,"y":100};
window.chart.addLable(lableInfo);//添加自定义标签到图形上
window.chart.renderFlexChart("chartDiv");//将图形渲染到div，参数是该div的id
})
function selChanged(obj)
{
var chartType=obj.value;
if(chartType=="Dashboard")
{
var DashboardValues="11,25,39,55";
var DashboardColor="#EA7500,#84C1FF,#82D900,#EA0000";
var sql="select '33'";
var Legend="初级,中级,高级";
var options={ChartType:chartType,DashboardColor:DashboardColor,DashboardValues:DashboardValues,DataSource:sql,Legend:Legend};
window.chart.chartOverload(options,true); //重载图形分析，参数一：自定义属性，参数二：是否重载数据源
}
else if(chartType=="PieChart")
{
var sql="select '62' b,'63' c,'74' d,'55' e,'96' f";
var options={ChartType:chartType,DataSource:sql,Legend:""};
window.chart.chartOverload(options,true);
}
else if(chartType=="BubbleChart")
{
var sql="select '1' a,'62' b,'13' c";
sql+=" union ";
sql+=" select '2' a,'83' b,'22' c";
sql+=" union ";
sql+=" select '3' a,'74' b,'8' c";
sql+=" union ";
sql+=" select '4' a,'35' b,'17' c";
sql+=" union";
sql+=" select '5' a,'82' b,'25' c";
sql+=" union ";
sql+=" select '6' a,'35' b,'15' c";
sql+=" union ";
sql+=" select '7' a,'34' b,'29' c";
sql+=" union ";
sql+=" select '8' a,'13' b,'33' c";
var options={ChartType:chartType,DataSource:sql,Legend:""};
window.chart.chartOverload(options,true);
}
else
{
var options={ChartType:chartType,DataSource:"",Legend:""};
window.chart.chartOverload(options,true);
}
}
]]>
</Script>
</Scripts>
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
四：直接调用页面
<Childs AutoSize="true" >
<Child Entity="ExpNews" Title="图形分析" FKField="ExpNewsId" Height="300" UniqueNo="0">
<PageURL><![CDATA[Resources/Flex/Chart/FlexChart.aspx?chart=MyChart]]></PageURL>
</Child>
</Childs>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11