1
1
<!DOCTYPE html>
2
2
< html >
3
- < head >
4
- < title > My first vue app</ title >
5
- < script type ="
text/javascript "
src ="
https://unpkg.com/[email protected] "
> </ script >
6
- < script type ="text/javascript " src ="../node_modules/fusioncharts/fusioncharts.js "> </ script >
7
- < script type ="text/javascript " src ="../node_modules/fusioncharts/fusioncharts.charts.js "> </ script >
8
- < script type ="text/javascript " src ="../node_modules/fusioncharts/themes/fusioncharts.theme.fint.js "> </ script >
9
- < script type ="text/javascript " src ="../dist/vue-fusioncharts.min.js "> </ script >
3
+ < head >
4
+ < title > My first vue app</ title >
5
+ < script type ="
text/javascript "
src ="
https://unpkg.com/[email protected] "
> </ script >
6
+ < script
7
+ type ="text/javascript "
8
+ src ="../node_modules/fusioncharts/fusioncharts.js "
9
+ > </ script >
10
+ < script
11
+ type ="text/javascript "
12
+ src ="../node_modules/fusioncharts/fusioncharts.charts.js "
13
+ > </ script >
14
+ < script
15
+ type ="text/javascript "
16
+ src ="../node_modules/fusioncharts/themes/fusioncharts.theme.fint.js "
17
+ > </ script >
18
+ < script
19
+ type ="text/javascript "
20
+ src ="../dist/vue-fusioncharts.min.js "
21
+ > </ script >
10
22
< style type ="text/css ">
11
- .message-box {
12
- text-align : center;
13
- margin-top : 0px ;
14
- background-color : # F5FBFF ;
15
- width : 500px ;
16
- color : # 006BB8 ;
17
- padding : 5px 10px ;
18
- box-sizing : border-box;
19
- border : 1px solid # B8E1FF ;
20
- }
23
+ .message-box {
24
+ text-align : center;
25
+ margin-top : 0px ;
26
+ background-color : # f5fbff ;
27
+ width : 500px ;
28
+ color : # 006bb8 ;
29
+ padding : 5px 10px ;
30
+ box-sizing : border-box;
31
+ border : 1px solid # b8e1ff ;
32
+ }
21
33
</ style >
22
- </ head >
23
- < body >
24
-
25
- <!-- demo root element -->
34
+ </ head >
35
+ < body >
36
+ <!-- demo root element -->
26
37
< div id ="chart1 ">
27
- < fusioncharts
28
- :type ="type "
29
- :dataformat ="dataFormat "
30
- :datasource ="dataSource "
31
- :width ="width "
32
- :height ="height "
33
- :events ="events "
34
-
35
- ref ="fusioncharts "
36
- >
37
- </ fusioncharts >
38
- < p class ="message-box "> The value that you have selected is: {{displayValue}} </ p >
38
+ < fusioncharts
39
+ :type ="type "
40
+ :dataformat ="dataFormat "
41
+ :datasource ="dataSource "
42
+ :width ="width "
43
+ :height ="height "
44
+ :events ="events "
45
+ ref ="fusioncharts "
46
+ >
47
+ </ fusioncharts >
48
+ < p class ="message-box ">
49
+ The value that you have selected is: {{ displayValue }}
50
+ </ p >
39
51
</ div >
40
52
41
53
< script type ="text/javascript ">
42
- Vue . use ( VueFusionCharts ) ;
54
+ Vue . use ( VueFusionCharts ) ;
43
55
44
- // bootstrap the demo
45
- var chart = new Vue ( {
46
- el : '#chart1' ,
47
- data : {
48
- type : 'Column2D' ,
49
- width : '500' ,
50
- height : '300' ,
51
- dataFormat : 'json' ,
52
- dataSource : {
53
- chart : {
54
- caption : 'Vue FusionCharts Sample' ,
55
- theme : 'fint'
56
- } ,
57
- data : [ { value : 1.9 } , { value : 2.3 } , { value : 2.1 } ]
58
- } ,
59
- displayValue : 'nothing' ,
60
- events : {
61
- dataplotRollover : function ( ev , props ) {
62
- chart . displayValue = props . displayValue
63
- }
64
- }
56
+ // bootstrap the demo
57
+ var chart = new Vue ( {
58
+ el : '#chart1' ,
59
+ data : {
60
+ type : 'Column2D' ,
61
+ width : '500' ,
62
+ height : '300' ,
63
+ dataFormat : 'json' ,
64
+ dataSource : {
65
+ chart : {
66
+ caption : 'Vue FusionCharts Sample' ,
67
+ theme : 'fint'
68
+ } ,
69
+ data : [ { value : 1.9 } , { value : 2.3 } , { value : 2.1 } ]
70
+ } ,
71
+ displayValue : 'nothing' ,
72
+ events : {
73
+ dataplotRollover : function ( ev , props ) {
74
+ chart . displayValue = props . displayValue ;
65
75
}
66
- } ) ;
76
+ }
77
+ }
78
+ } ) ;
67
79
</ script >
68
-
69
- </ body >
70
- </ html >
80
+ </ body >
81
+ </ html >
0 commit comments