Wrappping External Library
chart.js
npm install -g @vue/cli
vue create chart-js-demo
cd chart-js-demo
npm install chart.js
npm run serve
Tip: If you use npm 5, there’s no need for the --save flag anymore, as all packages are automatically saved now.
1 case
/* App.vue */
<template>
<div id="app">
<canvas id="planet-chart"></canvas>
</div>
</template>
<script>
import Chart from 'chart.js';
import planetChartData from './chart-data.js';
export default {
data() {
return {
planetChartData: planetChartData,
}
},
methods: {
createChart(chartId, chartData) {
const ctx = document.getElementById(chartId);
const myChart = new Chart(ctx, {
type: chartData.type,
data: chartData.data,
options: chartData.options,
});
}
},
mounted() {
this.createChart('planet-chart', this.planetChartData);
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
//chart-data.js
export const planetChartData = {
type: 'bar',
data: {
labels: ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune'],
datasets: [
{ // one line graph
label: 'Number of Moons',
type: 'line', // Add this
data: [0, 0, 1, 2, 67, 62, 27, 14],
backgroundColor: [
'rgba(54,73,93,.5)', // Blue
'rgba(54,73,93,.5)',
'rgba(54,73,93,.5)',
'rgba(54,73,93,.5)',
'rgba(54,73,93,.5)',
'rgba(54,73,93,.5)',
'rgba(54,73,93,.5)',
'rgba(54,73,93,.5)'
],
borderColor: [
'#36495d',
'#36495d',
'#36495d',
'#36495d',
'#36495d',
'#36495d',
'#36495d',
'#36495d',
],
borderWidth: 3
},
{ // another line graph
label: 'Planet Mass (x1,000 km)',
type: 'bar', // Add this
data: [4.8, 12.1, 12.7, 6.7, 139.8, 116.4, 50.7, 49.2],
backgroundColor: [
'rgba(71, 183,132,.5)', // Green
],
borderColor: [
'#47b784',
],
borderWidth: 3
}
]
},
options: {
responsive: true,
lineTension: 1,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
padding: 25,
}
}]
}
}
}
export default planetChartData;
/* App.vue using props */
<template>
<div id="app">
<canvas id="planet-chart" v-bind:passed-data="planetChartData"></canvas>
</div>
</template>
<script>
import Chart from 'chart.js';
import planetChartData from './chart-data.js';
export default {
props:['passedData'],
data() {
return {
planetChartData: planetChartData,
}
},
methods: {
createChart(chartId) {
const ctx = document.getElementById(chartId);
new Chart(ctx, {
type: this.planetChartData.type,
data: this.planetChartData.data,
options: this.planetChartData.options,
});
}
},
mounted() {
this.createChart('planet-chart');
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
2 case
// main.js
import Vue from 'vue'
import App from './App.vue'
import ChartPlugin from './plugins/ChartPlugin.js';
// import Vuex from 'vuex';
Vue.use(ChartPlugin);
// Vue.use(Vuex);
new Vue({
el: '#app',
render: h => h(App)
})
// ChartPlugin.js
import Vue from 'vue'
import App from './App.vue'
import ChartPlugin from './plugins/ChartPlugin.js';
// import Vuex from 'vuex';
Vue.use(ChartPlugin);
// Vue.use(Vuex);
new Vue({
el: '#app',
render: h => h(App)
})
/* App.vue */
<template>
<div>
<bar-chart
v-bind:dataset="dataset"
v-on:refresh="changeDataset"></bar-chart>
<line-chart v-bind:dataset="dataset"></line-chart>
</div>
</template>
<script>
import BarChart from './components/BarChart.vue';
import LineChart from './components/LineChart.vue';
export default {
components: {
BarChart,
LineChart,
},
data() {
return {
dataset: [11,18,15,10,13,7,10],
}
},
methods: {
changeDataset() {
this.dataset = [8,4,10,20,13,7,10];
}
}
}
</script>
<style>
</style>
/* BarChart.vue */
<template>
<canvas ref="barChart" id="myChart" width="400" height="400" v-on:click="onClick"></canvas>
</template>
<script>
export default {
props: ['dataset'],
watch: {
dataset: function() {
this.renderBarChart();
}
},
methods:{
onClick: function() {
this.$emit('refresh');
},
renderBarChart(){
var ctx = this.$refs.barChart;
var myChart = new this.$_Chart(ctx, {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data:this.dataset,
}]
},
options: {}
});
}
},
mounted() {
this.renderBarChart();
}
}
</script>
<style>
</style>
/* LineChart.vue */
<template>
<canvas id="myChart" ref="lineChart"></canvas>
</template>
<script>
export default {
props: ['dataset'],
methods: {
renderChart() {
var ctx = this.$refs.lineChart.getContext('2d');
var chart = new this.$_Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data:this.dataset,
}]
},
options: {}
});
}
},
mounted() {
this.renderChart();
}
}
</script>
<style>
</style>