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

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

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

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

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

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

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

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

Edit:

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

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

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

Ответы

Ответ 1

В Google приведен пример здесь.

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

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

Вам также необходимо передать правильный вариант в диаграмму:

tooltip: {isHtml: true}

Я проверил это с помощью линейной диаграммы, и она работает.

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

Ответ 2

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

Очень удобно использовать вызов функции для возврата строки 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 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]));

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

The FocusTarget - вот что сбило меня с толку. HTH кто-то!

Ответ 4

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