如何在图表结束后使用chart.js库阻止最后一个x轴标签导致延长空白区域？
我还附加了我的图表的初始化和选项设置.
this.colors = [{
backgroundColor:"rgba(128,203,196,0.45)",borderColor:"#80cbc4",pointBackgroundColor: "#80cbc4",pointBorderWidth: 2,hoverBorderColor:"#80cbc4",pointBorderColor:"#fff",pointRadius: 5,pointHoverRadius:5
}];
this.options = {
scales: {
yAxes: [
{
id: 'y-axis-1',type: 'linear',display: true,position: 'left',ticks : {
beginAtZero : true,fontColor: 'rgba(0,0.7)',callback: this.displayNumeric,fontSize: 13
}
}
],xAxes: [
{
gridLines : {
display : false
},ticks : {
callback: value => {
switch (this.period) {
case "hour":
return moment(value).format("hh:mma");
break;
case "day":
return moment(value).format("MMM DD");
break;
case "week":
return moment(value).format("MMM DD");
break;
case "month":
return moment(value).format("MMM");
break;
default:
return value.toString();
break;
}
}
}
}
]
},elements: {
line: {
borderWidth : 2,tension: 0
}
}
解决方法
请参阅此示例：
https://jsfiddle.net/9r6nt0tu/
您可以向图表添加10px的右边距并扩展回调函数,通过返回空字符串来隐藏最后一个标签.
callback: (value,index,values) => {
// don't show last tick label
if (index+1 >= values.length) {
return '';
}
...
}
正如K Scandrett建议的那样,如果存在许多图表值,也可以使用标签旋转.
