Rotate Flot Tick Labels

我試圖旋轉我的圖表底部的日期以顯示垂直與水平。我正在使用flot-tickrotor，但它似乎不能正常工作。Rotate Flot Tick Labels

xaxis: { 
    rotateTicks: 110, 
    mode: "time", 
    timeformat: "%m/%d", 
    minTickSize: [7, "day"], 
    ticks: cpudatearray 
}

最終結果是不正確的，它都顯得混亂。 enter image description here

來源

2012-08-30 Blake

有關此解決方案的任何想法？ – Blake

你可能有更好的運氣只是用CSS處理這，而不是在使用插件：

#flotPlaceholder div.xAxis div.tickLabel 
{  
    transform: rotate(-90deg); 
    -ms-transform:rotate(-90deg); /* IE 9 */ 
    -moz-transform:rotate(-90deg); /* Firefox */ 
    -webkit-transform:rotate(-90deg); /* Safari and Chrome */ 
    -o-transform:rotate(-90deg); /* Opera */ 
    /*rotation-point:50% 50%;*/ /* CSS3 */ 
    /*rotation:270deg;*/ /* CSS3 */ 
}

明顯變化的角度來不管它是你想要的目的。如果您想將此用於Y軸，只需更改div.xAxis選擇器。在我自己的海軍報圖測試後

結果： enter image description here

來源

2012-10-11 18:21:00

感謝您的回覆 - 圖表必須在IE8中顯示，所以我認爲這不會起作用。 – Blake

對於較舊的IE版本，您可以嘗試使用'filter：progid：DXImageTransform.Microsoft.BasicImage（rotation = 3）;'（或可能是'-ms-filter：'）。請參見此[回覆]（http://stackoverflow.com/questions/9051030/rotating-text-with-css-and-ie）和此[MS參考]（http://msdn.microsoft.com/zh-cn/ -us/library/ms532918.aspx） –

另一種選擇是加載[jqueryrotate]（http://code.google.com/p/jqueryrotate/）並在完成繪圖後，可以調用'$（「＃ flotPlaceholder div.xAxis div.tickLabel「）。rotate（270）'。請注意，我沒有使用這個包，他的文檔指出只有更新的版本3支持旋轉所有元素類型。舊版本顯然只適用於圖像。我遇到的另一個選項似乎很有趣。 –

@布倫丹的答案看起來像它可能工作得相當好，但是您實現之前，我會考慮這是否是你真正想從做可用性的角度。

如果您顯示的文本的最大長度爲5個字符（來自您的問題，'MM DD'字符串），如果您僅爲每個第三個「標記」添加標籤，則圖表可能會更容易閱讀然而，很多對你的數據有意義）。

我在儀表板式應用程序中對我的圖表進行了類似的練習。用戶堅持認爲每個結果都需要一個X標籤，但由於圖表有96個刻度，所以一旦我將它們旋轉90度，就會創建相當多的文本，就像您正在嘗試的那樣。當我向他們展示一個帶有水平X標籤的模型時，他們更喜歡這個選項，這就是我們爲交付的解決方案所採用的方案。（您的里程可能會有所不同..）

來源

2012-10-11 19:02:18

我實際上同意你關於間隔標籤的偏好，你可以看到我的標籤每3個月（這是在生產中，雖然沒有旋轉）的情況。但是，該設計選擇取決於@布萊克 - 亞當斯。也許他還有其他原因希望輪換。或者，也許用戶只需要看到間隔出來的版本旁邊的旋轉版本，以決定他們也更喜歡它;） –

同意。我的意圖不是暗示你的解決方案是不正確的（畢竟它確實回答了這個問題）。我只是想強調@布萊克 - 亞當斯可能沒有想到的設計考慮因素（因爲我有一個非常相似的圖表來顯示）。 –

Rotate Flot Tick Labels

回答

相關問題