如何在圖表中為 EXTJS 6.5.x 中的 x 類別字段標簽添加工具提示

Question

我正在使用 EXTJs 6.5。 我設計了一個條形圖，其中 x 軸類別標簽長度太大而與標簽重疊。 因此，為了臨時修復，我添加了以下代碼以將值修剪為 15 個字符，以顯示帶有三個點的后綴值。

{
type: 'category',
position: 'bottom',
fields: 'name',
renderer: function(item, label, lastLabel) {
  return Ext.util.Format.ellipsis(label, 15);
}

我面臨的問題是我無法為標簽添加任何 Html 內容，例如對標簽進行自動換行或添加任何工具提示。

Answer 1

1.造型

盡管受到限制，但可以將樣式添加到圖表標簽。 完整選項在這里。

示例（在本文檔小提琴中測試）：

 axes: { type: 'category', position: 'bottom', fields: ['name'], label: { rotation: 270, color: 'red' }, title: { text: 'Sample Values', fontSize: 15 } },

2. 工具提示

要將工具提示添加到您的標簽，您可以執行以下操作：

（編輯代碼片段以滿足您的需要）

 renderer: function(item, label, lastLabel) { var trimmedLabel = Ext.util.Format.ellipsis(label, 15); return Ext.String.format("<div data-qtip="{0}">{1}</div>", label, trimmedLabel); }