Flot - 如何在水平條形圖的中間製作yaxis標籤位置？

Question

我有一個負值和正值的Flot條形圖，這樣我可以使圖表看起來像龍捲風圖表（一些棘手的方式），然後問題是，我不能將yaxis標籤位置設置爲中間值的圖表。

這裏是我的代碼示例代碼：http://fiddle.jshell.net/ha2egeuk/31/

下面是簡單的代碼我用做它的中心：

.flot-y-axis > .tickLabel{ 
    left: 277px !important; 
} 

的問題是，我設置它是靜態的。如何使它成爲汽車中心？

Answer 1

要居中y軸標籤畫布裏面，你可以使用這樣的事情：

.flot-y-axis > .tickLabel{ 
    left: calc(50% - 50px) !important; 
    text-align: center !important; 
    width: 100px; // set to a size large enought for all labels ans use half of this in the calculation for the left option 
} 

這裏更新撥弄着上面的樣式：http://fiddle.jshell.net/ha2egeuk/32/

中的問題小提琴是圖表沒有使用畫布的全部寬度（從圖表的左側開始，不像圖表本身）。所以標籤在畫布中居中，但不在圖表中。

我還沒有找到這種差異的原因。但是當你有一張充滿整個畫布的圖表時，上面的解決方案就可以工作。

Answer 2

試試這個CSS。

.flot-y-axis > .tickLabel { left:45% !important; } 

Answer 3

在我的情況下，我只是一個畫布，沒有額外的CSS類來處理。

yaxis: { 
    tickLength: 10, 
    tickColor: '#fff' 
}