Skip to content

Commit b5f0a9a

Browse files
rousanrousan
committed
Updated
1 parent efe6c93 commit b5f0a9a

File tree

1 file changed

+51
-55
lines changed

1 file changed

+51
-55
lines changed

‎README.md‎

Lines changed: 51 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
# Vue-FusionCharts
22

3-
> FusionCharts component for Vue
4-
5-
The Vue-FusionCharts component lets you easily include FusionCharts in your Vue.js projects.
3+
Simple and Lightweight `VueJS` component for FusionCharts JavaScript Charting Library. The Vue-FusionCharts component lets you easily include FusionCharts in your VueJS projects.
64

75
## Installation
86

@@ -18,17 +16,17 @@ npm install vue-fusioncharts --save
1816
yarn add vue-fusioncharts
1917
```
2018

21-
### manual
19+
### VanillaJS
2220

23-
Download [`vue-fusioncharts.js`](https://github.com/fusioncharts/vue-fusioncharts/blob/feature/plugin-development/dist/vue-fusioncharts.js) and include it in the HTML `<script>` tag.
21+
Download [`vue-fusioncharts.js`](https://rawgit.com/fusioncharts/vue-fusioncharts/master/dist/vue-fusioncharts.js) and include it in the HTML `<script>` tag.
2422

2523
```html
26-
<script src='path/to/vue-fusioncharts/dist/vue-fusioncharts.js' type='text/javascript'></script>
24+
<script src='vue-fusioncharts.js' type='text/javascript'></script>
2725
```
2826

29-
## Usage
27+
## Getting Started
3028

31-
### ES6 Modules (Recommended)
29+
### ES6 Modules
3230

3331
```js
3432
import Vue from 'vue';
@@ -39,7 +37,7 @@ import FusionCharts from 'fusioncharts'
3937
import Charts from 'fusioncharts/fusioncharts.charts'
4038

4139
// resolve charts dependency
42-
Chart(FusionCharts);
40+
Charts(FusionCharts);
4341

4442
// register VueFusionCharts component
4543
Vue.use(VueFusionCharts, FusionCharts);
@@ -48,13 +46,12 @@ Vue.use(VueFusionCharts, FusionCharts);
4846
### CommonJS Modules
4947

5048
```js
51-
var Vue = require('vue');
52-
53-
var VueFusionCharts = require('vue-fusioncharts');
49+
const Vue = require('vue');
50+
const VueFusionCharts = require('vue-fusioncharts');
5451

5552
// import FusionCharts modules and resolve dependency
56-
var FusionCharts = require('fusioncharts');
57-
var Charts = require('fusioncharts/fusioncharts.charts');
53+
const FusionCharts = require('fusioncharts');
54+
const Charts = require('fusioncharts/fusioncharts.charts');
5855

5956
// resolve charts dependency
6057
Charts(FusionCharts);
@@ -63,7 +60,6 @@ Charts(FusionCharts);
6360
Vue.use(VueFusionCharts, FusionCharts);
6461
```
6562

66-
6763
### AMD
6864

6965
```js
@@ -83,9 +79,9 @@ require(['vue', 'vue-fusioncharts', 'fusioncharts', 'charts'], function (Vue, Vu
8379
});
8480
```
8581

86-
### Standalone / CDN
87-
If you are not using any bundler, you can refer the file in a script tag. The library will be available in a global object named `VueFusionCharts`.
82+
### VanillaJS
8883

84+
If you are not using any bundler, you can refer the file in a script tag. The library will be available in a global object named `VueFusionCharts`.
8985

9086
```html
9187
<head>
@@ -96,52 +92,45 @@ If you are not using any bundler, you can refer the file in a script tag. The li
9692
</head>
9793

9894
<body>
99-
<div id='chart'>
100-
<fusioncharts :options="pieChartConfig"></fusioncharts>
101-
<p class="message-box">The value that you have selected is: {{displayValue}} </p>
95+
<div id="app">
96+
<fusioncharts
97+
:type="type"
98+
:width="width"
99+
:height="height"
100+
:dataFormat="dataFormat"
101+
:dataSource="dataSource"
102+
:events="events">
103+
</fusioncharts>
104+
<p>Display Value: {{displayValue}}</p>
102105
</div>
103106

104-
<style>
105-
.message-box {
106-
text-align: center;
107-
margin-top: 0px;
108-
background-color: #F5FBFF;
109-
width: 500px;
110-
color: #006BB8;
111-
padding: 5px 10px;
112-
box-sizing: border-box;
113-
border: 1px solid #B8E1FF;
114-
}
115-
</style>
116-
117107
<script>
118108
// Use VueFusionCharts component by calling the Vue.use() global method:
119109
Vue.use(VueFusionCharts);
120110
111+
const myDataSource = {
112+
chart: {
113+
caption: 'Vue FusionCharts Sample',
114+
theme: 'fint'
115+
}
116+
data: [{value: 1.9}, {value: 2.3}, {value: 2.1}]
117+
}
121118
// bootstrap the demo
122-
var chart = new Vue({
119+
var app = new Vue({
123120
el: '#chart',
124121
data: {
125-
pieChartConfig: {
126122
type: 'Pie2D',
127123
width: '500',
128124
height: '300',
129125
dataFormat: 'json',
130-
dataSource: {
131-
chart: {
132-
caption: 'Vue FusionCharts Sample',
133-
theme: 'fint'
134-
},
135-
data: [{value: 1.9}, {value: 2.3}, {value: 2.1}]
136-
},
137-
displayValue: 'nothing',
126+
dataSource: myDataSource,
127+
displayValue: '',
138128
events: {
139129
dataplotRollover: function (ev, props) {
140-
chart.displayValue = props.displayValue
130+
app.displayValue = props.displayValue
141131
}
142132
}
143-
},
144-
displayValue: 'nothing'
133+
}
145134
}
146135
});
147136
</script>
@@ -150,20 +139,27 @@ If you are not using any bundler, you can refer the file in a script tag. The li
150139
Click [here](https://jsfiddle.net/rohitcoolblog/5Lt720a9/) to view the live example.
151140

152141
## Register `vue-fusioncharts` component
153-
### Use the `Vue.use` global method to register the component globally
142+
143+
### Register Globally
144+
145+
Use the `Vue.use` global method to register the component globally
146+
154147
```js
155148
Vue.use(VueFusionCharts, FusionCharts, Charts);
156149
```
157-
### Use the `Vue.component` method to register the component locally
150+
151+
### Register Locally
152+
153+
Use the `Vue.component` method to register the component locally
154+
158155
```js
159156
// es6 style
160-
import {FCComponent} from 'vue-fusioncharts'
157+
import { FCComponent } from 'vue-fusioncharts'
161158

162159
// CommpnJS
163-
var FCComponent = require('vue-fusioncharts').FCComponent;
160+
const FCComponent = require('vue-fusioncharts').FCComponent;
164161

165162
Vue.component('fusioncharts', FCComponent);
166-
167163
```
168164

169165
### props
@@ -221,11 +217,12 @@ Vue.component('fusioncharts', FCComponent);
221217
</tbody>
222218
</table>
223219

220+
## [`Demos and Documentation`](https://fusioncharts.github.io/vue-fusioncharts/)
224221

222+
## Contributing
225223

226-
## Development
227224
* Clone the repository.
228-
* Install dependency.
225+
* Install dependencies
229226
* Run `npm start` to start the dev server.
230227
* Open `http://localhost:8080/` in your browser.
231228

@@ -234,5 +231,4 @@ $ git clone https://github.com/fusioncharts/vue-fusioncharts.git
234231
$ cd vue-fusioncharts
235232
$ npm install
236233
$ npm start
237-
```
238-
234+
```

0 commit comments

Comments
 (0)