Создание пользовательских всплывающих подсказок в диаграмме
Всплывающие подсказки используются для предоставления подробной информации о точках данных в виджете диаграммы. Всплывающая подсказка автоматически отображается при наведении указателя на точку данных во время выполнения. По умолчанию содержимое всплывающей подсказки в виджетах диаграммы создается с использованием данных из диаграммы или привязанного источника данных. Можно создавать пользовательские всплывающие подсказки для выполнения следующих действий:
• Предоставлять дополнительную информацию, относящуюся к точке данных на диаграмме.
• Локализовать содержимое всплывающей подсказки с помощью таблиц локализации.
• Показывать дополнительные данные из столбца в связанной таблице данных.
• Показывать более сложную информацию в нескольких строках.
Следующие диаграммы включают поддержку пользовательских всплывающих подсказок в ThingWorx 9.2 и более поздних версиях.
Можно настраивать содержимое и форматирование всплывающей подсказки с помощью свойства ValuesTooltip во всех поддерживаемых диаграммах.
 |
Диаграмма Парето имеет дополнительное свойство LineValuesTooltip, которое позволяет настраивать всплывающую подсказку линии накопительной процентной доли.
|
Создание пользовательской всплывающей подсказки
Чтобы добавить лексему локализации в Composer, выполните следующие действия.
1. Откройте таблицу локализации Default.
2. На вкладке Лексемы локализации щелкните Добавить. Откроется панель Новая лексема локализации.
3. В поле Имя введите имя лексемы.
4. В поле Значение лексемы введите пользовательское сообщение для всплывающей подсказки с помощью доступных переменных и опций форматирования диаграммы.
5. Щелкните значок 
, чтобы добавить лексему, а затем щелкните Сохранить, чтобы сохранить сущность.
, чтобы добавить лексему, а затем щелкните Сохранить, чтобы сохранить сущность.В приложение можно добавлять локализованные всплывающие подсказки для поддерживаемой языковой настройки. Чтобы добавить поддержку локализации для всплывающих подсказок, добавьте лексемы в каждую таблицу локализации в ThingWorx. Дополнительные сведения о работе с таблицами локализации см. в разделе Таблицы локализации.
Для отображения в виджете диаграммы пользовательской подсказки выполните в Mashup Builder следующие действия:
1. Выберите виджет диаграммы на канве, а затем откройте панель Свойства.
2. В поле ввода свойства ValuesTooltip укажите содержимое всплывающей подсказки одним из двух способов:
◦ Введите шаблон пользовательской всплывающей подсказки, используя доступные переменные и опции форматирования для выбранного виджета диаграммы.
◦ Щелкните значок 
и выберите лексему локализации с пользовательским сообщением всплывающей подсказки.
и выберите лексему локализации с пользовательским сообщением всплывающей подсказки.3. Щелкните Сохранить
Содержимое пользовательской всплывающей подсказки отображается при наведении указателя на точку данных на диаграмме во время выполнения.
Предопределенные переменные и опции форматирования
Для всех поддерживаемых виджетов диаграммы доступны следующие переменные и опции форматирования:
• #title# - текст отображается как заголовок перед первым разрывом строки. Задать заголовок можно только в начале сообщения всплывающей подсказки.
• #newline# - новый разрыв строки.
• ${Data:<Infotable-field>} - отображение значения в указанном поле таблицы данных.
• ${DataSourceN:<Infotable-field>} - отображение значения в указанном поле таблицы данных для источника данных. Используйте эту опцию, чтобы указать источник данных, если на диаграмме отображаются данные из нескольких источников.
В дополнение к глобальным переменным каждый виджет диаграммы поддерживает определенный набор переменных, которые отображают данные для диаграммы. В следующих разделах перечислены переменные и опции форматирования для виджетов диаграммы в Mashup Builder.
Столбчатая диаграмма и линейная диаграмма
При наведении указателя на полоску, столбик или точку данных отображаются всплывающие подсказки для виджета "Столбчатая диаграмма" и "Линейная диаграмма". Всплывающие подсказки по умолчанию определяются в лексемах локализации BarChartDefaultTooltip и LineChartDefaultTooltip следующим образом:
${label}, ${series}: ${value}
• ${label} - метка данных на оси.
• ${series} - наименование ряда данных для выбранной панели.
• ${value} - значение точки данных на оси.
Календарный план
Виджет "Календарный план" отображает всплывающие подсказки при выборе или наведении указателя на событие. Содержимое всплывающей подсказки определяется в лексеме локализации ScheduleChartDefaultTooltip следующим образом:
#title#${reason}#newline#Start: ${start}#newline#End: ${end}#newline#Duration: ${duration}
Для виджета "Календарный план" доступны следующие предопределенные переменные:
• ${reason} - причина события в календарном плане.
• ${start}- дата и время начала события.
• ${end} - дата и время окончания события.
• ${duration} - разница во времени между началом и окончанием события.
Дополнительные сведения о диаграмме "Календарный план" см. в разделе Виджет "Календарный план".
Диаграмма "Водопад"
В виджете "Диаграмма "Водопад" отображаются всплывающие подсказки при выборе или наведении указателя на полосу или столбик. Содержимое всплывающей подсказки определяется в лексеме локализации WaterfallChartDefaultTooltip следующим образом.
${label}, ${series}: ${value}#newline##step#${total} in total#step#
• ${label} - выбранная метка панели на оси.
• ${series} - наименование ряда данных для выбранной панели.
• ${value} - значение полосы на оси.
• ${total} - суммарное значение столбца.
• #step#<variables>#step# - используется для отображения различных всплывающих подсказок для суммарных столбцов в начале и в конце диапазона данных. Можно заключить части всплывающей подсказки между опциями #step#, чтобы отображать дополнительную информацию только для тех столбцов, которые представляют изменения итогового значения. Например, в подсказке по умолчанию следующая часть всплывающей подсказки отображается только для столбцов тенденции.
#step#${total} in total#step#
Диаграмма Парето
Виджет "Диаграмма Парето" поддерживает два типа пользовательских подсказок:
• ValuesTooltip - подсказка, отображаемая при выборе категории на диаграмме. Всплывающая подсказка по умолчанию сохраняется в лексеме ParetoChartDefaultTooltip в виде:
${label}, ${total}#newline#${series}, ${value}#newline#${perc} of total#newline#Cumulative value, ${percCum}
• LineValuesTooltip - подсказка, отображаемая при выборе точки данных на линии накопительного процента. Всплывающая подсказка по умолчанию сохраняется в лексеме ParetoChartLineDefaultTooltip в виде:
${label}, ${total}#newline#${perc} of total#newline#Cumulative value, ${percCum}
Доступны следующие предопределенные переменные:
• ${label} - метка точки данных на оси.
• ${series} - наименование ряда данных, частью которого является точка данных.
• ${value} - значение точки данных на оси.
• ${total} - итоговое значение.
• ${perc} - процент суммарного числа для всех категорий данных.
• ${percCum} - значение накопительной процентной доли данных.
Дополнительные сведения см. в разделе Виджет "Диаграмма Парето".
Пример Диаграмма Парето
При настройке содержимого всплывающей подсказки предопределенные переменные можно комбинировать с текстом. В следующем примере показаны пользовательские всплывающие подсказки для столбцов данных в виджете "Диаграмма Парето" с помощью свойства ParetoChartDefaultTooltip:
${label}: ${total}
Всплывающая подсказка показывает содержимое двух переменных: первая переменная содержит метку данных, а вторая - итоговое значение.
Создание многострочных всплывающих подсказок
Чтобы создать всплывающие подсказки, отображающие значения и текст на нескольких строках, можно добавлять разрывы строк. Чтобы отобразить вторую переменную и ее значение в новой строке, добавьте опцию #newline# в сообщение всплывающей подсказки:
${label}#newline#Frequency: ${total}
Содержимое сообщения после опции #newline# отображается на новой строке.
Добавление заголовка
Чтобы выделить метку категории в первой строке, добавьте опцию #Title# в начало всплывающей подсказки:
#title#${label}#newline#Frequency: ${total}
Заголовки выделяются с помощью шрифта большего размера и жирного шрифта. Они также отделяются от тела всплывающей подсказки разделительной линией.
| | Для форматирования первой строки всплывающей подсказки можно использовать только опцию #title#. |
Отображение содержимого из источника данных
В дополнение к предопределенным переменным, доступным для каждой диаграммы, можно отображать данные из таблицы данных с помощью следующих переменных:
Переменная | Данные | Описание |
|---|---|---|
${Data:<Infotable-field>} | Один источник | Отображает значения в указанном поле таблицы данных для текущей строки. |
${DataSourceN:<Infotable-field>} | Несколько источников | Отображает значение в указанном поле таблицы данных для источника данных. Используйте эту опцию, чтобы указать источник данных, если на диаграмме отображаются данные из нескольких источников. Замените N на номер свойства источника данных, а <Infotable-field> на имя столбца таблицы данных, содержащего значения, которые нужно отобразить. |
Эти переменные позволяют отображать содержимое из столбца таблицы данных. Например, можно отображать дополнительное содержимое для выбранных данных, которые не отображаются на диаграмме. На следующем изображении показан виджет "Линейная диаграмма" с одним набором данных. Диаграмма демонстрирует количественные выходные данные для производственной линии. В дополнение к ежедневным выходным данным на диаграмме в подсказке отображается среднее производство за последние три дня. Сообщение всплывающей подсказки определяется следующим образом:
${label}, ${series}: ${value}#newline#3-day avg: ${Data:3DayAvr}
Здесь ${Data:3DayAvr} - имя столбца, которое содержит среднее значение за три дня для каждой точки данных.
В этом примере всплывающая подсказка отображается для одного ряда данных. Если диаграмма содержит более одного ряда, то средние значения за три дня могут быть неприменимы ко всем рядам данных. Убедитесь, что значения пользовательской всплывающей подсказки применимы для каждого ряда данных на диаграмме. Дополнительные сведения о формате таблицы данных для каждой диаграммы см. в разделе для соответствующего виджета.