Google Charts Timelines 的虛擬行？

Question

我正在尋找一種向Google Charts Timelines添加虛擬行的方法。 這是我想要完成的：

但是，虛擬行應該是透明的並且不應該具有交互性（沒有工具提示、沒有選擇事件等）。

這是我的解決方法：

這需要再添加三列，並且您會丟失 Charts 生成的工具提示。 雖然這對我來說不是問題（因為我將自定義工具提示），但對其他人來說可能是問題。 此外，雖然虛擬行是透明的，但仍然存在交互性（如我圈出的空工具提示所示）。 這種情況的解決方法是立即之前添加以下代碼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

這已經是一個老問題了，但也許其他人會遇到同樣的問題。 您在第二個屏幕上的解決方案非常接近。 您需要將普通行上的工具提示值設置為 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')],
    ]);
}

Answer 2

解決了這個問題后，我更喜歡使用apexcharts包來創建時間線圖表。 這個包有更靈活的界面來控制圖表、軸的最小值和最大值、工具提示等。