Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ac49381

Browse files
SUPPORT-2113 | Vue fusioncharts example structure migration to vue3
1 parent 9a952bd commit ac49381

File tree

2 files changed

+91
-85
lines changed

2 files changed

+91
-85
lines changed

‎example/index.js‎

Lines changed: 88 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
1-
import Vue from 'vue';
2-
importVueFusionChartsfrom'../src';
1+
import {createApp} from 'vue';
2+
33
import VueFCComponent from '../src/vue-fusioncharts-component';
4-
// import VueFCComponent from '../component';
5-
// import VueFusionCharts from '../dist/vue-fusioncharts';
4+
// import VueFCComponent from '../component/index.min.js';
5+
6+
// Using as a plugin
7+
// import FCPlugin from '../dist/vue-fusioncharts';
8+
9+
// Additional configs
610
import FusionCharts from 'fusioncharts';
711
import Charts from 'fusioncharts/fusioncharts.charts';
812
import TimeSeries from 'fusioncharts/fusioncharts.timeseries';
913

14+
// Additional data
1015
const jsonify = res => res.json();
1116
const dataFetch = fetch(
1217
'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/plotting-multiple-series-on-time-axis-data.json'
@@ -15,99 +20,91 @@ const schemaFetch = fetch(
1520
'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/plotting-multiple-series-on-time-axis-schema.json'
1621
).then(jsonify);
1722

18-
// Use VueFusionCharts plugins by calling the Vue.use() global method:
19-
// Vue.use(VueFusionCharts, FusionCharts, Charts);
20-
21-
//Use this to add vue-fusioncharts a component
22-
let vFC = VueFCComponent(FusionCharts, Charts, TimeSeries);
23-
Vue.component('fusioncharts', vFC);
24-
25-
// bootstrap the demo
26-
var chart = new Vue({
27-
el: '#chart1',
28-
components: { fusioncharts: vFC },
29-
data: {
30-
component: true,
31-
show: false,
32-
counter: 0,
33-
chartType: 'Pie2D',
34-
pieDataSource: {
35-
chart: {
36-
caption: 'Vue FusionCharts Sample',
37-
theme: 'fint'
38-
},
39-
data: [{ value: 1.9 }, { value: 2.3 }, { value: 2.1 }]
40-
},
41-
displayValue: 'nothing',
42-
events: {
43-
dataplotRollover: function(ev, props) {
44-
chart.displayValue = props.value;
45-
}
46-
},
47-
width: '600',
48-
height: '400',
49-
type: 'timeseries',
50-
dataFormat: 'json',
51-
dataSource: {
52-
data: null,
53-
caption: {
54-
text: 'Sales Analysis'
55-
},
56-
subcaption: {
57-
text: 'Grocery & Footwear'
58-
},
59-
series: 'Type',
60-
yAxis: [
61-
{
62-
plot: 'Sales Value',
63-
title: 'Sale Value',
64-
format: {
65-
prefix: '$'
66-
}
67-
}
68-
]
69-
},
70-
chartDs: {
71-
chart: {
72-
caption: 'Vue FusionCharts Sample',
73-
theme: 'fint',
74-
animation: '1',
75-
updateanimduration: '100'
76-
},
77-
data: [{ value: 1.9 }, { value: 2.3 }, { value: 2.1 }]
78-
},
79-
options: {
80-
width: '600',
81-
height: '400',
82-
type: 'Pie2D',
83-
dataFormat: 'json',
84-
dataSource: {
23+
const App = {
24+
data() {
25+
return {
26+
component: true,
27+
show: false,
28+
counter: 0,
29+
chartType: 'Pie2D',
30+
pieDataSource: {
8531
chart: {
8632
caption: 'Vue FusionCharts Sample',
8733
theme: 'fint'
8834
},
8935
data: [{ value: 1.9 }, { value: 2.3 }, { value: 2.1 }]
90-
}
91-
},
92-
timeseriesOptions: {
36+
},
37+
displayValue: 'nothing',
38+
events: {
39+
dataplotRollover: function(ev, props) {
40+
this.displayValue = props.value;
41+
}
42+
},
9343
width: '600',
9444
height: '400',
9545
type: 'timeseries',
9646
dataFormat: 'json',
9747
dataSource: {
98-
caption: { text: 'Online Sales of a SuperStore in the US' },
9948
data: null,
49+
caption: {
50+
text: 'Sales Analysis'
51+
},
52+
subcaption: {
53+
text: 'Grocery & Footwear'
54+
},
55+
series: 'Type',
10056
yAxis: [
10157
{
102-
plot: [
103-
{
104-
value: 'Sales ($)'
105-
}
106-
]
58+
plot: 'Sales Value',
59+
title: 'Sale Value',
60+
format: {
61+
prefix: '$'
62+
}
10763
}
10864
]
65+
},
66+
chartDs: {
67+
chart: {
68+
caption: 'Vue FusionCharts Sample',
69+
theme: 'fint',
70+
animation: '1',
71+
updateanimduration: '100'
72+
},
73+
data: [{ value: 1.9 }, { value: 2.3 }, { value: 2.1 }]
74+
},
75+
options: {
76+
width: '600',
77+
height: '400',
78+
type: 'Pie2D',
79+
dataFormat: 'json',
80+
dataSource: {
81+
chart: {
82+
caption: 'Vue FusionCharts Sample',
83+
theme: 'fint'
84+
},
85+
data: [{ value: 1.9 }, { value: 2.3 }, { value: 2.1 }]
86+
}
87+
},
88+
timeseriesOptions: {
89+
width: '600',
90+
height: '400',
91+
type: 'timeseries',
92+
dataFormat: 'json',
93+
dataSource: {
94+
caption: { text: 'Online Sales of a SuperStore in the US' },
95+
data: null,
96+
yAxis: [
97+
{
98+
plot: [
99+
{
100+
value: 'Sales ($)'
101+
}
102+
]
103+
}
104+
]
105+
}
109106
}
110-
}
107+
};
111108
},
112109
methods: {
113110
changeFirstChartAttr: function() {
@@ -144,6 +141,14 @@ var chart = new Vue({
144141
this.dataSource.data = fusionTable;
145142
});
146143
}
147-
});
144+
};
145+
const app = createApp(App);
146+
147+
// Using as a component
148+
let vFC = VueFCComponent(FusionCharts, Charts, TimeSeries);
149+
app.component('fusioncharts', vFC);
150+
151+
// Using as a plugin
152+
// app.use(FCPlugin, FusionCharts, Charts, TimeSeries);
148153

149-
window.chart=chart;
154+
app.mount('#chart1');

‎example/webpack.config.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,12 @@ module.exports = {
1010
devtool: 'source-map',
1111
resolve: {
1212
alias: {
13-
vue: 'vue/dist/vue.js'
13+
'vue': 'vue/dist/vue.esm-bundler.js',
1414
}
1515
},
1616
devServer: {
1717
contentBase: './example'
1818
// open: true
19-
}
19+
},
20+
mode: 'development',
2021
};

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /