在chart.js中將x軸的標籤傾斜某種程度

我正在使用chart.js構建圖表。有沒有簡單的方法來將x軸標籤傾斜一定程度？有很多事情可以使它在Chart Js change text label orientation on Ox axis中傾斜。任何簡單的事情都可以做到？在chart.js中將x軸的標籤傾斜某種程度

來源

2016-02-10 Harnish

你要買僅旋轉x軸或旋轉整個圖形會適合你呢？ – bviale

只有Xaxis的標籤而不是整個Xaxis。 – Harnish

如果你想只是90度檢查http://stackoverflow.com/a/35039580/360067。順便說一句，您可以將鏈接到您的問題的答案中的擴展名移動到單獨的文件中 - 這將使代碼更加有組織，如果這正是您正在尋找的。 – potatopeelings

您可以擴展圖表來執行此操作 - 您覆蓋scale對象的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/

來源

2016-02-12 11:53:58 potatopeelings

謝謝。工作！ – Harnish

這有效，但由於某種原因，我的Y軸已經消失！任何想法爲什麼？：/如果我使用** Line **，則出現Y軸，如果我使用** LineAlt **，則不會。我看到它出現在你的jsfiddle中，更令我困惑的是。 –

好吧，我只需要將xScalePaddingLeft行更新爲scale.xScalePaddingLeft = firstRotated + scale.fontSize; –

在chart.js中將x軸的標籤傾斜某種程度

回答

相關問題