Initiated Chart Component
cagataycivici
parent
71aed36d4c
commit
2f811833a9
|
|
@ -1,6 +1,6 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016-2018 PrimeTek
|
||||
Copyright (c) 2016-2019 PrimeTek
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -30,8 +30,9 @@
|
|||
"vue-template-compiler": "^2.5.17",
|
||||
"primeicons": "1.0.0",
|
||||
"primeflex": "1.0.0-rc.1",
|
||||
"quill": "1.3.3",
|
||||
"axios": "^0.15.3",
|
||||
"fullcalendar": "4.0.0-alpha.2"
|
||||
"quill": "1.3.3",
|
||||
"fullcalendar": "4.0.0-alpha.2",
|
||||
"chart.js": "2.7.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -107,7 +107,8 @@
|
|||
</a>
|
||||
<div :class="{'submenuhide': activeMenuIndex !== 7, 'submenushow': activeMenuIndex === 7}">
|
||||
<div>
|
||||
<router-link to="/">● Link</router-link>
|
||||
<router-link to="/chart">● ChartModel</router-link>
|
||||
<router-link to="/chart/pie">● Pie</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,72 @@
|
|||
<template>
|
||||
<div class="p-chart">
|
||||
<canvas ref="canvas" :width="width" :height="height"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ChartJS from 'chart.js/src/chart.js';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
type: String,
|
||||
data: null,
|
||||
options: null,
|
||||
width: Number,
|
||||
height: Number
|
||||
},
|
||||
chart: null,
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) {
|
||||
this.chart.destroy();
|
||||
this.chart = null;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data() {
|
||||
this.reinit();
|
||||
},
|
||||
type() {
|
||||
this.reinit();
|
||||
},
|
||||
options() {
|
||||
this.reinit();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = new ChartJS(this.$refs.canvas, {
|
||||
type: this.type,
|
||||
data: this.data,
|
||||
options: this.options
|
||||
});
|
||||
},
|
||||
getCanvas() {
|
||||
return this.$canvas;
|
||||
},
|
||||
getBase64Image() {
|
||||
return this.chart.toBase64Image();
|
||||
},
|
||||
refresh() {
|
||||
if (this.chart) {
|
||||
this.chart.update();
|
||||
}
|
||||
},
|
||||
reinit() {
|
||||
if (this.chart) {
|
||||
this.chart.destroy();
|
||||
this.initChart();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.p-chart {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,6 +5,7 @@ import Accordion from './components/accordion/Accordion';
|
|||
import AccordionTab from './components/accordion/AccordionTab';
|
||||
import Button from './components/button/Button';
|
||||
import Card from './components/card/Card';
|
||||
import Chart from './components/chart/Chart';
|
||||
import Checkbox from './components/checkbox/Checkbox';
|
||||
import Chips from './components/chips/Chips';
|
||||
import Dropdown from './components/dropdown/Dropdown';
|
||||
|
|
@ -40,6 +41,7 @@ Vue.component('Accordion', Accordion);
|
|||
Vue.component('AccordionTab', AccordionTab);
|
||||
Vue.component('Button', Button);
|
||||
Vue.component('Card', Card);
|
||||
Vue.component('Chart', Chart);
|
||||
Vue.component('Checkbox', Checkbox);
|
||||
Vue.component('Chips', Chips);
|
||||
Vue.component('Dropdown', Dropdown);
|
||||
|
|
|
|||
|
|
@ -26,6 +26,16 @@ export default new Router({
|
|||
name: 'card',
|
||||
component: () => import('./views/card/CardDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/chart',
|
||||
name: 'chart',
|
||||
component: () => import('./views/chart/ChartDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/chart/pie',
|
||||
name: 'piechart',
|
||||
component: () => import('./views/chart/PieChartDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/checkbox',
|
||||
name: 'checkbox',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>ChartModel</h1>
|
||||
<p>Chart components are based on <a href="https://www.chartjs.org/">Charts.js</a>, an open source HTML5 based charting library.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chartModel: {
|
||||
labels: ['A','B','C'],
|
||||
datasets: [
|
||||
{
|
||||
data: [300, 50, 100],
|
||||
backgroundColor: [
|
||||
"#FF6384",
|
||||
"#36A2EB",
|
||||
"#FFCE56"
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
"#FF6384",
|
||||
"#36A2EB",
|
||||
"#FFCE56"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>PieChart</h1>
|
||||
<p>A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Chart type="pie" :data="chartModel" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chartModel: {
|
||||
labels: ['A','B','C'],
|
||||
datasets: [
|
||||
{
|
||||
data: [300, 50, 100],
|
||||
backgroundColor: [
|
||||
"#FF6384",
|
||||
"#36A2EB",
|
||||
"#FFCE56"
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
"#FF6384",
|
||||
"#36A2EB",
|
||||
"#FFCE56"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue