问题描述
我只想在条形图上显示 y = 0 处的 x 轴,即下面显示的绿线。
我应该使用什么 chart.js/chartkick 配置来实现这一点?还是我必须直接绘制它?如果是这样,我该如何实现?
目前,我有以下 chart.js 配置,它删除了包括所需 x 轴在内的所有行。
library: {
scales: {
yAxes: [{
ticks: {
display: false,},gridLines: {
display: false,}
}],xAxes: [{
ticks: {
display: false,gridLines: {
display: false
}
}],}
解决方法
假设您使用的是 Chart.js 版本 2.9.4,这可以通过如下定义 yAxis.gridLines
来完成:
gridLines: {
lineWidth: 0,zeroLineWidth: 3,zeroLineColor: 'rgb(101,157,52)',z: 10
}
有关单个 grid line options 的更多详细信息,请参阅 Chart.js v2.9 文档。
请看下面的可运行代码,看看它是如何工作的。
new Chart('chart',{
type: 'bar',data: {
labels: ['A','B','C'],datasets: [{
label: 'My Dataset',data: [50,-15,30],backgroundColor: 'rgba(0,255,0.2)',borderColor: 'rgb(0,255)',borderWidth: 2
}]
},options: {
legend: {
display: false
},scales: {
yAxes: [{
ticks: {
display: false
},gridLines: {
lineWidth: 0,z: 10
}
}],xAxes: [{
ticks: {
display: false
},gridLines: {
display: false
}
}]
}
}
});
canvas {
max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="120"></canvas>