Chart doc added
Merve Özçifçi
parent
4162751f4f
commit
3cc5b49af0
|
|
@ -20,10 +20,14 @@
|
|||
<h3>Stacked</h3>
|
||||
<Chart type="bar" :data="stackedData" :options="stackedOptions"/>
|
||||
</div>
|
||||
|
||||
<BarChartDoc/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BarChartDoc from './BarChartDoc';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -155,6 +159,9 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'BarChartDoc': BarChartDoc
|
||||
}
|
||||
}
|
||||
</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 class="content-section implementation">
|
||||
|
||||
</div>
|
||||
<ChartDoc/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ChartDoc from './ChartDoc';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -36,6 +36,9 @@ export default {
|
|||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'ChartDoc': ChartDoc
|
||||
}
|
||||
}
|
||||
</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">
|
||||
<Chart type="bar" :data="chartData" :options="chartOptions"/>
|
||||
</div>
|
||||
|
||||
<ComboChartDoc/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ComboChartDoc from './ComboChartDoc';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -76,6 +80,9 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'ComboChartDoc': ComboChartDoc
|
||||
}
|
||||
}
|
||||
</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">
|
||||
<Chart type="doughnut" :data="chartData" />
|
||||
</div>
|
||||
|
||||
<DoughnutChartDoc/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DoughnutChartDoc from './DoughnutChartDoc';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -36,6 +40,9 @@ export default {
|
|||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'DoughnutChartDoc': DoughnutChartDoc
|
||||
}
|
||||
}
|
||||
</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>
|
||||
<Chart type="line" :data="lineStylesData" />
|
||||
</div>
|
||||
|
||||
<LineChartDoc/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LineChartDoc from './LineChartDoc';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -108,6 +112,9 @@ export default {
|
|||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'LineChartDoc': LineChartDoc
|
||||
}
|
||||
}
|
||||
</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">
|
||||
<Chart type="pie" :data="chartData" />
|
||||
</div>
|
||||
|
||||
<PieChartDoc/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PieChartDoc from './PieChartDoc';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -36,6 +40,9 @@ export default {
|
|||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'PieChartDoc': PieChartDoc
|
||||
}
|
||||
}
|
||||
</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">
|
||||
<Chart type="polarArea" :data="chartData" />
|
||||
</div>
|
||||
|
||||
<PolarAreaChartDoc/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PolarAreaChartDoc from './PolarAreaChartDoc';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -44,6 +48,9 @@ export default {
|
|||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'PolarAreaChartDoc': PolarAreaChartDoc
|
||||
}
|
||||
}
|
||||
</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">
|
||||
<Chart type="radar" :data="chartData" />
|
||||
</div>
|
||||
|
||||
<RadarChartDoc/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RadarChartDoc from './RadarChartDoc';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -43,6 +47,9 @@ export default {
|
|||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'RadarChartDoc': RadarChartDoc
|
||||
}
|
||||
}
|
||||
</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