在ChartJS中使x标签水平 [英] Make x label horizontal in ChartJS

问题描述

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

Drawing a line chart with ChartJS 1.0.1 as above. As it shows, the label in the x-axis is not horizontal although there are enough space. How can I make it horizontal?

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

A side question, noticed the y label, there are 1-2px clipped. How to fix that?

推荐答案

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

If you are using chart.js 2.x, just set maxRotation: 0 and minRotation: 0 in ticks options. If you want them vertical, set maxRotation: 90 and minRotation: 90 instead. And if you want to all x-labels, you may want to set autoSkip: false. The following is an example.

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

0度的例子

example of 0 degree

90度
的例子

example of 90 degree

这篇关于在ChartJS中使x标签水平的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！