如何禁用 Y 轴上的标签文本但保持网格线在 Chart.js 2.6 中?
How do I disable Label Text on Y-Axis but keep the gridlines in Chart.js 2.6?
使用 Chart.js 2.6 尝试将图形配置为具有网格线但 Y 轴上没有标签。这是我的配置选项:
var wowOptions = {
scaleBeginAtZero: false,
responsive: true,
maintainAspectRatio: false,
scaleStartValue: -50,
legend: {
display: false
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: false,
offsetGridLines: true,
zeroLineColor: "red"
},
ticks: {
stepSize: 4,
autoSkip: true
}
}],
yAxes: [{
display: false,
gridLines: {
display: true,
offsetGridLines: false,
drawOnChartArea: true,
drawBorder: false
}
}]
}
当我设置 display: false 时,它会禁用 Y 轴上的网格线和标签:
当我为 yAxes 设置 display: true 时,我看到了 gridLines 和标签:
我试图松开标签 -50、0、50、100 但保留网格线。有办法吗?
提前致谢,
格里夫
您正在为 y 轴本身设置 display: false
,而您需要为 y 轴的 个刻度设置它,就像这样...
options: {
scales: {
yAxes: [{
ticks: {
display: false
}
}]
},
...
}
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ⧩
var ctx = document.getElementById("canvas").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 5]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
display: false
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>
使用 Chart.js 2.6 尝试将图形配置为具有网格线但 Y 轴上没有标签。这是我的配置选项:
var wowOptions = {
scaleBeginAtZero: false,
responsive: true,
maintainAspectRatio: false,
scaleStartValue: -50,
legend: {
display: false
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: false,
offsetGridLines: true,
zeroLineColor: "red"
},
ticks: {
stepSize: 4,
autoSkip: true
}
}],
yAxes: [{
display: false,
gridLines: {
display: true,
offsetGridLines: false,
drawOnChartArea: true,
drawBorder: false
}
}]
}
当我设置 display: false 时,它会禁用 Y 轴上的网格线和标签:
当我为 yAxes 设置 display: true 时,我看到了 gridLines 和标签:
我试图松开标签 -50、0、50、100 但保留网格线。有办法吗?
提前致谢, 格里夫
您正在为 y 轴本身设置 display: false
,而您需要为 y 轴的 个刻度设置它,就像这样...
options: {
scales: {
yAxes: [{
ticks: {
display: false
}
}]
},
...
}
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ⧩
var ctx = document.getElementById("canvas").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 5]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
display: false
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>