在chart.js中将x轴的标签倾斜到一定程度 [英] Tilting the labels of the x axis to some degrees in chart.js

问题描述

我正在使用chart.js构建图表.有没有简单的方法可以将x轴标签倾斜到一定程度?做了很多事情使它倾斜在

---

脚本

  Chart.types.Line.extend({名称:"LineAlt"，初始化: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();}}); 

然后

  ...新的Chart(ctx).LineAlt(数据); 

---

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

I am constructing a chart using chart.js. Is there any simple method to tilt the x axis labels to some degrees? There was a lot of things done to make it tilt in Chart Js change text label orientation on Ox axis. Anything simple can be done?

解决方案

You can extend the chart to do this - you override the calculateXLabelRotation method of the scale object.

---

Preview(s)

---

Script

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

and then

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

---

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

这篇关于在chart.js中将x轴的标签倾斜到一定程度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！