Skip to content

Commit 67d2ee6

Browse files
legnderylegndery
committed
README.md: adding legacy template support
1 parent e0a37bd commit 67d2ee6

File tree

1 file changed

+59
-58
lines changed

1 file changed

+59
-58
lines changed

‎README.md‎

Lines changed: 59 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
# Vue-FusionCharts
1+
# 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+
A simple and lightweight `VueJS` component for `FusionCharts` JavaScript Charting Library. The `Vue-FusionCharts` wrapper 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

2321
Download [`vue-fusioncharts.js`](https://github.com/fusioncharts/vue-fusioncharts/blob/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 Module
3230

3331
```js
3432
import Vue from 'vue';
@@ -42,22 +40,20 @@ import Pie2D from 'fusioncharts/viz/pie2d'
4240
Vue.use(VueFusionCharts, FusionCharts, Pie2D);
4341
```
4442

45-
### CommonJS Modules
43+
### CommonJS
4644

4745
```js
48-
var Vue = require('vue');
49-
50-
var VueFusionCharts = require('vue-fusioncharts');
46+
const Vue = require('vue');
47+
const VueFusionCharts = require('vue-fusioncharts');
5148

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

5653
// register VueFusionCharts component
5754
Vue.use(VueFusionCharts, FusionCharts, Charts);
5855
```
5956

60-
6157
### AMD
6258

6359
```js
@@ -77,9 +73,9 @@ require(['vue', 'vue-fusioncharts', 'fusioncharts', 'charts'], function (Vue, Vu
7773
});
7874
```
7975

80-
### Standalone / CDN
81-
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`.
76+
### VanillaJS
8277

78+
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`.
8379

8480
```html
8581
<head>
@@ -90,77 +86,78 @@ If you are not using any bundler, you can refer the file in a script tag. The li
9086
</head>
9187

9288
<body>
93-
<div id='chart'>
94-
<fusioncharts :options="pieChartConfig"></fusioncharts>
95-
<p class="message-box">The value that you have selected is: {{displayValue}} </p>
89+
90+
<div id="app">
91+
<fusioncharts
92+
:type="type"
93+
:width="width"
94+
:height="height"
95+
:dataFormat="dataFormat"
96+
:dataSource="dataSource"
97+
:events="events">
98+
</fusioncharts>
99+
<p>Display Value: {{displayValue}}</p>
96100
</div>
97101

98-
<style>
99-
.message-box {
100-
text-align: center;
101-
margin-top: 0px;
102-
background-color: #F5FBFF;
103-
width: 500px;
104-
color: #006BB8;
105-
padding: 5px 10px;
106-
box-sizing: border-box;
107-
border: 1px solid #B8E1FF;
108-
}
109-
</style>
110-
111102
<script>
112-
// Use VueFusionCharts component by calling the Vue.use() global method:
103+
// Use VueFusionCharts component by calling the Vue.use() method:
113104
Vue.use(VueFusionCharts);
114105
106+
const myDataSource = {
107+
chart: {
108+
caption: 'Vue FusionCharts Sample',
109+
theme: 'fint'
110+
}
111+
data: [{value: 1.9}, {value: 2.3}, {value: 2.1}]
112+
}
115113
// bootstrap the demo
116-
var chart = new Vue({
114+
var app = new Vue({
117115
el: '#chart',
118116
data: {
119-
pieChartConfig: {
120117
type: 'Pie2D',
121118
width: '500',
122119
height: '300',
123120
dataFormat: 'json',
124-
dataSource: {
125-
chart: {
126-
caption: 'Vue FusionCharts Sample',
127-
theme: 'fint'
128-
},
129-
data: [{value: 1.9}, {value: 2.3}, {value: 2.1}]
130-
},
131-
displayValue: 'nothing',
121+
dataSource: myDataSource,
132122
events: {
133123
dataplotRollover: function (ev, props) {
134-
chart.displayValue = props.displayValue
124+
app.displayValue = props.displayValue
135125
}
136-
}
137-
},
138-
displayValue: 'nothing'
126+
},
127+
displayValue: ''
128+
}
139129
}
140130
});
141131
</script>
142132
</body>
143133
```
144134
Click [here](https://jsfiddle.net/rohitcoolblog/5Lt720a9/) to view the live example.
145135

146-
## Register `vue-fusioncharts` component
147-
### Use the `Vue.use` global method to register the component globally
136+
## Register `vue-fusioncharts` Component
137+
138+
### Register Globally
139+
140+
Use the `Vue.use` method to register the component globally.
141+
148142
```js
149143
Vue.use(VueFusionCharts, FusionCharts, Charts);
150144
```
151-
### Use the `Vue.component` method to register the component locally
145+
146+
### Register Locally
147+
148+
Use the `Vue.component` method to register the component locally.
149+
152150
```js
153151
// es6 style
154-
import {FCComponent} from 'vue-fusioncharts'
152+
import { FCComponent } from 'vue-fusioncharts'
155153

156154
// CommpnJS
157-
var FCComponent = require('vue-fusioncharts').FCComponent;
155+
const FCComponent = require('vue-fusioncharts').FCComponent;
158156

159157
Vue.component('fusioncharts', FCComponent);
160-
161158
```
162159

163-
### props
160+
### Component Props
164161

165162
* `options`
166163

@@ -215,11 +212,10 @@ Vue.component('fusioncharts', FCComponent);
215212
</tbody>
216213
</table>
217214

215+
## Contributing
218216

219-
220-
## Development
221217
* Clone the repository.
222-
* Install dependency.
218+
* Install dependencies
223219
* Run `npm start` to start the dev server.
224220
* Open `http://localhost:8080/` in your browser.
225221

@@ -230,3 +226,8 @@ $ npm install
230226
$ npm start
231227
```
232228

229+
### [Demos and Documentation](https://fusioncharts.github.io/vue-fusioncharts/)
230+
231+
> ### Using Legacy Webpack Templates
232+
> If you are using legacy webpack templates using (ex: `vue init webpack-simple myProject`), you need to use the new UglifyJS webpack plugin as the default plugin doesn't support ES5+ syntaxes.
233+
> Refer here on what to change in the webpack.config.js: https://github.com/vuejs-templates/webpack-simple/issues/166#issuecomment-354394253

0 commit comments

Comments
 (0)