Question

如何在图表结束后使用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,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
                }
            }

Answer 1

请参阅此示例：https://jsfiddle.net/9r6nt0tu/

您可以向图表添加10px的右边距，并展开callback函数，通过返回空字符串隐藏最后一个标签。

callback: (value,index,values) => {
  // don't show last tick label
  if (index+1 >= values.length) {
    return '';
  }

  ...
}

正如K Scandrett建议的那样，如果存在许多图表值，也可以使用标签旋转。

Answer 2

您可以通过强制轮换来消除这些额外的空格：

xAxes: [{
   ticks: {
      autoSkip: false,
      maxRotation: 45,
      minRotation: 45
   }
}]

这是一个带有前后http://jsbin.com/dorapekizo/edit?html,js,output

的演示

最初的想法来自https://stackoverflow.com/a/39706742/1544886

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

2 个答案: