var config = {
type: 'horizontalBar' // 그래프 type
, data: {
labels: labels
, datasets: [{
data: data
, backgroundColor: [
'#4dc9f6',
'#f67019',
'#f53794',
'#537bc4', // 색상
'#acc236',
'#166a8f',
'#00a950',
]
, fill: false
}]
}
, options: {
maintainAspectRatio: false // true로 하면 width와 height 크기 변화됨.
, responsive: true // 반응형 설정
, scales: {
xAxes: [{ // X 축 관련
barThickness: 40
, gridLines: {
display: false
}
, ticks: { // X 축 0부터 시작해서 0.5만큼 커지면서 최대 5.0까지 표현
beginAtZero: true,
max:5.0,
stepSize:0.5
}
, display: true
}]
, yAxes: [{ // Y 축 관련
gridLines: {
display: false
}
, ticks: {
beginAtZero: true
}
}]
}
,tooltips: { // data 배열을 숫자로 변경 후 소수 2번째 자리까지 표현
callbacks: {
label: function (tooltipItem, data) {
return Number(tooltipItem.xLabel).toFixed(2);
}
}
}
, legend: {
display: false
}
}
};