Google Charts时间轴中的虚拟行？

Question

我正在寻找一种方法在Google Charts Timelines中添加一个虚拟行。这是我想要实现的内容：

然而，虚拟行应该是透明的，并且不应该具有交互性（无工具提示、无选择事件等）。

这是我的解决方法：

这需要添加三列，会导致图表生成的工具提示消失。虽然这对我来说不是问题（因为我将自定义工具提示），但对其他人可能是问题。此外，虽然虚拟行是透明的，但仍然存在交互性（如我圈出的空工具提示所示）。解决方法是在chart.draw(dataTable)之前立即添加以下代码：this。

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);

虽然这在技术上是解决了我的问题，但最多只能算是一个hack。API中没有直接的方法来实现这个吗？

- Travis

---

有一个名为enableInteractivity的选项，但这会影响整个图表--根据我的经验，如果它能正常工作，就不要称其为hack...这个API需要很多操作。 - WhiteHat

Answer 1

在解决了这个问题之后，我更喜欢使用apexcharts包来创建时间轴图表。该包具有更灵活的界面来控制图表、坐标轴的最小和最大值、工具提示等。

- AksenovAN

Answer 2

这是一个已经存在一年的问题，但也许其他人会遇到同样的问题。你在第二个屏幕上的解决方案非常接近。你需要将正常行的工具提示值设置为null（将显示标准工具提示），并将虚拟项的工具提示设置为空字符串（工具提示将被隐藏）。在虚拟行上，样式列必须将不透明度设置为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')],
    ]);
}

- Łukasz Wilk