jqplot軸刻度標籤與省略號

我有一個應用程序，使用jqplot創建幾個圖表。jqplot軸刻度標籤與省略號

這是我遇到的麻煩其中一個圖表中的一個例子：

Chart Screenshot

正如你可以看到一些刻度標記的是很長，導致圖表渲染不正確。我正在使用$.jqplot.CanvasAxisTickRenderer來旋轉刻度標籤，因此我不認爲我可以使用CSS設計刻度標籤文本。有沒有一種方法可以使用CSS或格式化程序來縮短刻度標籤文本。

我正在尋找一種簡單縮短文本並添加類似於text-overflow : ellipsis CSS樣式的省略號的效果。

編輯：：

這裏是試圖CSS的方法實施後的新截圖。

Chart Screenshot2

正如你所看到的，絕對定位的刻度標記不太行了他們所代表的酒吧和他們去父容器外。回答中提供的css方法使用了90度旋轉，但我更喜歡60度旋轉，這會導致標籤與其各自的條形不一致。

來源

2014-02-11 Brian

試試這個：

從您的代碼中刪除tickRenderer屬性。欲瞭解更多信息JsFiddle Link 您可以根據需要更改最大寬度。

.jqplot-xaxis .jqplot-xaxis-tick { 
    max-width: 100px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -webkit-transform: rotate(90deg); 
    padding-left: 53px; 
    padding-top: 31px; 
}

來源

2014-02-12 00:16:40 Gyandeep

我試着用你的建議，但我得到了一些奇怪的行爲。我用新的截圖更新了我的原始問題。 – Brian

你必須玩填充，所以得到你需要的調整。如果您希望它們佔用較少的空間，請減小最大寬度。 – Gyandeep

終於我能夠做到這一點！基於該@ Gyandeep的回答，確切的JS和CSS我用的是，

的Javascript：

$('div.jqplot-xaxis-tick').each(function (i, obj) { 
    $(this).prop('title', ($(this).text())); 
    $(this).css('z-index', 999); // this is important otherwise mouseover won't trigger. 
});

CSS：

.jqplot-xaxis .jqplot-xaxis-tick { 
    position: absolute; 
    white-space: pre; 
    max-width: 92px; // Change it according to your need 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

JavaScript的部分需要後執行每個圖表的渲染。在繪製圖表之後將它們放在右邊，並在AJAX成功處理程序中放置。

來源

2014-03-19 12:02:56 Babu

jqplot軸刻度標籤與省略號

回答

相關問題