在ChartJS中使x标签水平

Question

使用ChartJS 1.0.1绘制折线图，​​如上所示。如图所示，尽管有足够的空间，但x轴上的标签不是水平的。我怎样才能让它水平？

一个侧面问题，注意到y标签，有1-2px剪裁。如何解决？

Answer 1

如果您使用的是chart.js 2.x，只需在刻度线选项中设置 maxRotation：0 和 minRotation：0 。如果您希望它们垂直，请设置 maxRotation：90 和 minRotation：90 。如果您想要所有x标签，您可能需要设置 autoSkip：false 。以下是一个例子。

var myChart = new Chart(ctx, {
  type: 'bar',
  data: chartData,
  options: {
    scales: {
      xAxes: [{
        ticks: {
          autoSkip: false,
          maxRotation: 0,
          minRotation: 0
        }
      }]
    }
  }
});

0度的例子

90度的例子

Answer 2

尝试修复chart.js中的函数calculateXLabelRotation

calculateXLabelRotation : function(){
    ...
        //↓↓↓
        this.xLabelRotation = 0;
        //↑↑↑
        if (this.xLabelRotation > 0){
            this.endPoint -= Math.sin(toRadians(this.xLabelRotation))*originalLabelWidth + 3;
        }
    ...
},