Skip to content

Commit dc51bd3

Browse files
committed
Add README.md
1 parent d2a3abb commit dc51bd3

File tree

1 file changed

+85
-0
lines changed

1 file changed

+85
-0
lines changed

README.md

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
# Vue FusionCharts
2+
> FusionCharts component for Vue.js
3+
4+
## Installation
5+
#### yarn
6+
```sh
7+
yarn add vue-fusioncharts
8+
```
9+
#### npm
10+
```sh
11+
npm install vue-fusioncharts --save
12+
```
13+
#### cdn
14+
```html
15+
<div id="chart">
16+
<fusioncharts
17+
:type="type"
18+
:data-source="dataSource"
19+
:width="width"
20+
:height="height"
21+
>
22+
</fusioncharts>
23+
</div>
24+
25+
<script type="text/javascript" src="https://unpkg.com/vue@2.3.3"></script>
26+
<script type="text/javascript" src="https://unpkg.com/fusioncharts/fusioncharts.js"></script>
27+
<script type="text/javascript" src="https://unpkg.com/fusioncharts/fusioncharts.charts.js"></script>
28+
<script src="https://unpkg.com/vue-fusioncharts@1.0.4/dist/vue-fusioncharts.min.js"></script>
29+
30+
<script type="text/javascript">
31+
// Pass the VueFusionCharts to `Vue.use` global function
32+
Vue.use(VueFusionCharts.default);
33+
34+
var chart = new Vue({
35+
el: '#chart',
36+
data: {
37+
type: 'Pie2D',
38+
dataSource: {data: [{value: 1.9}, {value: 2.3}, {value: 2.1}]},
39+
width: '600',
40+
height: '300'
41+
}
42+
});
43+
</script>
44+
45+
```
46+
47+
## Usage
48+
In order to use this plugin, you need to import `vue`, `vue-fusioncharts` and `fusioncharts` in your application and pass the `VueFusionCharts` component to `Vue.use` global method
49+
```js
50+
// Import the required modules
51+
import Vue from 'vue';
52+
import VueFusionCharts from 'vue-fusioncharts';
53+
// import FusionCharts modules
54+
import FusionCharts from 'fusioncharts';
55+
import Charts from 'fusioncharts/fusioncharts.charts';
56+
import Widgets from 'fusioncharts/fusioncharts.widgets';
57+
58+
// Register `vue-fusioncharts` component by calling the Vue.use() global method
59+
// Also pass the FusionCharts object
60+
Vue.use(VueFusionCharts, {
61+
core: FusionCharts,
62+
modules: [Charts, Widgets]
63+
});
64+
```
65+
66+
#### Options
67+
`vue-fusioncharts` allows a few custom options:
68+
```js
69+
Vue.use(VueFusionCharts, FusionCharts, Charts, Widgets)
70+
```
71+
72+
#### Render
73+
Create the `Vue` instance and define all configuration required to render FusionCharts.
74+
```js
75+
let chart = new Vue({
76+
el: '#pie-chart',
77+
data: {
78+
type: 'Pie2D',
79+
dataSource: {data: [{value: 1.9}, {value: 2.3}, {value: 2.1}]},
80+
width: '600',
81+
height: '300'
82+
}
83+
});
84+
```
85+

0 commit comments

Comments
 (0)