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",
|
"@vuelidate/validators": "^2.0.0-alpha.12",
|
||||||
"axios": "^0.19.0",
|
"axios": "^0.19.0",
|
||||||
"babel-eslint": "^10.1.0",
|
"babel-eslint": "^10.1.0",
|
||||||
"chart.js": "2.7.3",
|
"chart.js": "3.3.2",
|
||||||
"codesandbox": "2.1.14",
|
"codesandbox": "2.1.14",
|
||||||
"core-js": "^3.6.5",
|
"core-js": "^3.6.5",
|
||||||
"eslint": "^6.7.2",
|
"eslint": "^6.7.2",
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,7 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initChart() {
|
initChart() {
|
||||||
import('chart.js').then((module) => {
|
import('chart.js/auto').then((module) => {
|
||||||
if (module && module.default) {
|
if (module && module.default) {
|
||||||
this.chart = new module.default(this.$refs.canvas, {
|
this.chart = new module.default(this.$refs.canvas, {
|
||||||
type: this.type,
|
type: this.type,
|
||||||
|
|
@ -73,8 +73,8 @@ export default {
|
||||||
},
|
},
|
||||||
onCanvasClick(event) {
|
onCanvasClick(event) {
|
||||||
if (this.chart) {
|
if (this.chart) {
|
||||||
const element = this.chart.getElementAtEvent(event);
|
const element = this.chart.getElementsAtEventForMode(event, 'nearest', { intersect: true }, false);
|
||||||
const dataset = this.chart.getDatasetAtEvent(event);
|
const dataset = this.chart.getElementsAtEventForMode(event, 'dataset', { intersect: true }, false);
|
||||||
|
|
||||||
if (element && element[0] && dataset) {
|
if (element && element[0] && dataset) {
|
||||||
this.$emit('select', {originalEvent: event, element: element[0], dataset: dataset});
|
this.$emit('select', {originalEvent: event, element: element[0], dataset: dataset});
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h5>Horizontal</h5>
|
<h5>Horizontal</h5>
|
||||||
<Chart type="horizontalBar" :data="basicData" :options="basicOptions" />
|
<Chart type="bar" :data="basicData" :options="horizontalOptions" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
|
|
@ -52,6 +52,9 @@ export default {
|
||||||
if (this.isDarkTheme()) {
|
if (this.isDarkTheme()) {
|
||||||
this.applyDarkTheme();
|
this.applyDarkTheme();
|
||||||
}
|
}
|
||||||
|
else {
|
||||||
|
this.applyLightTheme();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
beforeUnmount() {
|
beforeUnmount() {
|
||||||
EventBus.off('change-theme', this.themeChangeListener);
|
EventBus.off('change-theme', this.themeChangeListener);
|
||||||
|
|
@ -86,47 +89,15 @@ export default {
|
||||||
'#FFCA28',
|
'#FFCA28',
|
||||||
'#26A69A'
|
'#26A69A'
|
||||||
],
|
],
|
||||||
yAxisID: 'y-axis-1',
|
yAxisID: 'y',
|
||||||
data: [65, 59, 80, 81, 56, 55, 10]
|
data: [65, 59, 80, 81, 56, 55, 10]
|
||||||
}, {
|
}, {
|
||||||
label: 'Dataset 2',
|
label: 'Dataset 2',
|
||||||
backgroundColor: '#78909C',
|
backgroundColor: '#78909C',
|
||||||
yAxisID: 'y-axis-2',
|
yAxisID: 'y1',
|
||||||
data: [28, 48, 40, 19, 86, 27, 90]
|
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: {
|
stackedData: {
|
||||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
datasets: [{
|
datasets: [{
|
||||||
|
|
@ -170,22 +141,10 @@ export default {
|
||||||
]
|
]
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
stackedOptions: {
|
basicOptions: null,
|
||||||
tooltips: {
|
horizontalOptions: null,
|
||||||
mode: 'index',
|
multiAxisOptions: null,
|
||||||
intersect: false
|
stackedOptions: null
|
||||||
},
|
|
||||||
responsive: true,
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
stacked: true,
|
|
||||||
}],
|
|
||||||
yAxes: [{
|
|
||||||
stacked: true
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
basicOptions: null
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -194,145 +153,289 @@ export default {
|
||||||
},
|
},
|
||||||
applyLightTheme() {
|
applyLightTheme() {
|
||||||
this.basicOptions = {
|
this.basicOptions = {
|
||||||
legend: {
|
plugins: {
|
||||||
labels: {
|
legend: {
|
||||||
fontColor: '#495057'
|
labels: {
|
||||||
|
color: '#495057'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
scales: {
|
scales: {
|
||||||
xAxes: [{
|
x: {
|
||||||
ticks: {
|
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: {
|
y: {
|
||||||
color: '#ebedef'
|
ticks: {
|
||||||
|
color: '#495057'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
color: '#ebedef'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
];
|
|
||||||
this.multiAxisOptions.scales.yAxes[0].ticks = {
|
|
||||||
fontColor: '#495057'
|
|
||||||
};
|
};
|
||||||
this.multiAxisOptions.scales.yAxes[0].gridLines = {
|
|
||||||
color: '#ebedef'
|
this.horizontalOptions = {
|
||||||
};
|
indexAxis: 'y',
|
||||||
this.multiAxisOptions.scales.yAxes[1].ticks = {
|
plugins: {
|
||||||
fontColor: '#495057'
|
legend: {
|
||||||
};
|
labels: {
|
||||||
this.multiAxisOptions.scales.yAxes[1].gridLines = {
|
color: '#495057'
|
||||||
color: '#ebedef'
|
}
|
||||||
};
|
}
|
||||||
this.multiAxisOptions.legend = {
|
},
|
||||||
labels: {
|
scales: {
|
||||||
fontColor: '#495057'
|
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() {
|
applyDarkTheme() {
|
||||||
this.basicOptions = {
|
this.basicOptions = {
|
||||||
legend: {
|
plugins: {
|
||||||
labels: {
|
legend: {
|
||||||
fontColor: '#ebedef'
|
labels: {
|
||||||
|
color: '#ebedef'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
scales: {
|
scales: {
|
||||||
xAxes: [{
|
x: {
|
||||||
ticks: {
|
ticks: {
|
||||||
fontColor: '#ebedef'
|
color: '#ebedef'
|
||||||
},
|
},
|
||||||
gridLines: {
|
grid: {
|
||||||
color: 'rgba(255,255,255,0.2)'
|
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: {
|
y: {
|
||||||
color: 'rgba(255,255,255,0.2)'
|
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.horizontalOptions = {
|
||||||
};
|
indexAxis: 'y',
|
||||||
this.multiAxisOptions.scales.yAxes[1].ticks = {
|
plugins: {
|
||||||
fontColor: '#ebedef'
|
legend: {
|
||||||
};
|
labels: {
|
||||||
this.multiAxisOptions.scales.yAxes[1].gridLines = {
|
color: '#ebedef'
|
||||||
color: 'rgba(255,255,255,0.2)'
|
}
|
||||||
};
|
}
|
||||||
this.multiAxisOptions.legend = {
|
},
|
||||||
labels: {
|
scales: {
|
||||||
fontColor: '#ebedef'
|
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: {
|
components: {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -19,7 +19,7 @@ export default {
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h5>Horizontal</h5>
|
<h5>Horizontal</h5>
|
||||||
<Chart type="horizontalBar" :data="basicData" :options="basicOptions" />
|
<Chart type="bar" :data="basicData" :options="horizontalOptions" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
|
|
@ -67,38 +67,6 @@ export default {
|
||||||
data: [28, 48, 40, 19, 86, 27, 90]
|
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: {
|
stackedData: {
|
||||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
datasets: [{
|
datasets: [{
|
||||||
|
|
@ -118,22 +86,144 @@ export default {
|
||||||
data: [41,52,24,74,23,21,32]
|
data: [41,52,24,74,23,21,32]
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
stackedOptions: {
|
basicOptions: {
|
||||||
tooltips: {
|
plugins: {
|
||||||
mode: 'index',
|
legend: {
|
||||||
intersect: false
|
labels: {
|
||||||
|
color: '#495057'
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
responsive: true,
|
|
||||||
scales: {
|
scales: {
|
||||||
xAxes: [{
|
x: {
|
||||||
stacked: true,
|
ticks: {
|
||||||
}],
|
color: '#495057'
|
||||||
yAxes: [{
|
},
|
||||||
stacked: true
|
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">
|
<div class="card">
|
||||||
<h5>Horizontal</h5>
|
<h5>Horizontal</h5>
|
||||||
<Chart type="horizontalBar" :data="basicData" :options="basicOptions" />
|
<Chart type="bar" :data="basicData" :options="horizontalOptions" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
|
|
@ -187,6 +277,7 @@ export default {
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
||||||
const multiAxisData = ref({
|
const multiAxisData = ref({
|
||||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
datasets: [{
|
datasets: [{
|
||||||
|
|
@ -201,38 +292,7 @@ export default {
|
||||||
data: [28, 48, 40, 19, 86, 27, 90]
|
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({
|
const stackedData = ref({
|
||||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
datasets: [{
|
datasets: [{
|
||||||
|
|
@ -252,24 +312,159 @@ export default {
|
||||||
data: [41,52,24,74,23,21,32]
|
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>
|
<\\/script>
|
||||||
|
|
|
||||||
|
|
@ -8,28 +8,6 @@
|
||||||
import ChartDoc from './ChartDoc';
|
import ChartDoc from './ChartDoc';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chartModel: {
|
|
||||||
labels: ['A','B','C'],
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
data: [300, 50, 100],
|
|
||||||
backgroundColor: [
|
|
||||||
"#FF6384",
|
|
||||||
"#36A2EB",
|
|
||||||
"#FFCE56"
|
|
||||||
],
|
|
||||||
hoverBackgroundColor: [
|
|
||||||
"#FF6384",
|
|
||||||
"#36A2EB",
|
|
||||||
"#FFCE56"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
components: {
|
||||||
'ChartDoc': ChartDoc
|
'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>
|
<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>
|
<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>
|
<pre v-code.script><code>
|
||||||
npm install chart.js --save
|
npm install chart.js --save
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -89,17 +89,7 @@ export default {
|
||||||
]
|
]
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
chartOptions: {
|
chartOptions: this.isDarkTheme() ? this.applyDarkTheme() : this.applyLightTheme()
|
||||||
responsive: true,
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: 'Combo Bar Line Chart'
|
|
||||||
},
|
|
||||||
tooltips: {
|
|
||||||
mode: 'index',
|
|
||||||
intersect: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -108,49 +98,59 @@ export default {
|
||||||
},
|
},
|
||||||
applyLightTheme() {
|
applyLightTheme() {
|
||||||
this.chartOptions = {
|
this.chartOptions = {
|
||||||
legend: {
|
plugins: {
|
||||||
labels: {
|
legend: {
|
||||||
fontColor: '#495057'
|
labels: {
|
||||||
|
color: '#495057'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
scales: {
|
scales: {
|
||||||
xAxes: [{
|
x: {
|
||||||
ticks: {
|
ticks: {
|
||||||
fontColor: '#495057'
|
color: '#495057'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
color: '#ebedef'
|
||||||
}
|
}
|
||||||
}],
|
},
|
||||||
yAxes: [{
|
y: {
|
||||||
ticks: {
|
ticks: {
|
||||||
fontColor: '#495057'
|
color: '#495057'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
color: '#ebedef'
|
||||||
}
|
}
|
||||||
}]
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
applyDarkTheme() {
|
applyDarkTheme() {
|
||||||
this.chartOptions = {
|
this.chartOptions = {
|
||||||
legend: {
|
plugins: {
|
||||||
labels: {
|
legend: {
|
||||||
fontColor: '#ebedef'
|
labels: {
|
||||||
|
color: '#ebedef'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
scales: {
|
scales: {
|
||||||
xAxes: [{
|
x: {
|
||||||
ticks: {
|
ticks: {
|
||||||
fontColor: '#ebedef'
|
color: '#ebedef'
|
||||||
},
|
},
|
||||||
gridLines: {
|
grid: {
|
||||||
color: 'rgba(255,255,255,0.2)'
|
color: 'rgba(255,255,255,0.2)'
|
||||||
}
|
}
|
||||||
}],
|
},
|
||||||
yAxes: [{
|
y: {
|
||||||
ticks: {
|
ticks: {
|
||||||
fontColor: '#ebedef'
|
color: '#ebedef'
|
||||||
},
|
},
|
||||||
gridLines: {
|
grid: {
|
||||||
color: 'rgba(255,255,255,0.2)'
|
color: 'rgba(255,255,255,0.2)'
|
||||||
}
|
}
|
||||||
}]
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -12,7 +12,7 @@ export default {
|
||||||
content: `
|
content: `
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Chart type="bar" :data="chartData"/>
|
<Chart type="bar" :data="chartData" :options="chartOptions" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -42,6 +42,33 @@ export default {
|
||||||
backgroundColor: '#FFA726',
|
backgroundColor: '#FFA726',
|
||||||
data: [41,52,24,74,23,21,32]
|
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: `
|
content: `
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Chart type="bar" :data="chartData"/>
|
<Chart type="bar" :data="chartData" :options="chartOptions" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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>`
|
<\\/script>`
|
||||||
|
|
|
||||||
|
|
@ -9,8 +9,8 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<div class="card">
|
<div class="card p-d-flex p-jc-center">
|
||||||
<Chart type="doughnut" :data="chartData" :options="chartOptions" />
|
<Chart type="doughnut" :data="chartData" :options="chartOptions" style="width: 40%" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -65,18 +65,22 @@ export default {
|
||||||
},
|
},
|
||||||
getLightTheme() {
|
getLightTheme() {
|
||||||
return {
|
return {
|
||||||
legend: {
|
plugins: {
|
||||||
labels: {
|
legend: {
|
||||||
fontColor: '#495057'
|
labels: {
|
||||||
|
color: '#495057'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getDarkTheme() {
|
getDarkTheme() {
|
||||||
return {
|
return {
|
||||||
legend: {
|
plugins: {
|
||||||
labels: {
|
legend: {
|
||||||
fontColor: '#ebedef'
|
labels: {
|
||||||
|
color: '#ebedef'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -12,7 +12,7 @@ export default {
|
||||||
content: `
|
content: `
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Chart type="doughnut" :data="chartData" />
|
<Chart type="doughnut" :data="chartData" :options="lightOptions" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -29,7 +29,16 @@ export default {
|
||||||
hoverBackgroundColor: ["#FF6384","#36A2EB","#FFCE56"]
|
hoverBackgroundColor: ["#FF6384","#36A2EB","#FFCE56"]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
},
|
||||||
|
lightOptions: {
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
labels: {
|
||||||
|
color: '#495057'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -41,7 +50,7 @@ export default {
|
||||||
content: `
|
content: `
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Chart type="doughnut" :data="chartData" />
|
<Chart type="doughnut" :data="chartData" :options="lightOptions" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -61,7 +70,17 @@ export default {
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
||||||
return { chartData }
|
const lightOptions = ref({
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
labels: {
|
||||||
|
color: '#495057'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return { chartData, lightOptions }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
<\\/script>
|
<\\/script>
|
||||||
|
|
|
||||||
|
|
@ -47,6 +47,9 @@ export default {
|
||||||
if (this.isDarkTheme()) {
|
if (this.isDarkTheme()) {
|
||||||
this.applyDarkTheme();
|
this.applyDarkTheme();
|
||||||
}
|
}
|
||||||
|
else {
|
||||||
|
this.applyLightTheme();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
beforeUnmount() {
|
beforeUnmount() {
|
||||||
EventBus.off('change-theme', this.themeChangeListener);
|
EventBus.off('change-theme', this.themeChangeListener);
|
||||||
|
|
@ -60,13 +63,15 @@ export default {
|
||||||
label: 'First Dataset',
|
label: 'First Dataset',
|
||||||
data: [65, 59, 80, 81, 56, 55, 40],
|
data: [65, 59, 80, 81, 56, 55, 40],
|
||||||
fill: false,
|
fill: false,
|
||||||
borderColor: '#42A5F5'
|
borderColor: '#42A5F5',
|
||||||
|
tension: .4
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Second Dataset',
|
label: 'Second Dataset',
|
||||||
data: [28, 48, 40, 19, 86, 27, 90],
|
data: [28, 48, 40, 19, 86, 27, 90],
|
||||||
fill: false,
|
fill: false,
|
||||||
borderColor: '#FFA726'
|
borderColor: '#FFA726',
|
||||||
|
tension: .4
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
@ -76,37 +81,18 @@ export default {
|
||||||
label: 'Dataset 1',
|
label: 'Dataset 1',
|
||||||
fill: false,
|
fill: false,
|
||||||
borderColor: '#42A5F5',
|
borderColor: '#42A5F5',
|
||||||
yAxisID: 'y-axis-1',
|
yAxisID: 'y',
|
||||||
|
tension: .4,
|
||||||
data: [65, 59, 80, 81, 56, 55, 10]
|
data: [65, 59, 80, 81, 56, 55, 10]
|
||||||
}, {
|
}, {
|
||||||
label: 'Dataset 2',
|
label: 'Dataset 2',
|
||||||
fill: false,
|
fill: false,
|
||||||
borderColor: '#00bb7e',
|
borderColor: '#00bb7e',
|
||||||
yAxisID: 'y-axis-2',
|
yAxisID: 'y1',
|
||||||
|
tension: .4,
|
||||||
data: [28, 48, 40, 19, 86, 27, 90]
|
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: {
|
lineStylesData: {
|
||||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
datasets: [
|
datasets: [
|
||||||
|
|
@ -114,6 +100,7 @@ export default {
|
||||||
label: 'First Dataset',
|
label: 'First Dataset',
|
||||||
data: [65, 59, 80, 81, 56, 55, 40],
|
data: [65, 59, 80, 81, 56, 55, 40],
|
||||||
fill: false,
|
fill: false,
|
||||||
|
tension: .4,
|
||||||
borderColor: '#42A5F5'
|
borderColor: '#42A5F5'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -121,6 +108,7 @@ export default {
|
||||||
data: [28, 48, 40, 19, 86, 27, 90],
|
data: [28, 48, 40, 19, 86, 27, 90],
|
||||||
fill: false,
|
fill: false,
|
||||||
borderDash: [5, 5],
|
borderDash: [5, 5],
|
||||||
|
tension: .4,
|
||||||
borderColor: '#66BB6A'
|
borderColor: '#66BB6A'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -128,11 +116,13 @@ export default {
|
||||||
data: [12, 51, 62, 33, 21, 62, 45],
|
data: [12, 51, 62, 33, 21, 62, 45],
|
||||||
fill: true,
|
fill: true,
|
||||||
borderColor: '#FFA726',
|
borderColor: '#FFA726',
|
||||||
|
tension: .4,
|
||||||
backgroundColor: 'rgba(255,167,38,0.2)'
|
backgroundColor: 'rgba(255,167,38,0.2)'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
basicOptions: null
|
basicOptions: null,
|
||||||
|
multiAxisOptions: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -141,107 +131,149 @@ export default {
|
||||||
},
|
},
|
||||||
applyLightTheme() {
|
applyLightTheme() {
|
||||||
this.basicOptions = {
|
this.basicOptions = {
|
||||||
legend: {
|
plugins: {
|
||||||
labels: {
|
legend: {
|
||||||
fontColor: '#495057'
|
labels: {
|
||||||
|
color: '#495057'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
scales: {
|
scales: {
|
||||||
xAxes: [{
|
x: {
|
||||||
ticks: {
|
ticks: {
|
||||||
fontColor: '#495057'
|
color: '#495057'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
color: '#ebedef'
|
||||||
}
|
}
|
||||||
}],
|
},
|
||||||
yAxes: [{
|
y: {
|
||||||
ticks: {
|
ticks: {
|
||||||
fontColor: '#495057'
|
color: '#495057'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
color: '#ebedef'
|
||||||
}
|
}
|
||||||
}]
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
this.multiAxisOptions.scales.xAxes = [{
|
this.multiAxisOptions = {
|
||||||
ticks: {
|
stacked: false,
|
||||||
fontColor: '#495057'
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
labels: {
|
||||||
|
color: '#495057'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
x: {
|
||||||
|
ticks: {
|
||||||
|
color: '#495057'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
color: '#ebedef'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
gridLines: {
|
y: {
|
||||||
color: '#ebedef'
|
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() {
|
applyDarkTheme() {
|
||||||
this.basicOptions = {
|
this.basicOptions = {
|
||||||
legend: {
|
plugins: {
|
||||||
labels: {
|
legend: {
|
||||||
fontColor: '#ebedef'
|
labels: {
|
||||||
|
color: '#ebedef'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
scales: {
|
scales: {
|
||||||
xAxes: [{
|
x: {
|
||||||
ticks: {
|
ticks: {
|
||||||
fontColor: '#ebedef'
|
color: '#ebedef'
|
||||||
},
|
},
|
||||||
gridLines: {
|
grid: {
|
||||||
color: 'rgba(255,255,255,0.2)'
|
color: 'rgba(255,255,255,0.2)'
|
||||||
}
|
}
|
||||||
}],
|
},
|
||||||
yAxes: [{
|
y: {
|
||||||
ticks: {
|
ticks: {
|
||||||
fontColor: '#ebedef'
|
color: '#ebedef'
|
||||||
},
|
},
|
||||||
gridLines: {
|
grid: {
|
||||||
color: 'rgba(255,255,255,0.2)'
|
color: 'rgba(255,255,255,0.2)'
|
||||||
}
|
}
|
||||||
}]
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
this.multiAxisOptions.scales.xAxes = [{
|
this.multiAxisOptions = {
|
||||||
ticks: {
|
stacked: false,
|
||||||
fontColor: '#ebedef'
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
labels: {
|
||||||
|
color: '#ebedef'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
x: {
|
||||||
|
ticks: {
|
||||||
|
color: '#ebedef'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
color: 'rgba(255,255,255,0.2)'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
gridLines: {
|
y: {
|
||||||
color: 'rgba(255,255,255,0.2)'
|
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: {
|
components: {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -40,13 +40,15 @@ export default {
|
||||||
label: 'First Dataset',
|
label: 'First Dataset',
|
||||||
data: [65, 59, 80, 81, 56, 55, 40],
|
data: [65, 59, 80, 81, 56, 55, 40],
|
||||||
fill: false,
|
fill: false,
|
||||||
borderColor: '#42A5F5'
|
borderColor: '#42A5F5',
|
||||||
|
tension: .4
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Second Dataset',
|
label: 'Second Dataset',
|
||||||
data: [28, 48, 40, 19, 86, 27, 90],
|
data: [28, 48, 40, 19, 86, 27, 90],
|
||||||
fill: false,
|
fill: false,
|
||||||
borderColor: '#FFA726'
|
borderColor: '#FFA726',
|
||||||
|
tension: .4
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
@ -56,37 +58,18 @@ export default {
|
||||||
label: 'Dataset 1',
|
label: 'Dataset 1',
|
||||||
fill: false,
|
fill: false,
|
||||||
borderColor: '#42A5F5',
|
borderColor: '#42A5F5',
|
||||||
yAxisID: 'y-axis-1',
|
yAxisID: 'y',
|
||||||
|
tension: .4,
|
||||||
data: [65, 59, 80, 81, 56, 55, 10]
|
data: [65, 59, 80, 81, 56, 55, 10]
|
||||||
}, {
|
}, {
|
||||||
label: 'Dataset 2',
|
label: 'Dataset 2',
|
||||||
fill: false,
|
fill: false,
|
||||||
borderColor: '#00bb7e',
|
borderColor: '#00bb7e',
|
||||||
yAxisID: 'y-axis-2',
|
yAxisID: 'y1',
|
||||||
|
tension: .4,
|
||||||
data: [28, 48, 40, 19, 86, 27, 90]
|
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: {
|
lineStylesData: {
|
||||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
datasets: [
|
datasets: [
|
||||||
|
|
@ -94,6 +77,7 @@ export default {
|
||||||
label: 'First Dataset',
|
label: 'First Dataset',
|
||||||
data: [65, 59, 80, 81, 56, 55, 40],
|
data: [65, 59, 80, 81, 56, 55, 40],
|
||||||
fill: false,
|
fill: false,
|
||||||
|
tension: .4,
|
||||||
borderColor: '#42A5F5'
|
borderColor: '#42A5F5'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -101,6 +85,7 @@ export default {
|
||||||
data: [28, 48, 40, 19, 86, 27, 90],
|
data: [28, 48, 40, 19, 86, 27, 90],
|
||||||
fill: false,
|
fill: false,
|
||||||
borderDash: [5, 5],
|
borderDash: [5, 5],
|
||||||
|
tension: .4,
|
||||||
borderColor: '#66BB6A'
|
borderColor: '#66BB6A'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -108,11 +93,81 @@ export default {
|
||||||
data: [12, 51, 62, 33, 21, 62, 45],
|
data: [12, 51, 62, 33, 21, 62, 45],
|
||||||
fill: true,
|
fill: true,
|
||||||
borderColor: '#FFA726',
|
borderColor: '#FFA726',
|
||||||
|
tension: .4,
|
||||||
backgroundColor: 'rgba(255,167,38,0.2)'
|
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 {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
const basicData = ref({
|
const basicData = ref(
|
||||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
{
|
||||||
datasets: [
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
{
|
datasets: [
|
||||||
label: 'First Dataset',
|
{
|
||||||
data: [65, 59, 80, 81, 56, 55, 40],
|
label: 'First Dataset',
|
||||||
fill: false,
|
data: [65, 59, 80, 81, 56, 55, 40],
|
||||||
borderColor: '#42A5F5'
|
fill: false,
|
||||||
},
|
borderColor: '#42A5F5',
|
||||||
{
|
tension: .4
|
||||||
label: 'Second Dataset',
|
},
|
||||||
data: [28, 48, 40, 19, 86, 27, 90],
|
{
|
||||||
fill: false,
|
label: 'Second Dataset',
|
||||||
borderColor: '#FFA726'
|
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-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 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'],
|
const lineStylesData = ref(
|
||||||
datasets: [
|
{
|
||||||
{
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
label: 'First Dataset',
|
datasets: [
|
||||||
data: [65, 59, 80, 81, 56, 55, 40],
|
{
|
||||||
fill: false,
|
label: 'First Dataset',
|
||||||
borderColor: '#42A5F5'
|
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'
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
scales: {
|
||||||
label: 'Second Dataset',
|
x: {
|
||||||
data: [28, 48, 40, 19, 86, 27, 90],
|
ticks: {
|
||||||
fill: false,
|
color: '#495057'
|
||||||
borderDash: [5, 5],
|
},
|
||||||
borderColor: '#66BB6A'
|
grid: {
|
||||||
},
|
color: '#ebedef'
|
||||||
{
|
}
|
||||||
label: 'Third Dataset',
|
},
|
||||||
data: [12, 51, 62, 33, 21, 62, 45],
|
y: {
|
||||||
fill: true,
|
ticks: {
|
||||||
borderColor: '#FFA726',
|
color: '#495057'
|
||||||
backgroundColor: 'rgba(255,167,38,0.2)'
|
},
|
||||||
|
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 }
|
return { basicData, multiAxisData, multiAxisOptions, lineStylesData, basicOptions }
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,8 +9,8 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<div class="card">
|
<div class="card p-d-flex p-jc-center">
|
||||||
<Chart type="pie" :data="chartData" :options="chartOptions" />
|
<Chart type="pie" :data="chartData" :options="chartOptions" style="width: 40%" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -65,18 +65,22 @@ export default {
|
||||||
},
|
},
|
||||||
getLightTheme() {
|
getLightTheme() {
|
||||||
return {
|
return {
|
||||||
legend: {
|
plugins: {
|
||||||
labels: {
|
legend: {
|
||||||
fontColor: '#495057'
|
labels: {
|
||||||
|
color: '#495057'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getDarkTheme() {
|
getDarkTheme() {
|
||||||
return {
|
return {
|
||||||
legend: {
|
plugins: {
|
||||||
labels: {
|
legend: {
|
||||||
fontColor: '#ebedef'
|
labels: {
|
||||||
|
color: '#ebedef'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -13,7 +13,7 @@ export default {
|
||||||
content: `
|
content: `
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Chart type="pie" :data="chartData" />
|
<Chart type="pie" :data="chartData" :options="lightOptions" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -30,6 +30,15 @@ export default {
|
||||||
hoverBackgroundColor: ["#64B5F6","#81C784","#FFB74D"]
|
hoverBackgroundColor: ["#64B5F6","#81C784","#FFB74D"]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
lightOptions: {
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
labels: {
|
||||||
|
color: '#495057'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -42,7 +51,7 @@ export default {
|
||||||
content: `
|
content: `
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Chart type="pie" :data="chartData" />
|
<Chart type="pie" :data="chartData" :options="lightOptions" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -62,7 +71,17 @@ export default {
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
||||||
return { chartData }
|
const lightOptions = ref({
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
labels: {
|
||||||
|
color: '#495057'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return { chartData, lightOptions }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
<\\/script>
|
<\\/script>
|
||||||
|
|
|
||||||
|
|
@ -9,8 +9,8 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<div class="card">
|
<div class="card p-d-flex p-jc-center">
|
||||||
<Chart type="polarArea" :data="chartData" :options="chartOptions" />
|
<Chart type="polarArea" :data="chartData" :options="chartOptions" style="width: 40%" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -73,28 +73,36 @@ export default {
|
||||||
},
|
},
|
||||||
getLightTheme() {
|
getLightTheme() {
|
||||||
return {
|
return {
|
||||||
legend: {
|
plugins: {
|
||||||
labels: {
|
legend: {
|
||||||
fontColor: '#495057'
|
labels: {
|
||||||
|
color: '#495057'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
scale: {
|
scales: {
|
||||||
gridLines: {
|
r: {
|
||||||
color: '#ebedef'
|
grid: {
|
||||||
|
color: '#ebedef'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
getDarkTheme() {
|
getDarkTheme() {
|
||||||
return {
|
return {
|
||||||
legend: {
|
plugins: {
|
||||||
labels: {
|
legend: {
|
||||||
fontColor: '#ebedef'
|
labels: {
|
||||||
|
color: '#ebedef'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
scale: {
|
scales: {
|
||||||
gridLines: {
|
r: {
|
||||||
color: 'rgba(255,255,255,0.2)'
|
grid: {
|
||||||
|
color: 'rgba(255,255,255,0.2)'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -12,7 +12,7 @@ export default {
|
||||||
content: `
|
content: `
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Chart type="polarArea" :data="chartData" />
|
<Chart type="polarArea" :data="chartData" :options="chartOptions" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -27,6 +27,22 @@ export default {
|
||||||
label: 'My dataset'
|
label: 'My dataset'
|
||||||
}],
|
}],
|
||||||
labels: ["Red","Green","Yellow","Grey","Blue"]
|
labels: ["Red","Green","Yellow","Grey","Blue"]
|
||||||
|
},
|
||||||
|
chartOptions: {
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
labels: {
|
||||||
|
color: '#495057'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
r: {
|
||||||
|
grid: {
|
||||||
|
color: '#ebedef'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -39,7 +55,7 @@ export default {
|
||||||
content: `
|
content: `
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Chart type="polarArea" :data="chartData" />
|
<Chart type="polarArea" :data="chartData" :options="chartOptions" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -57,7 +73,26 @@ export default {
|
||||||
labels: ["Red","Green","Yellow","Grey","Blue"]
|
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>
|
<\\/script>
|
||||||
|
|
|
||||||
|
|
@ -9,8 +9,8 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<div class="card">
|
<div class="card p-d-flex p-jc-center">
|
||||||
<Chart type="radar" :data="chartData" :options="chartOptions" />
|
<Chart type="radar" :data="chartData" :options="chartOptions" style="width: 40%" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -72,34 +72,48 @@ export default {
|
||||||
},
|
},
|
||||||
getLightTheme() {
|
getLightTheme() {
|
||||||
return {
|
return {
|
||||||
legend: {
|
plugins: {
|
||||||
labels: {
|
legend: {
|
||||||
fontColor: '#495057'
|
labels: {
|
||||||
|
color: '#495057'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
scale: {
|
scales: {
|
||||||
pointLabels: {
|
r: {
|
||||||
fontColor: '#495057'
|
pointLabels: {
|
||||||
},
|
color: '#495057',
|
||||||
gridLines: {
|
},
|
||||||
color: '#ebedef'
|
grid: {
|
||||||
|
color: '#ebedef',
|
||||||
|
},
|
||||||
|
angleLines: {
|
||||||
|
color: '#ebedef'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
getDarkTheme() {
|
getDarkTheme() {
|
||||||
return {
|
return {
|
||||||
legend: {
|
plugins: {
|
||||||
labels: {
|
legend: {
|
||||||
fontColor: '#ebedef'
|
labels: {
|
||||||
|
color: '#ebedef'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
scale: {
|
scales: {
|
||||||
pointLabels: {
|
r: {
|
||||||
fontColor: '#ebedef'
|
pointLabels: {
|
||||||
},
|
color: '#ebedef',
|
||||||
gridLines: {
|
},
|
||||||
color: 'rgba(255,255,255,0.2)'
|
grid: {
|
||||||
|
color: 'rgba(255,255,255,0.2)',
|
||||||
|
},
|
||||||
|
angleLines: {
|
||||||
|
color: 'rgba(255,255,255,0.2)'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -12,7 +12,7 @@ export default {
|
||||||
content: `
|
content: `
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Chart type="radar" :data="chartData" />
|
<Chart type="radar" :data="chartData" :options="chartOptions" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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: `
|
content: `
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Chart type="radar" :data="chartData" />
|
<Chart type="radar" :data="chartData" :options="chartOptions" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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>
|
<\\/script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue