Add combo chart demo

pull/12/head
cagataycivici 2019-01-01 22:01:01 +03:00
parent 2f811833a9
commit 0b674c25e7
3 changed files with 87 additions and 0 deletions

View File

@ -109,6 +109,7 @@
<div> <div>
<router-link to="/chart">&#9679; ChartModel</router-link> <router-link to="/chart">&#9679; ChartModel</router-link>
<router-link to="/chart/pie">&#9679; Pie</router-link> <router-link to="/chart/pie">&#9679; Pie</router-link>
<router-link to="/chart/combo">&#9679; Combo</router-link>
</div> </div>
</div> </div>

View File

@ -31,6 +31,11 @@ export default new Router({
name: 'chart', name: 'chart',
component: () => import('./views/chart/ChartDemo.vue') component: () => import('./views/chart/ChartDemo.vue')
}, },
{
path: '/chart/combo',
name: 'combochart',
component: () => import('./views/chart/ComboChartDemo.vue')
},
{ {
path: '/chart/pie', path: '/chart/pie',
name: 'piechart', name: 'piechart',

View File

@ -0,0 +1,81 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>ComboChart</h1>
<p>Different chart types can be combined in the same graph.</p>
</div>
</div>
<div class="content-section implementation">
<Chart type="bar" :data="chartModel" :options="chartOptions"/>
</div>
</div>
</template>
<script>
export default {
data() {
return {
chartModel: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
type: 'line',
label: 'Dataset 1',
borderColor: '#AA5493',
borderWidth: 2,
fill: false,
data: [
50,
25,
12,
48,
56,
76,
42
]
}, {
type: 'bar',
label: 'Dataset 2',
backgroundColor: '#2f4860',
data: [
21,
84,
24,
75,
37,
65,
34
],
borderColor: 'white',
borderWidth: 2
}, {
type: 'bar',
label: 'Dataset 3',
backgroundColor: '#00bb7e',
data: [
41,
52,
24,
74,
23,
21,
32
]
}]
},
chartOptions: {
responsive: true,
title: {
display: true,
text: 'Combo Bar Line Chart'
},
tooltips: {
mode: 'index',
intersect: true
}
}
}
}
}
</script>