Skip to content

Commit 4cf044f

Browse files
up JC.FChart
1 parent 822c74f commit 4cf044f

File tree

6 files changed

+389
-0
lines changed

6 files changed

+389
-0
lines changed
Lines changed: 384 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,384 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset=utf-8 />
5+
<title>Open JQuery Components Library - suches</title>
6+
<style>
7+
body{
8+
margin: 20px 40px;
9+
}
10+
11+
.defDl > dd{
12+
border-bottom:1px solid #e2e3ea;
13+
}
14+
15+
</style>
16+
<script src="../../../../../lib.js"></script>
17+
<script src="../../../../../config.js"></script>
18+
<script>
19+
JC.debug = true;
20+
21+
requirejs( [ 'JC.FChart' ], function(){
22+
});
23+
</script>
24+
</head>
25+
<body>
26+
<h2>JC.FChart - bar chart 示例</h2>
27+
28+
<div class="js_jchartTest"></div>
29+
30+
<dl class="defDl">
31+
<dt></dt>
32+
<dd>
33+
<div class="js_compFChart"
34+
chartScriptData="/script"
35+
chartHeight="350"
36+
chartWidth="800"
37+
>
38+
<script type="text/template">
39+
{
40+
"chart": {
41+
"type": "bar"
42+
},
43+
"title": {
44+
"text": "日趋势"
45+
},
46+
"xAxis": {
47+
"categories": [
48+
"2014-11-17",
49+
"2014-11-18",
50+
"2014-11-19",
51+
"2014-11-20",
52+
"2014-11-21",
53+
"2014-11-22",
54+
"2014-11-23",
55+
"2014-11-24",
56+
"2014-11-25",
57+
"2014-11-26",
58+
"2014-11-27",
59+
"2014-11-28",
60+
"2014-11-29",
61+
"2014-11-30",
62+
"2014-12-01",
63+
"2014-12-02",
64+
"2014-12-03",
65+
"2014-12-04",
66+
"2014-12-05",
67+
"2014-12-06",
68+
"2014-12-07",
69+
"2014-12-08",
70+
"2014-12-09",
71+
"2014-12-10",
72+
"2014-12-11",
73+
"2014-12-12",
74+
"2014-12-13",
75+
"2014-12-14",
76+
"2014-12-15",
77+
"2014-12-16"
78+
]
79+
, "rotation": {
80+
"enabled": true
81+
}
82+
},
83+
"yAxis": {
84+
"autoRate": {
85+
"enabled": true
86+
, "deep": 1
87+
, "rateUp": 2
88+
, "maxOffset": .1 /*最大值向上偏移 百分之多少*/
89+
, "minOffset": .1 /*最小值向下偏移 百分之多少*/
90+
}
91+
},
92+
"animation": {
93+
"enabled": true
94+
},
95+
"series": [
96+
{
97+
"name": "北汽",
98+
"data": [
99+
0,
100+
0,
101+
0,
102+
0,
103+
84018,
104+
81892,
105+
82004,
106+
87625,
107+
85015,
108+
120000,
109+
86120,
110+
74182,
111+
71184,
112+
72038,
113+
72711,
114+
74956,
115+
81987,
116+
75229,
117+
86195,
118+
76900,
119+
78624,
120+
84466,
121+
84498,
122+
83873,
123+
83656,
124+
85722,
125+
77151,
126+
79772,
127+
107068,
128+
90566
129+
],
130+
"style": {
131+
"stroke": "#ff7100"
132+
},
133+
"pointStyle": {}
134+
},
135+
{
136+
"name": "MG名爵",
137+
"data": [
138+
84039,
139+
82828,
140+
81567,
141+
85531,
142+
83544,
143+
75332,
144+
74107,
145+
82759,
146+
83733,
147+
79110,
148+
80264,
149+
68606,
150+
61461,
151+
61599,
152+
70562,
153+
75320,
154+
0,
155+
0,
156+
0,
157+
0,
158+
73675,
159+
83763,
160+
81138,
161+
79073,
162+
79821,
163+
76209,
164+
69474,
165+
70292,
166+
82381,
167+
79333
168+
],
169+
"style": {
170+
"stroke": "#ff7100"
171+
},
172+
"pointStyle": {}
173+
}
174+
],
175+
"legend": {
176+
"enabled": true
177+
},
178+
"plotOptions": {
179+
"area": {
180+
"fillColor": {}
181+
}
182+
},
183+
"colors": [
184+
"0xbb9b3e",
185+
"0x4673c0"
186+
],
187+
"lineBreak":{
188+
"enabled": true
189+
},
190+
"callback": {
191+
"initedCallback": "initedCallback"
192+
}
193+
, abbrNumber: {
194+
"enabled": true
195+
}
196+
}
197+
</script>
198+
</div>
199+
</dd>
200+
</dl>
201+
202+
<dl class="defDl">
203+
<dt></dt>
204+
<dd>
205+
<div class="js_compFChart"
206+
chartScriptData="/script"
207+
chartHeight="350"
208+
chartWidth="800"
209+
>
210+
<script type="text/template">
211+
{
212+
"chart": {
213+
"type": "bar"
214+
},
215+
"title": {
216+
"text": "日趋势"
217+
},
218+
"xAxis": {
219+
"categories": [
220+
"2014-11-17",
221+
"2014-11-18",
222+
"2014-11-19",
223+
"2014-11-20",
224+
"2014-11-21",
225+
"2014-11-22",
226+
"2014-11-23",
227+
"2014-11-24",
228+
"2014-11-25",
229+
"2014-11-26",
230+
"2014-11-27",
231+
"2014-11-28",
232+
"2014-11-29",
233+
"2014-11-30",
234+
"2014-12-01",
235+
"2014-12-02",
236+
"2014-12-03",
237+
"2014-12-04",
238+
"2014-12-05",
239+
"2014-12-06",
240+
"2014-12-07",
241+
"2014-12-08",
242+
"2014-12-09",
243+
"2014-12-10",
244+
"2014-12-11",
245+
"2014-12-12",
246+
"2014-12-13",
247+
"2014-12-14",
248+
"2014-12-15",
249+
"2014-12-16"
250+
]
251+
, "rotation": {
252+
"enabled": true
253+
}
254+
},
255+
"yAxis": {
256+
"autoRate": {
257+
"enabled": true
258+
, "deep": 1
259+
, "rateUp": 2
260+
, "maxOffset": .1 /*最大值向上偏移 百分之多少*/
261+
, "minOffset": .1 /*最小值向下偏移 百分之多少*/
262+
}
263+
, abbrNumber: {
264+
"enabled": true
265+
, "9": 0
266+
, "5": 0
267+
}
268+
269+
},
270+
"animation": {
271+
"enabled": true
272+
},
273+
"series": [
274+
{
275+
"name": "北汽",
276+
"data": [
277+
0,
278+
0,
279+
0,
280+
0,
281+
84018,
282+
81892,
283+
82004,
284+
87625,
285+
85015,
286+
120000,
287+
86120,
288+
74182,
289+
71184,
290+
72038,
291+
72711,
292+
74956,
293+
81987,
294+
75229,
295+
86195,
296+
76900,
297+
78624,
298+
84466,
299+
84498,
300+
83873,
301+
83656,
302+
85722,
303+
77151,
304+
79772,
305+
107068,
306+
90566
307+
],
308+
"style": {
309+
"stroke": "#ff7100"
310+
},
311+
"pointStyle": {}
312+
},
313+
{
314+
"name": "MG名爵",
315+
"data": [
316+
84039,
317+
82828,
318+
81567,
319+
85531,
320+
83544,
321+
75332,
322+
74107,
323+
82759,
324+
83733,
325+
79110,
326+
80264,
327+
68606,
328+
61461,
329+
61599,
330+
70562,
331+
75320,
332+
0,
333+
0,
334+
0,
335+
0,
336+
73675,
337+
83763,
338+
81138,
339+
79073,
340+
79821,
341+
76209,
342+
69474,
343+
70292,
344+
82381,
345+
79333
346+
],
347+
"style": {
348+
"stroke": "#ff7100"
349+
},
350+
"pointStyle": {}
351+
}
352+
],
353+
"legend": {
354+
"enabled": true
355+
},
356+
"plotOptions": {
357+
"area": {
358+
"fillColor": {}
359+
}
360+
},
361+
"colors": [
362+
"0xbb9b3e",
363+
"0x4673c0"
364+
],
365+
"lineBreak":{
366+
"enabled": true
367+
},
368+
"callback": {
369+
"initedCallback": "initedCallback"
370+
}
371+
, abbrNumber: {
372+
"enabled": true
373+
, "precision": 4
374+
}
375+
}
376+
</script>
377+
</div>
378+
</dd>
379+
</dl>
380+
381+
</body>
382+
</html>
383+
384+

0 commit comments

Comments
 (0)