在chart.js中将x轴的标签倾斜到某个角度

Question

我正在使用chart.js构建图表。有没有简单的方法将x轴标签倾斜到某种程度？为了使它在Chart Js change text label orientation on Ox axis中倾斜，已经做了很多工作。有什么简单可以做到的吗？

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);

小提琴 - http://jsfiddle.net/vvLttjz4/