A simple and lightweight VueJS component for FusionCharts JavaScript Charting Library. The Vue-FusionCharts wrapper lets you easily include FusionCharts in your VueJS projects.
npm install vue-fusioncharts --saveyarn add vue-fusionchartsDownload vue-fusioncharts.js and include it in the HTML <script> tag.
<script src='vue-fusioncharts.js' type='text/javascript'></script>import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
// import FusionCharts modules and resolve dependency
import FusionCharts from 'fusioncharts'
import Charts from 'fusioncharts/fusioncharts.charts'
// resolve charts dependency
Charts(FusionCharts);
// register VueFusionCharts component
Vue.use(VueFusionCharts, FusionCharts);const Vue = require('vue');
const VueFusionCharts = require('vue-fusioncharts');
// import FusionCharts modules and resolve dependency
const FusionCharts = require('fusioncharts');
const Charts = require('fusioncharts/fusioncharts.charts');
// resolve charts dependency
Charts(FusionCharts);
// register VueFusionCharts component
Vue.use(VueFusionCharts, FusionCharts);require.config({
paths: {
'vue': 'path/to/vue',
'vue-fusioncharts': 'path/to/vue-fusioncharts',
'fusioncharts': 'path/to/fusioncharts'
'charts': 'path/to/fusioncharts/fusioncharts.charts'
}
})
require(['vue', 'vue-fusioncharts', 'fusioncharts', 'charts'], function (Vue, VueFusionCharts, FusionCharts, Charts) {
// register VueFusionCharts component
Vue.use(VueFusionCharts, FusionCharts, Charts);
});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.
<head>
<script type="text/javascript" src="https://unpkg.com/vue@2.3.3"></script>
<script type="text/javascript" src="https://unpkg.com/fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="https://unpkg.com/fusioncharts/fusioncharts.charts.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue-fusioncharts/dist/vue-fusioncharts.min.js"></script>
</head>
<body>
<div id="app">
<fusioncharts
:type="type"
:width="width"
:height="height"
:dataFormat="dataFormat"
:dataSource="dataSource"
:events="events">
</fusioncharts>
<p>Display Value: {{displayValue}}</p>
</div>
<script>
// Use VueFusionCharts component by calling the Vue.use() method:
Vue.use(VueFusionCharts);
const myDataSource = {
chart: {
caption: 'Vue FusionCharts Sample',
theme: 'fint'
}
data: [{value: 1.9}, {value: 2.3}, {value: 2.1}]
}
// bootstrap the demo
var app = new Vue({
el: '#chart',
data: {
type: 'Pie2D',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: myDataSource,
events: {
dataplotRollover: function (ev, props) {
app.displayValue = props.displayValue
}
},
displayValue: ''
}
}
});
</script>
</body>Click here to view the live example.
Use the Vue.use method to register the component globally.
Vue.use(VueFusionCharts, FusionCharts, Charts);Use the Vue.component method to register the component locally.
// es6 style
import { FCComponent } from 'vue-fusioncharts'
// CommpnJS
const FCComponent = require('vue-fusioncharts').FCComponent;
Vue.component('fusioncharts', FCComponent);-
optionsThe commonly used configurations required to initialize FusionCharts are described in the table below. The complete list of supported configurations can be found in the FusionCharts API documentation.
Name Type Default value Description type String none Name of the chart type to be rendered. width String/Number 400Width in pixels (for example, 640) or percent (for example,50%).height String/Number 400Height in pixels (for example, 640) or percent (for example,50%).id String chart-object-*Name of the current chart instance, after the chart has been created. dataFormat String JSONFormat of the source data, passed to the dataSourceattribute. Currently FusionCharts accepts data in theJSONandXMLformats.dataSource String/Object noneSource data/source of the chart data and the chart configuration. Currently FusionCharts accepts data in the JSONandXMLformats.
- Clone the repository.
- Install dependencies
- Run
npm startto start the dev server. - Open
http://localhost:8080/in your browser.
$ git clone https://github.com/fusioncharts/vue-fusioncharts.git
$ cd vue-fusioncharts
$ npm install
$ npm start