0
눈금 선이 거짓으로 표시된 막 대형 차트가 있습니다. 자, 축선 (x와 y)에 대해서만 너비와 색상을 설정해야합니다. 내가 눈금 선을 숨길 때눈금 선이 숨겨져있을 때 ChartJS 막 대형 차트의 축 스타일 편집
options:{
scales: {
xAxes: [{
gridLines: {
color: "rgba(0,0,0,1)",
lineWidth: 1
}
}],
yAxes: [{
gridLines: {
color: "rgba(0,0,0,1)",
lineWidth: 1
}
}],
}
}
그러나, 나는 단지 축에, 유행에 따라 디자인 (폭 또는 색상)을 설정할 수 없습니다입니다 : 나는 이러한 값을 설정할 수 있습니다.
options:{
scales: {
xAxes: [{
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false
}
}],
}
}
나는 scaleLineColor를 시도했지만 그 역시 작동하지 않는 것 같습니다.
var q1 = document.getElementById("q1").getContext('2d');
var q1Chart = new Chart(q1, {
type: 'bar',
data: {
labels: ["Very Good(9-10)","Good(8-7)","OK(5-6)","Bad (3-4)","Cant be worse (0-2)"],
datasets: [{
label: "Our Performance",
data: [19.56,37.90,1.29,30.36,10.89],
backgroundColor: ["#d93030","#288fba","#367fa9","#367fa9","#367fa9"],
datalabels: {
align: 'top',
anchor: 'end',
font: {
size: 18,
weight: 900,
},
formatter: function(value) {
var label = value;
var keys, klen, k;
return label + '%';
}
}
}]
},
scaleLineColor: "rgba(0,0,0,1)",
options:{
scales: {
xAxes: [{
barThickness : 50,
ticks: {
fontColor: "black",
fontSize: 20,
autoSkip: false,
},
gridLines: {
display:false
}
}],
yAxes: [{
ticks: {
fontColor: "black",
fontSize: 20,
beginAtZero: true,
stepSize: 10
},
gridLines: {
display:false
}
}],
},
responsive: false,
maintainAspectRatio: true,
legend: {
display: false
},
tooltips: {
enabled: false
},
layout: {
padding: {
left: 0,
right: 0,
top: 30,
bottom: 0
}
}
},
});
감사를 많이 할 플러그인을 작성하는 것입니다 : 여기에 내 전체 코드입니다. 매력처럼 작동합니다! – gentrobot