Как добавить всплывающую подсказку в диаграмму для метки поля категории x в EXT JS 6.5.x

Question

Я использую EXT Js 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. Стиль

Несмотря на ограниченность, стили могут быть добавлены к метке диаграммы. Полные опции здесь .

Пример (проверено в этой документации fiddle ):

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);
}