Фиктивные строки для графиков Google

Question

Я ищу способ добавить фиктивную строку в Временные шкалы Google Charts .Вот что я пытаюсь сделать:

Однако фиктивная строка должна быть прозрачной и не должна иметь интерактивности (без всплывающей подсказки, без выборасобытие и т. д.).

Вот мой обходной путь:

Это требует добавления еще трех столбцов, и вы теряете сгенерированную подсказкупо графикам.Хотя это не проблема для меня (так как я буду настраивать всплывающие подсказки), это может быть для других.Кроме того, хотя фиктивная строка прозрачна, она все еще имеет интерактивность (как указано в пустой всплывающей подсказке, которую я обвел).Обходной путь для this заключается в добавлении следующего кода непосредственно перед chart.draw(dataTable):

function onMouseOver(e) {
    var tooltips = document.getElementsByClassName('google-visualization-tooltip');

    for (var i = 0; i < tooltips.length; i++) {
        if (!tooltips[i].innerHTML) {
            tooltips[i].style.display = 'none';
        }
    }
}

function onReady() {
    google.visualization.events.addListener(chart, 'onmouseover', onMouseOver);
}

google.visualization.events.addListener(chart, 'ready', onReady);

Хотя это технически решение моей проблемы, это взломв лучшем случае.Нет ли простого способа сделать это с помощью API?

Answer 1

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

google.charts.load('current', { packages: ['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    const container = document.getElementById('timeline');
    const chart = new google.visualization.Timeline(container);
    const dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', label: 'President', id: 'President' });
    dataTable.addColumn({ type: 'string', id: 'Empty label' });
    dataTable.addColumn({ type: 'string', id: 'style', role: 'style' });
    dataTable.addColumn({ type: 'string', id: 'tooltip', role: 'tooltip', p: { html: true } });
    dataTable.addColumn({ type: 'date', label: 'Start', id: 'Start' });
    dataTable.addColumn({ type: 'date', label: 'End', id: 'End' });

    dataTable.addRows([
        ['A', '', 'opacity: 0', '', new Date('2018-06-05T00:00:00'), new Date('2018-06-05T00:00:00')],
        ['B', '', 'opacity: 0', '', new Date('2018-06-05T00:00:00'), new Date('2018-06-05T00:00:00')],
        ['C', '', 'opacity: 0', '', new Date('2018-06-05T00:00:00'), new Date('2018-06-05T00:00:00')],
        ['A', '', null, null, new Date('2018-06-05T01:00:00'), new Date('2018-06-05T02:00:00')],
        ['B', '', null, null, new Date('2018-06-05T01:00:00'), new Date('2018-06-05T02:00:00')],
        ['C', '', null, null, new Date('2018-06-05T01:00:00'), new Date('2018-06-05T02:00:00')],
    ]);
}