在ChartJS中使x标签水平

Question

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

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

Answer 1

如果您使用的是chart.js 2.x,只需在ticks选项中设置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函数

\n\n

calculateXLabelRotation : function(){\n    ...\n        //\xe2\x86\x93\xe2\x86\x93\xe2\x86\x93\n        this.xLabelRotation = 0;\n        //\xe2\x86\x91\xe2\x86\x91\xe2\x86\x91\n        if (this.xLabelRotation > 0){\n            this.endPoint -= Math.sin(toRadians(this.xLabelRotation))*originalLabelWidth + 3;\n        }\n    ...\n},\n

\n