javascript - Google 图表时间轴的虚拟行？

Question

我正在寻找一种向 Google Charts Timelines 添加虚拟行的方法.这是我要实现的目标:

但是，虚拟行应该是透明的并且不应该有交互性(没有工具提示，没有选择事件等)。

这是我的解决方法:

这需要再添加三列，并且您会丢失图表生成的工具提示。虽然这对我来说不是问题(因为我将自定义工具提示)，但对其他人来说可能是个问题。此外，虽然虚拟行是透明的，但仍然存在交互性(如我圈出的空工具提示所示)。 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')],
    ]);
}