Вопрос по javascript, charts, google-visualization – Google Charts - полный html во всплывающих подсказках

13

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

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

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

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

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

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

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

Edit:

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

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

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

Ваш Ответ

4   ответа
0

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

25

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

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

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

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

tooltip: {isHtml: true}

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

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

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

Эта функция была невероятно неясной! Ключом для меня, как отмечалось ранее, было добавление "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>' +
        '$' + 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

3

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

Шаг 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 кто-то!

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

Похожие вопросы