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

Я использую EXTJs 6.5. Я разработал гистограмму, в которой длина метки категории по оси x слишком велика и перекрывает метку. Поэтому для временного исправления я добавил ниже код, чтобы обрезать значение до 15 символов, чтобы показать постфикс значений с тремя точками.

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

Проблема, с которой я сталкиваюсь, заключается в том, что я не могу добавить какой-либо HTML-контент для метки, например, чтобы обернуть метку словами или добавить какую-либо всплывающую подсказку.

введите здесь описание изображения


extjs extjs6-classic extjs6.5 extjs6.5.1
person Mani    schedule 03.02.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

<сильный>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);
}

person ground_call    schedule 04.02.2020
comment
Применяя решение кода всплывающей подсказки, я получаю Uncaught ReferenceError: всплывающая подсказка не определена - person Mani; 04.02.2020
comment
Ну да, вам нужно определить переменную всплывающей подсказки и настроить ее по своему усмотрению. - person ground_call; 04.02.2020
comment
Не могли бы вы помочь мне, где я должен это определить. Извините, что беспокою, но не могу разобраться. - person Mani; 04.02.2020
comment
@Mani, это твой полный лейбл. Без фрами. Просто строка - person pvlt; 04.02.2020
comment
@pvlt тебя не понял. - person Mani; 05.02.2020
comment
@Mani, я отредактировал фрагмент кода. Я полагаю, вы хотели добиться чего-то подобного. - person ground_call; 05.02.2020
comment
Это не сработало, он показывает вывод как undefined. - person Mani; 06.02.2020
comment
Для получения дополнительной помощи предоставьте работающую скрипту fiddle.sencha.com. - person ground_call; 06.02.2020
comment
@Mani: Если решение все-таки помогло вам, примите ответ. - person ground_call; 17.02.2020
comment
@ground_call извините, но в моей кодовой базе решение не сработало, и у меня не было много времени, чтобы поместить пример кода в скрипку. Мы просто изменили требование и не реализовали это. - person Mani; 29.02.2020