11<!DOCTYPE html>
22< html >
3- < head >
4- < title > My first vue app</ title >
5- < script type ="text/javascript " src ="https://unpkg.com/vue@2.3.3 "> </ 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/vue@2.3.3 "> </ 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 >
1022 < 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+ }
2133 </ style >
22- </ head >
23- < body >
24-
25- <!-- demo root element -->
34+ </ head >
35+ < body >
36+ <!-- demo root element -->
2637 < 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 >
3951 </ div >
4052
4153 < script type ="text/javascript ">
42- Vue . use ( VueFusionCharts ) ;
54+ Vue . use ( VueFusionCharts ) ;
4355
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 ;
6575 }
66- } ) ;
76+ }
77+ }
78+ } ) ;
6779 </ script >
68-
69- </ body >
70- </ html >
80+ </ body >
81+ </ html >
0 commit comments