График временной шкалы Google с несколькими ролями - PullRequest
Новая
       2

График временной шкалы Google с несколькими ролями

0 голосов
/ 27 января 2020

Я пытаюсь нарисовать временную диаграмму и добавить две роли столбцов, одну для ссылки HTML (роль столбца всплывающей подсказки), а другую для стиля (стиля). Я могу успешно использовать любой из них, но не оба одновременно. Например, вот пример моего кода: 

var container = document.getElementById('mychart');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Position' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'string', role: 'style' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addColumn({ type: 'string', role: 'tooltip', id: 'link', 'p': {'html': true} });

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

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

1 Ответ

0 голосов
/ 27 января 2020

Для того, чтобы столбец имел гиперссылку, на которую можно кликнуть, вам нужен дополнительный фрагмент кода: 

google.visualization.events.addListener(chart, 'select', function () {
    var selection = chart.getSelection();
    if (selection.length > 0) {
      window.open(dataTable.getValue(selection[0].row, 3), '_blank');
    }
    });

Моя единственная строка данных для целей отладки: 

dataTable.addRows([
['My text here', 'bar label', '#676767', 'https://www.google.com', new Date(2019, 12, 22), new Date(2019, 12, 26)]]);

У меня был перемешал колонны вокруг и указывал на неправильный столбец. Просто пришлось перейти в правый столбец выше, чтобы заставить его работать (столбец 3, начиная с нуля).

...