<template>
<div>
<div style="display:inline-block">
<canvas id="myChartBar" width="600" height="400"></canvas>
</div>
<div style="display:inline-block">
<canvas id="myChartLine" width="600" height="400"></canvas>
</div>
<div>
<canvas id="myChartPie" width="600" height="400"></canvas>
</div>
</div>
</template>
<script>
import Chart from 'chart.js/auto'
export default {
name: 'ChartDemo',
data () {
return {}
},
methods: {
initChartBar () {
var ctx = document.getElementById("myChartBar");
new Chart(ctx, {
type: 'bar',
data: {
labels: ["January","February"],
datasets: [
{
label: 'one', // Series name:
data: [12, 19], // numerical value
backgroundColor: 'red', // background color
hoverBackgroundColor: 'black', // Background color when the mouse passes over
borderWidth: 2, // border width
borderColor: 'black', // border color
hoverBorderColor: 'black', // Border color when mouse passes over
borderAlign:'inner', // Border alignment: 'center'(default)|'inner'
},
{
label: 'two',//series name:
data: [40, 60], // numerical value
barThickness: 20, // Thickness of the column
maxBarThickness: 30, // Maximum thickness of the column
backgroundColor: 'blue', // background color
hoverBackgroundColor: 'black', // Background color when the mouse passes over
borderWidth: 2, // border width
hoverBorderWidth: 10, // Border width when mouse passes over
borderRadius: 10, // border rounded corners
hoverBorderRadius: 10, // The border is rounded when the mouse passes over it
borderColor: 'black', // border color
hoverBorderColor: 'black', // Border color when mouse passes over
},
]
},
options: {
responsive: false, // responsive
plugins: {
customCanvasBackgroundColor:{
color: 'lightGreen'
},
title: {
display: true, //default false
align: 'start', // The default is center, other values are: start, end
text: 'This is title', // text
color: 'red', // font color
padding: 5, // Padding, number, or written as { bottom: number; top: number }
position: 'top', //default top, other values are: "left" | "top" | "bottom" | "right"
fullSize: true, //Default true, this box should occupy the full width of the canvas, if false, the box is placed above/beside the chart area
font: {
size: 45, // default:12
family: 'Helvetica Neue', // default:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
style: 'italic', //default normal, italic, oblique, initial, inherit
weight: 'bold', // normal | bold | bolder | lighter
lineHeight: 1.2 // default: 1.2
}
},
subtitle: {
display: true, //default false
align: 'start', // The default is center, other values are: start, end
text: 'This is subtitle', // text
color: '#999', // font color
padding: 5, // Padding, number, or written as { bottom: number; top: number }
position: 'top', //default top, other values are: "left" | "top" | "bottom" | "right"
fullSize: true, //Default true, this box should occupy the full width of the canvas, if false, the box is placed above/beside the chart area
font: {
size: 30, // default:12
family: 'Helvetica Neue', // default:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
style: 'normal', //default normal, italic, oblique, initial, inherit
weight: 'normal', // normal | bold | bolder | lighter
lineHeight: 1.2 // default: 1.2
}
},
tooltip: {
enabled: true, // Whether to enable, default true
backgroundColor: 'rgba(0, 0, 0, 0.8)', // background color
titleColor: 'yellow', // title color
titleFont: {
size: 50, // default:12
family: 'Helvetica Neue', // default:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
style: 'italic', //default normal, italic, oblique, initial, inherit
weight: 'bold', // normal | bold | bolder | lighter
lineHeight: 1.2 // default: 1.2
},
titleAlign: 'left', //Title alignment: 'left' (default),'right','center'
titleMarginBottom: 6, // The outer spacing at the bottom of the title
bodyColor: 'green', // body color
bodyFont: {
size: 50, // default:12
family: 'Helvetica Neue', // default:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
style: 'italic', //default normal, italic, oblique, initial, inherit
weight: 'bold', // normal | bold | bolder | lighter
lineHeight: 1.2 // default: 1.2
},
bodyAlign: 'left', //Body alignment: 'left' (default),'right','center'
borderColor: 'rgba(0, 0, 0, 0)', // border color
borderWidth: 2, // border width
padding: 10,
pointStyle:'rectRounded',
usePointStyle: true
},
legend: {
display: true, // true(default),false
position: 'top', //'top'(default),'left','bottom','right','chartArea'
align: 'center', //'center'(default),'start','center','end'
maxHeight: 100, // maximum height
maxWidth: 100, // maximum width
onClick: () => {}, // click event
onHover: () => {}, // after
onLeave: () => {}, // Leave
reverse: false, // false(default), when true, the order of the dataset is reversed
// legend title
title: {
color: 'red',
display: true,
padding: 10,
font: {}, // The font is exactly the same as the title
text: 'legend title'
}
},
},
// animation: false, // animation
animation: {
duration: 1000,
easing:'linear', // transition effect
delay: 1000, // milliseconds, how long to delay before displaying animation
loop: false, // If true, the animation will continue to loop
onProgress: () => {console.log('ing')}, // Animation in progress event
onComplete: () => {console.log('done')}, // animation completion event
},
scales: {
x: {
display: true, //default true
// x-axis scale related content
ticks: {
display: true, //default true
color:'red', // color
font: {}, // The font is exactly the same as the title
},
position: 'left',
title: {
display: true, //default false
text: 'Value',
color: '#191',
font: {
family: 'Times',
size: 20,
style: 'normal',
lineHeight: 1.2
},
padding: {top: 30, left: 0, right: 0, bottom: 0}
},
grid: {
display: true, // Whether to display, default false
color:'green',
lineWidth: 2
}
},
y: {
display: true, //default true
min: 0, // minimum value
max: 200, // maximum value
//Y-axis scale related content
ticks: {
display: true, //default true
color:'red', // color
font:{}, // The font is exactly the same as the title
},
position: 'left', //Positioning: left(default),right
title: {
display: true, //default false
text: 'Value', // text
color: '#191', // color
font: {
family: 'Times',
size: 20,
style: 'normal',
lineHeight: 1.2
},
padding: {top: 30, left: 0, right: 0, bottom: 0}
},
grid: {
display: true, // Whether to display, default true
color: 'red',
lineWidth: 2
}
},
}
}
});
},
initChartLine () {
var ctx = document.getElementById("myChartLine");
new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: 'one',
data: [12, 19, 32, 15, 62, 43], // numerical value
fill: false, // Whether to fill the area
borderWidth: 8,
borderColor: "red", // background color
hoverBorderColor: 'black', // Background color when mouse passes over
},
{
label: 'two', // series name
data: [32, 59, 13, 75, 27, 13], // numerical value
showLine: true, // Whether to display lines, default true
borderWidth: 2, // border width, that is, the width of the polyline
borderColor: "green", // border color
fill: true, // Whether to fill, the default is false, the background color is the fill color
backgroundColor: 'yellow', // takes effect when fill is true, the background color is the fill color
pointStyle:'triangle', // Inflection point style, other values are: 'circle' (circle), 'cross' (cross), 'crossRot' (cross), 'dash' (short horizontal bar), 'line' (long horizontal line), 'rect' (rectangle), 'rectRounded' (rounded rectangle), 'rectRot' (rhombus), 'star' star, 'triangle' (triangle), false,
pointBackgroundColor: 'orange', // Inflection point background color
pointBorderColor: '#666', // Inflection point border color
pointBorderWidth: 20, // Inflection point border width
pointRotation: 30, // Inflection point rotation angle
pointRadius: 5 //Inflection point radius
},
]
},
options: {
responsive: false, // responsive
plugins: {
customCanvasBackgroundColor:{
color: 'lightGreen'
},
tooltip: {
enabled: true, // Whether to enable, default true
backgroundColor: 'rgba(0, 0, 0, 0.8)', // background color
titleColor: 'yellow', // title color
titleFont: {
size: 50, // default:12
family: 'Helvetica Neue', // default:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
style: 'italic', //default normal, italic, oblique, initial, inherit
weight: 'bold', // normal | bold | bolder | lighter
lineHeight: 1.2 // default: 1.2
},
titleAlign: 'left', //Title alignment: 'left' (default),'right','center'
titleMarginBottom: 6, // The outer spacing at the bottom of the title
bodyColor: 'green', // body color
bodyFont: {
size: 50, // default:12
family: 'Helvetica Neue', // default:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
style: 'italic', //default normal, italic, oblique, initial, inherit
weight: 'bold', // normal | bold | bolder | lighter
lineHeight: 1.2 // default: 1.2
},
bodyAlign: 'left', //Body alignment: 'left' (default),'right','center'
borderColor: 'rgba(0, 0, 0, 0)', // border color
borderWidth: 2, // border width
padding: 10
},
legend: {
display: true, // true(default),false
position: 'top', //'top'(default),'left','bottom','right','chartArea'
align: 'center', //'center'(default),'start','center','end'
// legend label
labels: {
color:'purple', // label color
boxWidth: 100, // Box width (icon in front of text)
boxHeight: 100, // Box height (icon in front of text)
font: {},
padding: 10, //default 10
textAlign: 'center', //Alignment 'center'(default),'left', 'right'
pointStyle: 'crossRot', // Point style, icon in front of text, takes effect only when usePointStyle is true. Other values are: 'circle' (circle), 'cross' (cross), 'crossRot' (cross), 'dash '(short horizontal bar),'line'(long horizontal line),'rect'(rectangle),'rectRounded'(rounded rectangle),'rectRot'(rhombus),'star'star,'triangle'(triangle) ),false,
usePointStyle: true, // Whether to use point style, default false
},
maxHeight: 100, // maximum height
maxWidth: 100, // maximum width
onClick: () => {}, // click event
onHover: () => {}, // after
onLeave: () => {}, // leave
reverse: false, // false(default), when true, the order of the dataset is reversed
// legend title
title: {
color: 'red',
display: true,
padding: 10,
font: {}, // The font is exactly the same as the title
text: 'legend title'
}
},
},
// animation: false, // animation
animation: {
duration: 1000,
easing:'linear', // transition effect
delay: 1000, // milliseconds, how long to delay before displaying animation
loop: false, // If true, the animation will continue to loop
onProgress: () => {console.log('ing')}, // Animation in progress event
onComplete: () => {console.log('done')}, // animation completion event
},
scales: {
x: {
display: true, //default true
// x-axis scale related content
ticks: {
display: true, //default true
color:'red', // color
font: {}, // The font is exactly the same as the title
},
position: 'top',
title: {
display: true, //default false
text: 'Value',
color: '#191',
font: {
family: 'Times',
size: 20,
style: 'normal',
lineHeight: 1.2
},
padding: {top: 30, left: 0, right: 0, bottom: 0}
},
grid: {
display: true, // whether to display
}
},
y: {
display: true, //default true
min: 0, // minimum value
max: 200, // maximum value
//Y-axis scale related content
ticks: {
display: true, //default true
color:'red', // color
font:{}, // The font is exactly the same as the title
},
position: 'right', //Positioning: left(default),right
title: {
display: true, //default false
text: 'Value', // text
color: '#191', // color
font: {
family: 'Times',
size: 20,
style: 'normal',
lineHeight: 1.2
},
padding: {top: 30, left: 0, right: 0, bottom: 0}
},
grid: {
display: false, // Whether to display
}
},
}
}
});
},
initChartPie () {
var ctx = document.getElementById("myChartPie");
new Chart(ctx, {
type: 'pie',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
// label: 'one',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: ["red", "Blue", "Yellow", "Green", "Purple", "Orange"],
hoverBackgroundColor: 'black',
offset:100,
hoverOffset: 0,
borderWidth: 2,
borderColor: 'black',
hoverBorderColor: 'black',
borderAlign:'center'
},
]
},
options: {
responsive: false, // responsive
plugins: {
customCanvasBackgroundColor:{
color: 'lightGreen'
},
tooltip: {
enabled: true, // Whether to enable, default true
backgroundColor: 'rgba(0, 0, 0, 0.8)', // background color
titleColor: 'yellow', // title color
titleFont: {
size: 50, // default:12
family: 'Helvetica Neue', // default:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
style: 'italic', //default normal, italic, oblique, initial, inherit
weight: 'bold', // normal | bold | bolder | lighter
lineHeight: 1.2 // default: 1.2
},
titleAlign: 'left', //Title alignment: 'left' (default),'right','center'
titleMarginBottom: 6, // The outer spacing at the bottom of the title
bodyColor: 'green', // body color
bodyFont: {
size: 50, // default:12
family: 'Helvetica Neue', // default:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
style: 'italic', //default normal, italic, oblique, initial, inherit
weight: 'bold', // normal | bold | bolder | lighter
lineHeight: 1.2 // default: 1.2
},
bodyAlign: 'left', //Body alignment: 'left' (default),'right','center'
borderColor: 'rgba(0, 0, 0, 0)', // border color
borderWidth: 2, // border width
padding: 10
},
legend: {
display: true, // true(default),false
position: 'top', //'top'(default),'left','bottom','right','chartArea'
align: 'center', //'center'(default),'start','center','end'
// legend label
labels: {
color:'purple', // label color
boxWidth: 100, // Box width (icon in front of text)
boxHeight: 100, // Box height (icon in front of text)
font: {},
padding: 10, //default 10
textAlign: 'center', //Alignment 'center'(default),'left', 'right'
pointStyle: 'rectRot', // Point style, icon in front of text, takes effect only when usePointStyle is true. Other values are: 'circle' (circle), 'cross' (cross), 'crossRot' (cross), 'dash '(short horizontal bar),'line'(long horizontal line),'rect'(rectangle),'rectRounded'(rounded rectangle),'rectRot'(rhombus),'star'star,'triangle'(triangle) ),false,
usePointStyle: true, // Whether to use point style, default false
},
maxHeight: 100, // maximum height
maxWidth: 100, // maximum width
onClick: () => {}, // click event
onHover: () => {}, // after
onLeave: () => {}, // leave
reverse: false, // false(default), when true, the order of the dataset is reversed
// legend title
title: {
color: 'red',
display: true,
padding: 10,
font: {}, // The font is exactly the same as the title
text: 'legend title'
}
},
},
// animation: false, // animation
animation: {
duration: 1000,
easing:'linear', // transition effect
delay: 1000, // milliseconds, how long to delay before displaying animation
loop: false, // If true, the animation will always loop
onProgress: () => {console.log('ing')}, // Animation in progress event
onComplete: () => {console.log('done')}, // animation completion event
},
}
});
},
},
mounted () {
this.initChartBar();
this.initChartLine();
this.initChartPie();
}
}
</script>
<style scoped>
</style>