Google Charts - полный html во всплывающих подсказках

Я пытаюсь заставить Google Charts отображать пользовательские подсказки с полным HTML-кодом.

Я знаю, как включить всплывающие подсказки и передать соответствующие данные - проблема - даже когдаallowHTML Если эта опция включена, всплывающие подсказки отображаются в виде простого текста, поэтому, например, я не могу показать изображение во всплывающей подсказке.

Вот небольшой пример того, для чего я иду:

Что у меня сейчас:plain text in tooltip

Что я хочу:picture in tooltip

Одним из способов решения этой проблемы является отключение всплывающих подсказок, захват событий onmouseover и использование другой библиотеки (например, cluetip) для отображения всплывающих подсказок в курсоре, но мне было интересно, есть ли более чистый, родной способ включить такую функцию в Google Charts.

Также, пожалуйста, проверьте мой другой вопрос об изображениях в качестве маркеров точек в Google Chart.

Edit:

Тем временем я нашел очень хорошую и довольно недорогую (60 $ за лицензию веб-сайта) библиотеку, которая покрывает эту функциональность:Библиотека Highcharts

Как вы можете видеть в примере, можно передать функцию, которая будет форматировать всплывающие подсказки - достаточно легко, мы могли бы добавить специальное свойство к каждой точке данных, содержащей URL-адрес, который можно использовать для динамической загрузки содержимого всплывающих подсказок. Затем можно кэшировать всплывающие подсказки, добавляя дополнительное свойство к каждой точке данных в серии. Я реализовал это таким образом, и он работает отлично.

Надеюсь, что последнее изменение поможет кому-то.

Ответы на вопрос(4)

Я должен был добавить{p: {html: true}} для каждой строки данных вместо столбца, а такжеisHtml вариант для всего графика.

В настоящее время это работает для меня:

Шаг 1: убедитесь, что ОБА из этих настроек есть в настройках вашего графика:

// This line makes the entire category's tooltip active.
focusTarget: 'category',
// Use an HTML tooltip.
tooltip: { isHtml: true }

Шаг 2: добавьте всплывающую подсказку в один из столбцов диаграммы:

dataTable.addColumn({'type': 'string', 'role': 'tooltip' , 'p': {'html': true}});

Шаг 3. В свои данные добавьте HTML-код для всплывающей подсказки в соответствующем столбце:

chartReading.push(chartSensorTooltip(obsDate, reading[1]));

Метод & quot; chartSensorTooltip (дата, число) & quot; это метод JS, который я сам написал для правильного форматирования HTML для каждого значения & apos; подсказка Вам не нужно писать такой метод, но, как кто-то из вышеизложенных, это позволяет очень легко отформатировать все всплывающие подсказки одинаковым образом.

Фокус-цель - это то, что сбило меня с толку. HTH кто-то!

 31 янв. 2018 г., 02:25
Вот Это Да! & Quot; focusTarget & quot; не было даже на горизонте для меня. Это как раз то, что мне нужно.

Эта функция была невероятно неясной! Ключом для меня, как отмечалось ранее, было добавление "quot ;," a '; p' a: {{'a html': true} & quot; при использовании «addColumn ()» определить всплывающую подсказку; 'draw ()'; option & apos; tooltip: {isHtml: true} & apos; одного недостаточно.

Очень удобно использовать вызов функции для возврата строки HTML при создании массива «graphItems». который передается в "addRows ()":

function myToolTip(row) {
    return '<div style="white-space: nowrap; padding:5px;"><b>' + row.name + '</b><br>' +
        '

Больше здесь: https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content

+ row.worth + ' B, <b>' + _scope.sortBy + '</b>: ' + row[_scope.sortBy] + '</div>'; } var graphItems = []; angular.forEach(_scope.ForbesList, function(row, key) { graphItems.push([key, row.worth, myToolTip(row)]); }); var data = new google.visualization.DataTable(); data.addColumn('number', 'Rank'); data.addColumn('number', 'Worth'); data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}}); data.addRows(graphItems);

Больше здесь: https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content

Гугл приводит примерВот.

Вам нужно будет указать столбец как подсказку html:

data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

Вам также нужно будет указать правильную опцию на вашем графике:

tooltip: {isHtml: true}

Я проверил это с линейным графиком, и это работает.

Изменить: Это также выглядит (по крайней мере, для линейного графика) вы должны использоватьоболочка диаграммы чтобы это работало. Я не могу заставить его повиноваться опциям без оболочки.

 28 дек. 2012 г., 01:56
Эта функция, HTML Tooltip, была недавно выпущена 24.09.2012. (developers.google.com/chart/interactive/docs/…)

Ваш ответ на вопрос