Fixed #1348 - Upgrade Chart.js to 3.3.2
Tuğçe Küçükoğlu
parent
c4c91391be
commit
3c8ec4e437
|
|
@ -39,7 +39,7 @@
|
|||
"@vuelidate/validators": "^2.0.0-alpha.12",
|
||||
"axios": "^0.19.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"chart.js": "2.7.3",
|
||||
"chart.js": "3.3.2",
|
||||
"codesandbox": "2.1.14",
|
||||
"core-js": "^3.6.5",
|
||||
"eslint": "^6.7.2",
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
import('chart.js').then((module) => {
|
||||
import('chart.js/auto').then((module) => {
|
||||
if (module && module.default) {
|
||||
this.chart = new module.default(this.$refs.canvas, {
|
||||
type: this.type,
|
||||
|
|
@ -73,8 +73,8 @@ export default {
|
|||
},
|
||||
onCanvasClick(event) {
|
||||
if (this.chart) {
|
||||
const element = this.chart.getElementAtEvent(event);
|
||||
const dataset = this.chart.getDatasetAtEvent(event);
|
||||
const element = this.chart.getElementsAtEventForMode(event, 'nearest', { intersect: true }, false);
|
||||
const dataset = this.chart.getElementsAtEventForMode(event, 'dataset', { intersect: true }, false);
|
||||
|
||||
if (element && element[0] && dataset) {
|
||||
this.$emit('select', {originalEvent: event, element: element[0], dataset: dataset});
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
<div class="card">
|
||||
<h5>Horizontal</h5>
|
||||
<Chart type="horizontalBar" :data="basicData" :options="basicOptions" />
|
||||
<Chart type="bar" :data="basicData" :options="horizontalOptions" />
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
|
|
@ -52,6 +52,9 @@ export default {
|
|||
if (this.isDarkTheme()) {
|
||||
this.applyDarkTheme();
|
||||
}
|
||||
else {
|
||||
this.applyLightTheme();
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
EventBus.off('change-theme', this.themeChangeListener);
|
||||
|
|
@ -86,47 +89,15 @@ export default {
|
|||
'#FFCA28',
|
||||
'#26A69A'
|
||||
],
|
||||
yAxisID: 'y-axis-1',
|
||||
yAxisID: 'y',
|
||||
data: [65, 59, 80, 81, 56, 55, 10]
|
||||
}, {
|
||||
label: 'Dataset 2',
|
||||
backgroundColor: '#78909C',
|
||||
yAxisID: 'y-axis-2',
|
||||
yAxisID: 'y1',
|
||||
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: [{
|
||||
|
|
@ -170,22 +141,10 @@ export default {
|
|||
]
|
||||
}]
|
||||
},
|
||||
stackedOptions: {
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
stacked: true,
|
||||
}],
|
||||
yAxes: [{
|
||||
stacked: true
|
||||
}]
|
||||
}
|
||||
},
|
||||
basicOptions: null
|
||||
basicOptions: null,
|
||||
horizontalOptions: null,
|
||||
multiAxisOptions: null,
|
||||
stackedOptions: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -194,145 +153,289 @@ export default {
|
|||
},
|
||||
applyLightTheme() {
|
||||
this.basicOptions = {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: '#495057'
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
x: {
|
||||
ticks: {
|
||||
fontColor: '#495057'
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
fontColor: '#495057'
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
this.stackedOptions.scales.xAxes[0].ticks = {
|
||||
fontColor: '#495057'
|
||||
};
|
||||
this.stackedOptions.scales.xAxes[0].gridLines = {
|
||||
color: '#ebedef'
|
||||
};
|
||||
this.stackedOptions.scales.yAxes[0].ticks = {
|
||||
fontColor: '#495057'
|
||||
};
|
||||
this.stackedOptions.scales.yAxes[0].gridLines = {
|
||||
color: '#ebedef'
|
||||
};
|
||||
this.stackedOptions.legend = {
|
||||
labels: {
|
||||
fontColor: '#495057'
|
||||
}
|
||||
};
|
||||
this.stackedOptions = {...this.stackedOptions};
|
||||
|
||||
this.multiAxisOptions.scales.xAxes = [{
|
||||
ticks: {
|
||||
fontColor: '#495057'
|
||||
},
|
||||
gridLines: {
|
||||
color: '#ebedef'
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
||||
this.multiAxisOptions.scales.yAxes[0].ticks = {
|
||||
fontColor: '#495057'
|
||||
};
|
||||
this.multiAxisOptions.scales.yAxes[0].gridLines = {
|
||||
color: '#ebedef'
|
||||
};
|
||||
this.multiAxisOptions.scales.yAxes[1].ticks = {
|
||||
fontColor: '#495057'
|
||||
};
|
||||
this.multiAxisOptions.scales.yAxes[1].gridLines = {
|
||||
color: '#ebedef'
|
||||
};
|
||||
this.multiAxisOptions.legend = {
|
||||
labels: {
|
||||
fontColor: '#495057'
|
||||
|
||||
this.horizontalOptions = {
|
||||
indexAxis: 'y',
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.multiAxisOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: true
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'left',
|
||||
ticks: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
y1: {
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'right',
|
||||
grid: {
|
||||
drawOnChartArea: false,
|
||||
color: '#ebedef'
|
||||
},
|
||||
ticks: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.stackedOptions = {
|
||||
plugins: {
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
stacked: true,
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
this.multiAxisOptions = {...this.multiAxisOptions};
|
||||
},
|
||||
applyDarkTheme() {
|
||||
this.basicOptions = {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: '#ebedef'
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
x: {
|
||||
ticks: {
|
||||
fontColor: '#ebedef'
|
||||
color: '#ebedef'
|
||||
},
|
||||
gridLines: {
|
||||
grid: {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
fontColor: '#ebedef'
|
||||
},
|
||||
gridLines: {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
this.stackedOptions.scales.xAxes[0].ticks = {
|
||||
fontColor: '#ebedef'
|
||||
};
|
||||
this.stackedOptions.scales.xAxes[0].gridLines = {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
};
|
||||
this.stackedOptions.scales.yAxes[0].ticks = {
|
||||
fontColor: '#ebedef'
|
||||
};
|
||||
this.stackedOptions.scales.yAxes[0].gridLines = {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
};
|
||||
this.stackedOptions.legend = {
|
||||
labels: {
|
||||
fontColor: '#ebedef'
|
||||
}
|
||||
};
|
||||
this.stackedOptions = {...this.stackedOptions};
|
||||
|
||||
this.multiAxisOptions.scales.xAxes = [{
|
||||
ticks: {
|
||||
fontColor: '#ebedef'
|
||||
},
|
||||
gridLines: {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#ebedef'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
||||
this.multiAxisOptions.scales.yAxes[0].ticks = {
|
||||
fontColor: '#ebedef'
|
||||
};
|
||||
this.multiAxisOptions.scales.yAxes[0].gridLines = {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
};
|
||||
this.multiAxisOptions.scales.yAxes[1].ticks = {
|
||||
fontColor: '#ebedef'
|
||||
};
|
||||
this.multiAxisOptions.scales.yAxes[1].gridLines = {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
};
|
||||
this.multiAxisOptions.legend = {
|
||||
labels: {
|
||||
fontColor: '#ebedef'
|
||||
|
||||
this.horizontalOptions = {
|
||||
indexAxis: 'y',
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#ebedef'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#ebedef'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.multiAxisOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: true
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#ebedef'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'left',
|
||||
ticks: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
color: '#ebedef'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
},
|
||||
y1: {
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'right',
|
||||
grid: {
|
||||
drawOnChartArea: false,
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
},
|
||||
ticks: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.stackedOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
ticks: {
|
||||
color: '#ebedef'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
stacked: true,
|
||||
ticks: {
|
||||
color: '#ebedef'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
this.multiAxisOptions = {...this.multiAxisOptions};
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/BarChartDemo.vue"/>
|
||||
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '3.3.2'}" component="Chart" github="chart/BarChartDemo.vue"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -19,7 +19,7 @@ export default {
|
|||
|
||||
<div class="card">
|
||||
<h5>Horizontal</h5>
|
||||
<Chart type="horizontalBar" :data="basicData" :options="basicOptions" />
|
||||
<Chart type="bar" :data="basicData" :options="horizontalOptions" />
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
|
|
@ -67,38 +67,6 @@ export default {
|
|||
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: [{
|
||||
|
|
@ -118,22 +86,144 @@ export default {
|
|||
data: [41,52,24,74,23,21,32]
|
||||
}]
|
||||
},
|
||||
stackedOptions: {
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
basicOptions: {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
stacked: true,
|
||||
}],
|
||||
yAxes: [{
|
||||
stacked: true
|
||||
}]
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
basicOptions: null
|
||||
horizontalOptions: {
|
||||
indexAxis: 'y',
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
multiAxisOptions: {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: true
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'left',
|
||||
ticks: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
y1: {
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'right',
|
||||
grid: {
|
||||
drawOnChartArea: false,
|
||||
color: '#ebedef'
|
||||
},
|
||||
ticks: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
stackedOptions: {
|
||||
plugins: {
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
stacked: true,
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -152,7 +242,7 @@ export default {
|
|||
|
||||
<div class="card">
|
||||
<h5>Horizontal</h5>
|
||||
<Chart type="horizontalBar" :data="basicData" :options="basicOptions" />
|
||||
<Chart type="bar" :data="basicData" :options="horizontalOptions" />
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
|
|
@ -187,6 +277,7 @@ export default {
|
|||
}
|
||||
]
|
||||
});
|
||||
|
||||
const multiAxisData = ref({
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
|
|
@ -201,38 +292,7 @@ export default {
|
|||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}]
|
||||
});
|
||||
const multiAxisOptions = ref({
|
||||
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
|
||||
}
|
||||
}]
|
||||
}
|
||||
});
|
||||
|
||||
const stackedData = ref({
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
|
|
@ -252,24 +312,159 @@ export default {
|
|||
data: [41,52,24,74,23,21,32]
|
||||
}]
|
||||
});
|
||||
const stackedOptions = ref({
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
stacked: true,
|
||||
}],
|
||||
yAxes: [{
|
||||
stacked: true
|
||||
}]
|
||||
}
|
||||
});
|
||||
const basicOptions = ref(null);
|
||||
|
||||
return { basicData, multiAxisData, multiAxisOptions, stackedData, stackedOptions, basicOptions }
|
||||
const basicOptions = ref(
|
||||
{
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const horizontalOptions = ref(
|
||||
{
|
||||
indexAxis: 'y',
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const multiAxisOptions = ref(
|
||||
{
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: true
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'left',
|
||||
ticks: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
y1: {
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'right',
|
||||
grid: {
|
||||
drawOnChartArea: false,
|
||||
color: '#ebedef'
|
||||
},
|
||||
ticks: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const stackedOptions = ref(
|
||||
{
|
||||
plugins: {
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
stacked: true,
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
return { basicData, multiAxisData, stackedData,
|
||||
basicOptions, horizontalOptions, multiAxisOptions, stackedOptions }
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
|
|
|
|||
|
|
@ -8,28 +8,6 @@
|
|||
import ChartDoc from './ChartDoc';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chartModel: {
|
||||
labels: ['A','B','C'],
|
||||
datasets: [
|
||||
{
|
||||
data: [300, 50, 100],
|
||||
backgroundColor: [
|
||||
"#FF6384",
|
||||
"#36A2EB",
|
||||
"#FFCE56"
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
"#FF6384",
|
||||
"#36A2EB",
|
||||
"#FFCE56"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'ChartDoc': ChartDoc
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
<p>Chart components are based on <a href="https://www.chartjs.org/">Charts.js</a>, an open source HTML5 based charting library.</p>
|
||||
|
||||
<h5>Getting Started</h5>
|
||||
<p>To begin with, charts.js package needs to be installed in your project.</p>
|
||||
<p>Chart component is a wrapper around on <a href="https://www.chartjs.org/docs/3.3.2/">Chart.js 3.3.2+</a> so chart.js needs to be included in your project.
|
||||
For a complete documentation and samples please refer to the <a href="https://www.chartjs.org/">chart.js website</a>.</p>
|
||||
<pre v-code.script><code>
|
||||
npm install chart.js --save
|
||||
|
||||
|
|
|
|||
|
|
@ -89,17 +89,7 @@ export default {
|
|||
]
|
||||
}]
|
||||
},
|
||||
chartOptions: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Combo Bar Line Chart'
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: true
|
||||
}
|
||||
}
|
||||
chartOptions: this.isDarkTheme() ? this.applyDarkTheme() : this.applyLightTheme()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -108,49 +98,59 @@ export default {
|
|||
},
|
||||
applyLightTheme() {
|
||||
this.chartOptions = {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: '#495057'
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
x: {
|
||||
ticks: {
|
||||
fontColor: '#495057'
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
fontColor: '#495057'
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
applyDarkTheme() {
|
||||
this.chartOptions = {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: '#ebedef'
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
x: {
|
||||
ticks: {
|
||||
fontColor: '#ebedef'
|
||||
color: '#ebedef'
|
||||
},
|
||||
gridLines: {
|
||||
grid: {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
fontColor: '#ebedef'
|
||||
color: '#ebedef'
|
||||
},
|
||||
gridLines: {
|
||||
grid: {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/ComboChartDemo.vue"/>
|
||||
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '3.3.2'}" component="Chart" github="chart/ComboChartDemo.vue"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -12,7 +12,7 @@ export default {
|
|||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<Chart type="bar" :data="chartData"/>
|
||||
<Chart type="bar" :data="chartData" :options="chartOptions" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -42,6 +42,33 @@ export default {
|
|||
backgroundColor: '#FFA726',
|
||||
data: [41,52,24,74,23,21,32]
|
||||
}]
|
||||
},
|
||||
chartOptions: {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -54,7 +81,7 @@ export default {
|
|||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<Chart type="bar" :data="chartData"/>
|
||||
<Chart type="bar" :data="chartData" :options="chartOptions" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -87,7 +114,35 @@ export default {
|
|||
}]
|
||||
});
|
||||
|
||||
return { chartData }
|
||||
const chartOptions = ref({
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return { chartData, chartOptions }
|
||||
}
|
||||
}
|
||||
<\\/script>`
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<Chart type="doughnut" :data="chartData" :options="chartOptions" />
|
||||
<div class="card p-d-flex p-jc-center">
|
||||
<Chart type="doughnut" :data="chartData" :options="chartOptions" style="width: 40%" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -65,18 +65,22 @@ export default {
|
|||
},
|
||||
getLightTheme() {
|
||||
return {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: '#495057'
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
getDarkTheme() {
|
||||
return {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: '#ebedef'
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/DoughnutChartDemo.vue" />
|
||||
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '3.3.2'}" component="Chart" github="chart/DoughnutChartDemo.vue" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -12,7 +12,7 @@ export default {
|
|||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<Chart type="doughnut" :data="chartData" />
|
||||
<Chart type="doughnut" :data="chartData" :options="lightOptions" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -29,7 +29,16 @@ export default {
|
|||
hoverBackgroundColor: ["#FF6384","#36A2EB","#FFCE56"]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
lightOptions: {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -41,7 +50,7 @@ export default {
|
|||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<Chart type="doughnut" :data="chartData" />
|
||||
<Chart type="doughnut" :data="chartData" :options="lightOptions" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -61,7 +70,17 @@ export default {
|
|||
]
|
||||
});
|
||||
|
||||
return { chartData }
|
||||
const lightOptions = ref({
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return { chartData, lightOptions }
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
|
|
|
|||
|
|
@ -47,6 +47,9 @@ export default {
|
|||
if (this.isDarkTheme()) {
|
||||
this.applyDarkTheme();
|
||||
}
|
||||
else {
|
||||
this.applyLightTheme();
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
EventBus.off('change-theme', this.themeChangeListener);
|
||||
|
|
@ -60,13 +63,15 @@ export default {
|
|||
label: 'First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
fill: false,
|
||||
borderColor: '#42A5F5'
|
||||
borderColor: '#42A5F5',
|
||||
tension: .4
|
||||
},
|
||||
{
|
||||
label: 'Second Dataset',
|
||||
data: [28, 48, 40, 19, 86, 27, 90],
|
||||
fill: false,
|
||||
borderColor: '#FFA726'
|
||||
borderColor: '#FFA726',
|
||||
tension: .4
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -76,37 +81,18 @@ export default {
|
|||
label: 'Dataset 1',
|
||||
fill: false,
|
||||
borderColor: '#42A5F5',
|
||||
yAxisID: 'y-axis-1',
|
||||
yAxisID: 'y',
|
||||
tension: .4,
|
||||
data: [65, 59, 80, 81, 56, 55, 10]
|
||||
}, {
|
||||
label: 'Dataset 2',
|
||||
fill: false,
|
||||
borderColor: '#00bb7e',
|
||||
yAxisID: 'y-axis-2',
|
||||
yAxisID: 'y1',
|
||||
tension: .4,
|
||||
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: [
|
||||
|
|
@ -114,6 +100,7 @@ export default {
|
|||
label: 'First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
fill: false,
|
||||
tension: .4,
|
||||
borderColor: '#42A5F5'
|
||||
},
|
||||
{
|
||||
|
|
@ -121,6 +108,7 @@ export default {
|
|||
data: [28, 48, 40, 19, 86, 27, 90],
|
||||
fill: false,
|
||||
borderDash: [5, 5],
|
||||
tension: .4,
|
||||
borderColor: '#66BB6A'
|
||||
},
|
||||
{
|
||||
|
|
@ -128,11 +116,13 @@ export default {
|
|||
data: [12, 51, 62, 33, 21, 62, 45],
|
||||
fill: true,
|
||||
borderColor: '#FFA726',
|
||||
tension: .4,
|
||||
backgroundColor: 'rgba(255,167,38,0.2)'
|
||||
}
|
||||
]
|
||||
},
|
||||
basicOptions: null
|
||||
basicOptions: null,
|
||||
multiAxisOptions: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -141,107 +131,149 @@ export default {
|
|||
},
|
||||
applyLightTheme() {
|
||||
this.basicOptions = {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: '#495057'
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
x: {
|
||||
ticks: {
|
||||
fontColor: '#495057'
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
fontColor: '#495057'
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.multiAxisOptions.scales.xAxes = [{
|
||||
ticks: {
|
||||
fontColor: '#495057'
|
||||
this.multiAxisOptions = {
|
||||
stacked: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
gridLines: {
|
||||
color: '#ebedef'
|
||||
y: {
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'left',
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
y1: {
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'right',
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
drawOnChartArea: false,
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
||||
this.multiAxisOptions.scales.yAxes[0].ticks = {
|
||||
fontColor: '#495057'
|
||||
};
|
||||
this.multiAxisOptions.scales.yAxes[0].gridLines = {
|
||||
color: '#ebedef'
|
||||
};
|
||||
this.multiAxisOptions.scales.yAxes[1].ticks = {
|
||||
fontColor: '#495057'
|
||||
};
|
||||
this.multiAxisOptions.scales.yAxes[1].gridLines = {
|
||||
color: '#ebedef'
|
||||
};
|
||||
this.multiAxisOptions.legend = {
|
||||
labels: {
|
||||
fontColor: '#495057'
|
||||
}
|
||||
};
|
||||
this.multiAxisOptions = {...this.multiAxisOptions};
|
||||
},
|
||||
applyDarkTheme() {
|
||||
this.basicOptions = {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: '#ebedef'
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
x: {
|
||||
ticks: {
|
||||
fontColor: '#ebedef'
|
||||
color: '#ebedef'
|
||||
},
|
||||
gridLines: {
|
||||
grid: {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
fontColor: '#ebedef'
|
||||
color: '#ebedef'
|
||||
},
|
||||
gridLines: {
|
||||
grid: {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.multiAxisOptions.scales.xAxes = [{
|
||||
ticks: {
|
||||
fontColor: '#ebedef'
|
||||
this.multiAxisOptions = {
|
||||
stacked: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#ebedef'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
},
|
||||
gridLines: {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
y: {
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'left',
|
||||
ticks: {
|
||||
color: '#ebedef'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
},
|
||||
y1: {
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'right',
|
||||
ticks: {
|
||||
color: '#ebedef'
|
||||
},
|
||||
grid: {
|
||||
drawOnChartArea: false,
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
||||
this.multiAxisOptions.scales.yAxes[0].ticks = {
|
||||
fontColor: '#ebedef'
|
||||
};
|
||||
this.multiAxisOptions.scales.yAxes[0].gridLines = {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
};
|
||||
this.multiAxisOptions.scales.yAxes[1].ticks = {
|
||||
fontColor: '#ebedef'
|
||||
};
|
||||
this.multiAxisOptions.scales.yAxes[1].gridLines = {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
};
|
||||
this.multiAxisOptions.legend = {
|
||||
labels: {
|
||||
fontColor: '#ebedef'
|
||||
}
|
||||
};
|
||||
this.multiAxisOptions = {...this.multiAxisOptions};
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/LineChartDemo.vue" />
|
||||
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '3.3.2'}" component="Chart" github="chart/LineChartDemo.vue" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -40,13 +40,15 @@ export default {
|
|||
label: 'First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
fill: false,
|
||||
borderColor: '#42A5F5'
|
||||
borderColor: '#42A5F5',
|
||||
tension: .4
|
||||
},
|
||||
{
|
||||
label: 'Second Dataset',
|
||||
data: [28, 48, 40, 19, 86, 27, 90],
|
||||
fill: false,
|
||||
borderColor: '#FFA726'
|
||||
borderColor: '#FFA726',
|
||||
tension: .4
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -56,37 +58,18 @@ export default {
|
|||
label: 'Dataset 1',
|
||||
fill: false,
|
||||
borderColor: '#42A5F5',
|
||||
yAxisID: 'y-axis-1',
|
||||
yAxisID: 'y',
|
||||
tension: .4,
|
||||
data: [65, 59, 80, 81, 56, 55, 10]
|
||||
}, {
|
||||
label: 'Dataset 2',
|
||||
fill: false,
|
||||
borderColor: '#00bb7e',
|
||||
yAxisID: 'y-axis-2',
|
||||
yAxisID: 'y1',
|
||||
tension: .4,
|
||||
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: [
|
||||
|
|
@ -94,6 +77,7 @@ export default {
|
|||
label: 'First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
fill: false,
|
||||
tension: .4,
|
||||
borderColor: '#42A5F5'
|
||||
},
|
||||
{
|
||||
|
|
@ -101,6 +85,7 @@ export default {
|
|||
data: [28, 48, 40, 19, 86, 27, 90],
|
||||
fill: false,
|
||||
borderDash: [5, 5],
|
||||
tension: .4,
|
||||
borderColor: '#66BB6A'
|
||||
},
|
||||
{
|
||||
|
|
@ -108,11 +93,81 @@ export default {
|
|||
data: [12, 51, 62, 33, 21, 62, 45],
|
||||
fill: true,
|
||||
borderColor: '#FFA726',
|
||||
tension: .4,
|
||||
backgroundColor: 'rgba(255,167,38,0.2)'
|
||||
}
|
||||
]
|
||||
},
|
||||
basicOptions: null
|
||||
basicOptions: {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
multiAxisOptions:{
|
||||
stacked: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'left',
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
y1: {
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'right',
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
drawOnChartArea: false,
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -146,86 +201,155 @@ import { ref } from 'vue';
|
|||
|
||||
export default {
|
||||
setup() {
|
||||
const basicData = ref({
|
||||
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,
|
||||
borderColor: '#FFA726'
|
||||
}
|
||||
]
|
||||
});
|
||||
const multiAxisData = ref({
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'Dataset 1',
|
||||
fill: false,
|
||||
borderColor: '#42A5F5',
|
||||
yAxisID: 'y-axis-1',
|
||||
data: [65, 59, 80, 81, 56, 55, 10]
|
||||
}, {
|
||||
label: 'Dataset 2',
|
||||
fill: false,
|
||||
borderColor: '#00bb7e',
|
||||
yAxisID: 'y-axis-2',
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}]
|
||||
});
|
||||
const multiAxisOptions = ref({
|
||||
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
|
||||
const basicData = ref(
|
||||
{
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
fill: false,
|
||||
borderColor: '#42A5F5',
|
||||
tension: .4
|
||||
},
|
||||
{
|
||||
label: 'Second Dataset',
|
||||
data: [28, 48, 40, 19, 86, 27, 90],
|
||||
fill: false,
|
||||
borderColor: '#FFA726',
|
||||
tension: .4
|
||||
}
|
||||
]
|
||||
}
|
||||
);
|
||||
|
||||
const multiAxisData = ref(
|
||||
{
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'Dataset 1',
|
||||
fill: false,
|
||||
borderColor: '#42A5F5',
|
||||
yAxisID: 'y',
|
||||
tension: .4,
|
||||
data: [65, 59, 80, 81, 56, 55, 10]
|
||||
}, {
|
||||
label: 'Dataset 2',
|
||||
fill: false,
|
||||
borderColor: '#00bb7e',
|
||||
yAxisID: 'y1',
|
||||
tension: .4,
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}]
|
||||
}
|
||||
});
|
||||
const lineStylesData = ref({
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
fill: false,
|
||||
borderColor: '#42A5F5'
|
||||
);
|
||||
|
||||
const lineStylesData = ref(
|
||||
{
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
fill: false,
|
||||
tension: .4,
|
||||
borderColor: '#42A5F5'
|
||||
},
|
||||
{
|
||||
label: 'Second Dataset',
|
||||
data: [28, 48, 40, 19, 86, 27, 90],
|
||||
fill: false,
|
||||
borderDash: [5, 5],
|
||||
tension: .4,
|
||||
borderColor: '#66BB6A'
|
||||
},
|
||||
{
|
||||
label: 'Third Dataset',
|
||||
data: [12, 51, 62, 33, 21, 62, 45],
|
||||
fill: true,
|
||||
borderColor: '#FFA726',
|
||||
tension: .4,
|
||||
backgroundColor: 'rgba(255,167,38,0.2)'
|
||||
}
|
||||
]
|
||||
}
|
||||
);
|
||||
|
||||
const basicOptions = ref(
|
||||
{
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
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: 'rgba(255,167,38,0.2)'
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
const basicOptions = ref(null);
|
||||
}
|
||||
);
|
||||
|
||||
const multiAxisData = ref(
|
||||
{
|
||||
stacked: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'left',
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
y1: {
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'right',
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
drawOnChartArea: false,
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
return { basicData, multiAxisData, multiAxisOptions, lineStylesData, basicOptions }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<Chart type="pie" :data="chartData" :options="chartOptions" />
|
||||
<div class="card p-d-flex p-jc-center">
|
||||
<Chart type="pie" :data="chartData" :options="chartOptions" style="width: 40%" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -65,18 +65,22 @@ export default {
|
|||
},
|
||||
getLightTheme() {
|
||||
return {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: '#495057'
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
getDarkTheme() {
|
||||
return {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: '#ebedef'
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/PieChartDemo.vue" />
|
||||
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '3.3.2'}" component="Chart" github="chart/PieChartDemo.vue" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -13,7 +13,7 @@ export default {
|
|||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<Chart type="pie" :data="chartData" />
|
||||
<Chart type="pie" :data="chartData" :options="lightOptions" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -30,6 +30,15 @@ export default {
|
|||
hoverBackgroundColor: ["#64B5F6","#81C784","#FFB74D"]
|
||||
}
|
||||
]
|
||||
},
|
||||
lightOptions: {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -42,7 +51,7 @@ export default {
|
|||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<Chart type="pie" :data="chartData" />
|
||||
<Chart type="pie" :data="chartData" :options="lightOptions" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -62,7 +71,17 @@ export default {
|
|||
]
|
||||
});
|
||||
|
||||
return { chartData }
|
||||
const lightOptions = ref({
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return { chartData, lightOptions }
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<Chart type="polarArea" :data="chartData" :options="chartOptions" />
|
||||
<div class="card p-d-flex p-jc-center">
|
||||
<Chart type="polarArea" :data="chartData" :options="chartOptions" style="width: 40%" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -73,28 +73,36 @@ export default {
|
|||
},
|
||||
getLightTheme() {
|
||||
return {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: '#495057'
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scale: {
|
||||
gridLines: {
|
||||
color: '#ebedef'
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
getDarkTheme() {
|
||||
return {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: '#ebedef'
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
},
|
||||
scale: {
|
||||
gridLines: {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/PolarAreaChartDemo.vue" />
|
||||
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '3.3.2'}" component="Chart" github="chart/PolarAreaChartDemo.vue" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -12,7 +12,7 @@ export default {
|
|||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<Chart type="polarArea" :data="chartData" />
|
||||
<Chart type="polarArea" :data="chartData" :options="chartOptions" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -27,6 +27,22 @@ export default {
|
|||
label: 'My dataset'
|
||||
}],
|
||||
labels: ["Red","Green","Yellow","Grey","Blue"]
|
||||
},
|
||||
chartOptions: {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -39,7 +55,7 @@ export default {
|
|||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<Chart type="polarArea" :data="chartData" />
|
||||
<Chart type="polarArea" :data="chartData" :options="chartOptions" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -57,7 +73,26 @@ export default {
|
|||
labels: ["Red","Green","Yellow","Grey","Blue"]
|
||||
});
|
||||
|
||||
return { chartData }
|
||||
const chartOptions = ref(
|
||||
{
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
return { chartData, chartOptions }
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<Chart type="radar" :data="chartData" :options="chartOptions" />
|
||||
<div class="card p-d-flex p-jc-center">
|
||||
<Chart type="radar" :data="chartData" :options="chartOptions" style="width: 40%" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -72,34 +72,48 @@ export default {
|
|||
},
|
||||
getLightTheme() {
|
||||
return {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: '#495057'
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scale: {
|
||||
pointLabels: {
|
||||
fontColor: '#495057'
|
||||
},
|
||||
gridLines: {
|
||||
color: '#ebedef'
|
||||
scales: {
|
||||
r: {
|
||||
pointLabels: {
|
||||
color: '#495057',
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef',
|
||||
},
|
||||
angleLines: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
getDarkTheme() {
|
||||
return {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: '#ebedef'
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
},
|
||||
scale: {
|
||||
pointLabels: {
|
||||
fontColor: '#ebedef'
|
||||
},
|
||||
gridLines: {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
scales: {
|
||||
r: {
|
||||
pointLabels: {
|
||||
color: '#ebedef',
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(255,255,255,0.2)',
|
||||
},
|
||||
angleLines: {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/RadarChartDemo.vue" />
|
||||
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '3.3.2'}" component="Chart" github="chart/RadarChartDemo.vue" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -12,7 +12,7 @@ export default {
|
|||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<Chart type="radar" :data="chartData" />
|
||||
<Chart type="radar" :data="chartData" :options="chartOptions" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -45,6 +45,28 @@ export default {
|
|||
}
|
||||
]
|
||||
},
|
||||
chartOption: {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
pointLabels: {
|
||||
color: '#495057',
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef',
|
||||
},
|
||||
angleLines: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -56,7 +78,7 @@ export default {
|
|||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<Chart type="radar" :data="chartData" />
|
||||
<Chart type="radar" :data="chartData" :options="chartOptions" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -91,7 +113,30 @@ export default {
|
|||
]
|
||||
});
|
||||
|
||||
return { chartData }
|
||||
const chartOptions = ref({
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
pointLabels: {
|
||||
color: '#495057',
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef',
|
||||
},
|
||||
angleLines: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return { chartData, chartOptions }
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue