Chart doc added
Merve Özçifçi
parent
4162751f4f
commit
3cc5b49af0
|
|
@ -20,10 +20,14 @@
|
||||||
<h3>Stacked</h3>
|
<h3>Stacked</h3>
|
||||||
<Chart type="bar" :data="stackedData" :options="stackedOptions"/>
|
<Chart type="bar" :data="stackedData" :options="stackedOptions"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<BarChartDoc/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import BarChartDoc from './BarChartDoc';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -155,6 +159,9 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
'BarChartDoc': BarChartDoc
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,181 @@
|
||||||
|
<template>
|
||||||
|
<div class="content-section documentation">
|
||||||
|
<TabView>
|
||||||
|
<TabPanel header="Source">
|
||||||
|
<CodeHighlight>
|
||||||
|
<template v-pre>
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="content-section introduction">
|
||||||
|
<div class="feature-intro">
|
||||||
|
<h1>BarChart</h1>
|
||||||
|
<p>A bar chart or bar graph is a chart that presents grouped data with rectangular bars with lengths proportional to the values that they represent.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-section implementation">
|
||||||
|
<h3 class="vertical">Vertical</h3>
|
||||||
|
<Chart type="bar" :data="basicData" />
|
||||||
|
|
||||||
|
<h3>Horizontal</h3>
|
||||||
|
<Chart type="horizontalBar" :data="basicData" />
|
||||||
|
|
||||||
|
<h3>Multi Axis</h3>
|
||||||
|
<Chart type="bar" :data="multiAxisData" :options="multiAxisOptions"/>
|
||||||
|
|
||||||
|
<h3>Stacked</h3>
|
||||||
|
<Chart type="bar" :data="stackedData" :options="stackedOptions"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<CodeHighlight lang="javascript">
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
basicData: {
|
||||||
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'My First dataset',
|
||||||
|
backgroundColor: '#42A5F5',
|
||||||
|
data: [65, 59, 80, 81, 56, 55, 40]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'My Second dataset',
|
||||||
|
backgroundColor: '#9CCC65',
|
||||||
|
data: [28, 48, 40, 19, 86, 27, 90]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
multiAxisData: {
|
||||||
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'Dataset 1',
|
||||||
|
backgroundColor: [
|
||||||
|
'#EC407A',
|
||||||
|
'#AB47BC',
|
||||||
|
'#42A5F5',
|
||||||
|
'#7E57C2',
|
||||||
|
'#66BB6A',
|
||||||
|
'#FFCA28',
|
||||||
|
'#26A69A'
|
||||||
|
],
|
||||||
|
yAxisID: 'y-axis-1',
|
||||||
|
data: [65, 59, 80, 81, 56, 55, 10]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Dataset 2',
|
||||||
|
backgroundColor: '#78909C',
|
||||||
|
yAxisID: 'y-axis-2',
|
||||||
|
data: [28, 48, 40, 19, 86, 27, 90]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
multiAxisOptions: {
|
||||||
|
responsive: true,
|
||||||
|
tooltips: {
|
||||||
|
mode: 'index',
|
||||||
|
intersect: true
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
yAxes: [
|
||||||
|
{
|
||||||
|
type: 'linear',
|
||||||
|
display: true,
|
||||||
|
position: 'left',
|
||||||
|
id: 'y-axis-1',
|
||||||
|
ticks: {
|
||||||
|
min: 0,
|
||||||
|
max: 100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'linear',
|
||||||
|
display: true,
|
||||||
|
position: 'right',
|
||||||
|
id: 'y-axis-2',
|
||||||
|
gridLines: {
|
||||||
|
drawOnChartArea: false
|
||||||
|
},
|
||||||
|
ticks: {
|
||||||
|
min: 0,
|
||||||
|
max: 100
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
stackedData: {
|
||||||
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
label: 'Dataset 1',
|
||||||
|
backgroundColor: '#66BB6A',
|
||||||
|
data: [
|
||||||
|
50,
|
||||||
|
25,
|
||||||
|
12,
|
||||||
|
48,
|
||||||
|
90,
|
||||||
|
76,
|
||||||
|
42
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
label: 'Dataset 2',
|
||||||
|
backgroundColor: '#FFCA28',
|
||||||
|
data: [
|
||||||
|
21,
|
||||||
|
84,
|
||||||
|
24,
|
||||||
|
75,
|
||||||
|
37,
|
||||||
|
65,
|
||||||
|
34
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
label: 'Dataset 3',
|
||||||
|
backgroundColor: '#42A5F5',
|
||||||
|
data: [
|
||||||
|
41,
|
||||||
|
52,
|
||||||
|
24,
|
||||||
|
74,
|
||||||
|
23,
|
||||||
|
21,
|
||||||
|
32
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
stackedOptions: {
|
||||||
|
tooltips: {
|
||||||
|
mode: 'index',
|
||||||
|
intersect: false
|
||||||
|
},
|
||||||
|
responsive: true,
|
||||||
|
scales: {
|
||||||
|
xAxes: [{
|
||||||
|
stacked: true,
|
||||||
|
}],
|
||||||
|
yAxes: [{
|
||||||
|
stacked: true
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</CodeHighlight>
|
||||||
|
</TabPanel>
|
||||||
|
</TabView>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -7,13 +7,13 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<ChartDoc/>
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import ChartDoc from './ChartDoc';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -36,6 +36,9 @@ export default {
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
'ChartDoc': ChartDoc
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,138 @@
|
||||||
|
<template>
|
||||||
|
<div class="content-section documentation">
|
||||||
|
<h3>Import</h3>
|
||||||
|
<CodeHighlight lang="javascript">
|
||||||
|
import Chart from 'primevue/chart';
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<h3>Chart Types</h3>
|
||||||
|
<p>Chart type is defined using the <i>type</i> property. Currently there are 6 options available; "pie", "doughtnut", "line", "bar", "radar" and "polarArea".</p>
|
||||||
|
|
||||||
|
<h3>Data</h3>
|
||||||
|
<p>Data of a chart is provided using a binding to the <i>data</i> property, each type has its own format of data. Here is an example of a line chart.</p>
|
||||||
|
<CodeHighlight>
|
||||||
|
<Chart type="bar" :data="basicData" />
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<CodeHighlight lang="js">
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
basicData: {
|
||||||
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'My First dataset',
|
||||||
|
backgroundColor: '#42A5F5',
|
||||||
|
data: [65, 59, 80, 81, 56, 55, 40]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'My Second dataset',
|
||||||
|
backgroundColor: '#9CCC65',
|
||||||
|
data: [28, 48, 40, 19, 86, 27, 90]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<h3>Options</h3>
|
||||||
|
<p>While a series can be customized per dataset, general chart options are defined with options property.
|
||||||
|
Example below adds a title and customizes the legend position of the chart. For all available options refer to the charts.js documentation.</p>
|
||||||
|
<CodeHighlight>
|
||||||
|
<Chart type="line" :data="data" :options="options" />
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<CodeHighlight lang="js">
|
||||||
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
hoverMode: 'index',
|
||||||
|
stacked: false,
|
||||||
|
scales: {
|
||||||
|
yAxes: [{
|
||||||
|
type: 'linear',
|
||||||
|
display: true,
|
||||||
|
position: 'left',
|
||||||
|
id: 'y-axis-1',
|
||||||
|
}, {
|
||||||
|
type: 'linear',
|
||||||
|
display: true,
|
||||||
|
position: 'right',
|
||||||
|
id: 'y-axis-2',
|
||||||
|
gridLines: {
|
||||||
|
drawOnChartArea: false
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<h3>Properties</h3>
|
||||||
|
<div class="doc-tablewrapper">
|
||||||
|
<table class="doc-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Type</th>
|
||||||
|
<th>Default</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>type</td>
|
||||||
|
<td>string</td>
|
||||||
|
<td>null</td>
|
||||||
|
<td>Type of the chart.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>data</td>
|
||||||
|
<td>any</td>
|
||||||
|
<td>null</td>
|
||||||
|
<td>Data to display.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>options</td>
|
||||||
|
<td>any</td>
|
||||||
|
<td>null</td>
|
||||||
|
<td>Options to customize the chart.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>width</td>
|
||||||
|
<td>string</td>
|
||||||
|
<td>null</td>
|
||||||
|
<td>Width of the chart in non-responsive mode.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>height</td>
|
||||||
|
<td>string</td>
|
||||||
|
<td>null</td>
|
||||||
|
<td>Height of the chart in non-responsive mode.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>Methods</h3>
|
||||||
|
<div class="doc-tablewrapper">
|
||||||
|
<table class="doc-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Parameters</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>refresh</td>
|
||||||
|
<td>-</td>
|
||||||
|
<td>Redraws the graph.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -10,10 +10,14 @@
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<Chart type="bar" :data="chartData" :options="chartOptions"/>
|
<Chart type="bar" :data="chartData" :options="chartOptions"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<ComboChartDoc/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import ComboChartDoc from './ComboChartDoc';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -76,6 +80,9 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
'ComboChartDoc': ComboChartDoc
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,95 @@
|
||||||
|
<template>
|
||||||
|
<div class="content-section documentation">
|
||||||
|
<TabView>
|
||||||
|
<TabPanel header="Source">
|
||||||
|
<CodeHighlight>
|
||||||
|
<template v-pre>
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="content-section introduction">
|
||||||
|
<div class="feature-intro">
|
||||||
|
<h1>Combo Chart</h1>
|
||||||
|
<p>Different chart types can be combined in the same graph.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-section implementation">
|
||||||
|
<Chart type="bar" :data="chartData" :options="chartOptions"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<CodeHighlight lang="javascript">
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartData: {
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</CodeHighlight>
|
||||||
|
</TabPanel>
|
||||||
|
</TabView>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -10,10 +10,14 @@
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<Chart type="doughnut" :data="chartData" />
|
<Chart type="doughnut" :data="chartData" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<DoughnutChartDoc/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import DoughnutChartDoc from './DoughnutChartDoc';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -36,6 +40,9 @@ export default {
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
'DoughnutChartDoc': DoughnutChartDoc
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
<template>
|
||||||
|
<div class="content-section documentation">
|
||||||
|
<TabView>
|
||||||
|
<TabPanel header="Source">
|
||||||
|
<CodeHighlight>
|
||||||
|
<template v-pre>
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="content-section introduction">
|
||||||
|
<div class="feature-intro">
|
||||||
|
<h1>DoughnutChart</h1>
|
||||||
|
<p>A doughnut chart is a variant of the pie chart, with a blank center allowing for additional information about the data as a whole to be included.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-section implementation">
|
||||||
|
<Chart type="doughnut" :data="chartData" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<CodeHighlight lang="javascript">
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartData: {
|
||||||
|
labels: ['A','B','C'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
data: [300, 50, 100],
|
||||||
|
backgroundColor: [
|
||||||
|
"#FF6384",
|
||||||
|
"#36A2EB",
|
||||||
|
"#FFCE56"
|
||||||
|
],
|
||||||
|
hoverBackgroundColor: [
|
||||||
|
"#FF6384",
|
||||||
|
"#36A2EB",
|
||||||
|
"#FFCE56"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</CodeHighlight>
|
||||||
|
</TabPanel>
|
||||||
|
</TabView>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -17,10 +17,14 @@
|
||||||
<h3>Line Styles</h3>
|
<h3>Line Styles</h3>
|
||||||
<Chart type="line" :data="lineStylesData" />
|
<Chart type="line" :data="lineStylesData" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<LineChartDoc/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import LineChartDoc from './LineChartDoc';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -108,6 +112,9 @@ export default {
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
'LineChartDoc': LineChartDoc
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,131 @@
|
||||||
|
<template>
|
||||||
|
<div class="content-section documentation">
|
||||||
|
<TabView>
|
||||||
|
<TabPanel header="Source">
|
||||||
|
<CodeHighlight>
|
||||||
|
<template v-pre>
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="content-section introduction">
|
||||||
|
<div class="feature-intro">
|
||||||
|
<h1>Line Chart</h1>
|
||||||
|
<p>A line chart or line graph is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-section implementation">
|
||||||
|
<h3 class="first">Basic</h3>
|
||||||
|
<Chart type="line" :data="basicData" />
|
||||||
|
|
||||||
|
<h3>Multi Axis</h3>
|
||||||
|
<Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
|
||||||
|
|
||||||
|
<h3>Line Styles</h3>
|
||||||
|
<Chart type="line" :data="lineStylesData" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<CodeHighlight lang="javascript">
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
basicData: {
|
||||||
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'First Dataset',
|
||||||
|
data: [65, 59, 80, 81, 56, 55, 40],
|
||||||
|
fill: false,
|
||||||
|
backgroundColor: '#2f4860',
|
||||||
|
borderColor: '#2f4860'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Second Dataset',
|
||||||
|
data: [28, 48, 40, 19, 86, 27, 90],
|
||||||
|
fill: false,
|
||||||
|
backgroundColor: '#00bb7e',
|
||||||
|
borderColor: '#00bb7e'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
multiAxisData: {
|
||||||
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'Dataset 1',
|
||||||
|
fill: false,
|
||||||
|
backgroundColor: '#2f4860',
|
||||||
|
borderColor: '#2f4860',
|
||||||
|
yAxisID: 'y-axis-1',
|
||||||
|
data: [65, 59, 80, 81, 56, 55, 10]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Dataset 2',
|
||||||
|
fill: false,
|
||||||
|
backgroundColor: '#00bb7e',
|
||||||
|
borderColor: '#00bb7e',
|
||||||
|
yAxisID: 'y-axis-2',
|
||||||
|
data: [28, 48, 40, 19, 86, 27, 90]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
multiAxisOptions: {
|
||||||
|
responsive: true,
|
||||||
|
hoverMode: 'index',
|
||||||
|
stacked: false,
|
||||||
|
scales: {
|
||||||
|
yAxes: [
|
||||||
|
{
|
||||||
|
type: 'linear',
|
||||||
|
display: true,
|
||||||
|
position: 'left',
|
||||||
|
id: 'y-axis-1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'linear',
|
||||||
|
display: true,
|
||||||
|
position: 'right',
|
||||||
|
id: 'y-axis-2',
|
||||||
|
gridLines: {
|
||||||
|
drawOnChartArea: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lineStylesData: {
|
||||||
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'First Dataset',
|
||||||
|
data: [65, 59, 80, 81, 56, 55, 40],
|
||||||
|
fill: false,
|
||||||
|
borderColor: '#42A5F5'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Second Dataset',
|
||||||
|
data: [28, 48, 40, 19, 86, 27, 90],
|
||||||
|
fill: false,
|
||||||
|
borderDash: [5, 5],
|
||||||
|
borderColor: '#66BB6A'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Third Dataset',
|
||||||
|
data: [12, 51, 62, 33, 21, 62, 45],
|
||||||
|
fill: true,
|
||||||
|
borderColor: '#FFA726',
|
||||||
|
backgroundColor: '#FFCC80'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</CodeHighlight>
|
||||||
|
</TabPanel>
|
||||||
|
</TabView>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -10,10 +10,14 @@
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<Chart type="pie" :data="chartData" />
|
<Chart type="pie" :data="chartData" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<PieChartDoc/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import PieChartDoc from './PieChartDoc';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -36,6 +40,9 @@ export default {
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
'PieChartDoc': PieChartDoc
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
<template>
|
||||||
|
<div class="content-section documentation">
|
||||||
|
<TabView>
|
||||||
|
<TabPanel header="Source">
|
||||||
|
<CodeHighlight>
|
||||||
|
<template v-pre>
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="content-section introduction">
|
||||||
|
<div class="feature-intro">
|
||||||
|
<h1>Pie Chart</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="chartData" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<CodeHighlight lang="javascript">
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartData: {
|
||||||
|
labels: ['A','B','C'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
data: [300, 50, 100],
|
||||||
|
backgroundColor: [
|
||||||
|
"#FF6384",
|
||||||
|
"#36A2EB",
|
||||||
|
"#FFCE56"
|
||||||
|
],
|
||||||
|
hoverBackgroundColor: [
|
||||||
|
"#FF6384",
|
||||||
|
"#36A2EB",
|
||||||
|
"#FFCE56"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</CodeHighlight>
|
||||||
|
</TabPanel>
|
||||||
|
</TabView>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -10,10 +10,14 @@
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<Chart type="polarArea" :data="chartData" />
|
<Chart type="polarArea" :data="chartData" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<PolarAreaChartDoc/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import PolarAreaChartDoc from './PolarAreaChartDoc';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -44,6 +48,9 @@ export default {
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
'PolarAreaChartDoc': PolarAreaChartDoc
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
<template>
|
||||||
|
<div class="content-section documentation">
|
||||||
|
<TabView>
|
||||||
|
<TabPanel header="Source">
|
||||||
|
<CodeHighlight>
|
||||||
|
<template v-pre>
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="content-section introduction">
|
||||||
|
<div class="feature-intro">
|
||||||
|
<h1>Polar Area Chart</h1>
|
||||||
|
<p>Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-section implementation">
|
||||||
|
<Chart type="polarArea" :data="chartData" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<CodeHighlight lang="javascript">
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartData: {
|
||||||
|
datasets: [{
|
||||||
|
data: [
|
||||||
|
11,
|
||||||
|
16,
|
||||||
|
7,
|
||||||
|
3,
|
||||||
|
14
|
||||||
|
],
|
||||||
|
backgroundColor: [
|
||||||
|
"#FF6384",
|
||||||
|
"#4BC0C0",
|
||||||
|
"#FFCE56",
|
||||||
|
"#E7E9ED",
|
||||||
|
"#36A2EB"
|
||||||
|
],
|
||||||
|
label: 'My dataset'
|
||||||
|
}],
|
||||||
|
labels: [
|
||||||
|
"Red",
|
||||||
|
"Green",
|
||||||
|
"Yellow",
|
||||||
|
"Grey",
|
||||||
|
"Blue"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</CodeHighlight>
|
||||||
|
</TabPanel>
|
||||||
|
</TabView>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -10,10 +10,14 @@
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<Chart type="radar" :data="chartData" />
|
<Chart type="radar" :data="chartData" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<RadarChartDoc/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import RadarChartDoc from './RadarChartDoc';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -43,6 +47,9 @@ export default {
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
'RadarChartDoc': RadarChartDoc
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
<template>
|
||||||
|
<div class="content-section documentation">
|
||||||
|
<TabView>
|
||||||
|
<TabPanel header="Source">
|
||||||
|
<CodeHighlight>
|
||||||
|
<template v-pre>
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="content-section introduction">
|
||||||
|
<div class="feature-intro">
|
||||||
|
<h1>Radar Chart</h1>
|
||||||
|
<p>A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-section implementation">
|
||||||
|
<Chart type="radar" :data="chartData" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<CodeHighlight lang="javascript">
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartData: {
|
||||||
|
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'My First dataset',
|
||||||
|
backgroundColor: 'rgba(179,181,198,0.2)',
|
||||||
|
borderColor: 'rgba(179,181,198,1)',
|
||||||
|
pointBackgroundColor: 'rgba(179,181,198,1)',
|
||||||
|
pointBorderColor: '#fff',
|
||||||
|
pointHoverBackgroundColor: '#fff',
|
||||||
|
pointHoverBorderColor: 'rgba(179,181,198,1)',
|
||||||
|
data: [65, 59, 90, 81, 56, 55, 40]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'My Second dataset',
|
||||||
|
backgroundColor: 'rgba(255,99,132,0.2)',
|
||||||
|
borderColor: 'rgba(255,99,132,1)',
|
||||||
|
pointBackgroundColor: 'rgba(255,99,132,1)',
|
||||||
|
pointBorderColor: '#fff',
|
||||||
|
pointHoverBackgroundColor: '#fff',
|
||||||
|
pointHoverBorderColor: 'rgba(255,99,132,1)',
|
||||||
|
data: [28, 48, 40, 19, 96, 27, 100]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</CodeHighlight>
|
||||||
|
</TabPanel>
|
||||||
|
</TabView>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue