在 chart.js 中将 x 轴的标签倾斜一定程度

Question

我正在使用 chart.js 构建图表。有什么简单的方法可以将 x 轴标签倾斜一定程度吗？在中做了很多事情让它倾斜。任何简单的事情都可以做到吗？

Answer 1

您可以扩展图表来执行此操作 - 您可以覆盖比例对象的 calculateXLabelRotation 方法。

预览

脚本

Chart.types.Line.extend({
  name: "LineAlt",
  initialize: function() {
    Chart.types.Line.prototype.initialize.apply(this, arguments);

    var scale = this.scale;
    var chart = this.chart;
    scale.calculateXLabelRotation = function() {
      var originalLabelWidth = Chart.helpers.longestText(chart.ctx, scale.font, scale.xLabels);
      var firstWidth = ctx.measureText(scale.xLabels[0]).width;
      var firstRotated = Math.cos(Chart.helpers.radians(scale.xLabelRotation)) * firstWidth;
      scale.xLabelRotation = 45;
      scale.endPoint -= Math.sin(Chart.helpers.radians(scale.xLabelRotation)) * originalLabelWidth + 3;
      scale.xScalePaddingLeft = firstRotated + scale.fontSize / 2;
    }
    this.scale.fit();
  }
});

然后

...
new Chart(ctx).LineAlt(data);

Fiddle - http://jsfiddle.net/vvLttjz4/

在 chart.js 中将 x 轴的标签倾斜一定程度

Tilting the labels of the x axis to some degrees in chart.js

javascript

chart.js

labels