chart.js:隐藏y轴的特定刻度,隐藏所有x轴的网格线
chart.js: hide specific ticks in y-axis and hide all x-axis grid line
编辑
我正在使用 charts.js 库,我想知道是否可以从我的 y 轴隐藏特定的刻度,例如,我定义了刻度的 min:0 和 max:100 它显示了从 0 到 100 的所有十的倍数的值,但我只想显示 0、50 e 100。(已解决)
另一个问题是我想删除所有 x 轴的网格线,但是方法 "gridLines.display : false" 不会隐藏图表开头的第一条垂直线,只是隐藏其他的。
这就是我想要的样子:http://i.stack.imgur.com/GryIo.png
脚本
var humdays = document.getElementById("charthumdays");
var humdaysChart = new Chart(humdays, {
type: 'bar',
data: {
labels: ["15 mar", "16 mar", "17 mar", "18 mar", "19 mar", "20 mar", "21 mar"],
datasets: [{
label: "humidity",
data: [60, 20, 30, 50, 60, 80, 90],
backgroundColor: "#D9B090",
hoverBackgroundColor: 'rgba(217,176,144,0.8)'
}]
},
options: {
scales: {
xAxes : [{
gridLines : {
display : false
}
}],
yAxes: [{
ticks: {
min:0,
max:100
}
}]
}
}
});
humdaysChart.options.legend.display = false;
为 scales/yAxes
使用 afterBuildTicks 选项
yAxes: [{
ticks: {
min: 0,
max: 100
},
afterBuildTicks: function(humdaysChart) {
humdaysChart.ticks = [];
humdaysChart.ticks.push(0);
humdaysChart.ticks.push(50);
humdaysChart.ticks.push(100);
}
}]
或者你也可以使用'stepSize'
yAxes: [{
ticks: {
min:0,
max:100,
stepSize:50
}
}]
编辑
我正在使用 charts.js 库,我想知道是否可以从我的 y 轴隐藏特定的刻度,例如,我定义了刻度的 min:0 和 max:100 它显示了从 0 到 100 的所有十的倍数的值,但我只想显示 0、50 e 100。(已解决)
另一个问题是我想删除所有 x 轴的网格线,但是方法 "gridLines.display : false" 不会隐藏图表开头的第一条垂直线,只是隐藏其他的。
这就是我想要的样子:http://i.stack.imgur.com/GryIo.png
脚本
var humdays = document.getElementById("charthumdays");
var humdaysChart = new Chart(humdays, {
type: 'bar',
data: {
labels: ["15 mar", "16 mar", "17 mar", "18 mar", "19 mar", "20 mar", "21 mar"],
datasets: [{
label: "humidity",
data: [60, 20, 30, 50, 60, 80, 90],
backgroundColor: "#D9B090",
hoverBackgroundColor: 'rgba(217,176,144,0.8)'
}]
},
options: {
scales: {
xAxes : [{
gridLines : {
display : false
}
}],
yAxes: [{
ticks: {
min:0,
max:100
}
}]
}
}
});
humdaysChart.options.legend.display = false;
为 scales/yAxes
使用 afterBuildTicks 选项yAxes: [{
ticks: {
min: 0,
max: 100
},
afterBuildTicks: function(humdaysChart) {
humdaysChart.ticks = [];
humdaysChart.ticks.push(0);
humdaysChart.ticks.push(50);
humdaysChart.ticks.push(100);
}
}]
或者你也可以使用'stepSize'
yAxes: [{
ticks: {
min:0,
max:100,
stepSize:50
}
}]