angularjs – Angular Chart JS防止x标签导致溢出

发布时间：2020-12-17 18:03:02 所属栏目：安全来源：网络整理

导读：如何在图表结束后使用chart.js库阻止最后一个x轴标签导致延长空白区域？我还附加了我的图表的初始化和选项设置. this.colors = [{ backgroundColor:"rgba(128,203,196,0.45)",borderColor:"#80cbc4",pointBackgroundColor: "#80cbc4",pointBorderWidth: 2,h

enter image description here

如何在图表结束后使用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建议的那样,如果存在许多图表值,也可以使用标签旋转.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!