如何將自定義標記添加到 Google 時間線圖表？

Question

我想在 Google 時間線圖表上添加標記，如下所示Timeline Chart with Markers

我目前正在遵循此處給出的解決方案： Google Charts Add Layer On Top Of Timeline 。 但是，這里需要有一個時間線元素，只有這樣標記才能出現在它上面。 但是，我想要一種可以在行中該位置沒有任何時間線數據的情況下添加標記的方法。 是否有用於在 Google 時間線中添加標記的內置功能，或者不需要添加虛擬時間線的自定義方式。

Answer 1

沒有用於添加標記的內置功能。
由於您參考的答案是自定義解決方案，
我們可以修改解決方案以滿足我們的需求。

我們不一定需要時間軸元素來放置標記。
但我們確實需要數據，以便繪制時間線，
在其上放置標記。

開箱即用，時間線會將 x 軸限制為數據中找到的日期范圍。

但是我們可以設置一個自定義的 x 軸范圍，使它更大，
並為沒有時間線元素的標記留出更多空間。

hAxis: {
  minValue: dateRangeStart,
  maxValue: dateRangeEnd,
}

請參閱以下工作片段...

 google.charts.load('current', { packages:['timeline'] }).then(function () { var container = document.getElementById('timeline'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({type: 'string', id: 'Row'}); dataTable.addColumn({type: 'string', id: 'Bar'}); dataTable.addColumn({type: 'date', id: 'Start'}); dataTable.addColumn({type: 'date', id: 'End'}); var currentYear = (new Date()).getFullYear(); dataTable.addRows([ ['Row 1', 'A-1', new Date(currentYear, 0, 1), new Date(currentYear, 2, 31)], ['Row 1', 'A-2', new Date(currentYear, 3, 1), new Date(currentYear, 5, 30)], ['Row 2', 'B-1', new Date(currentYear, 6, 1), new Date(currentYear, 8, 31)], ['Row 2', 'B-2', new Date(currentYear, 9, 1), new Date(currentYear, 11, 31)] ]); var dataTableGroup = google.visualization.data.group(dataTable, [0]); var dateRangeStart = new Date(currentYear - 1, 0, 1); var dateRangeEnd = new Date(currentYear + 1, 11, 31); var rowHeight = 44; var options = { height: (dataTableGroup.getNumberOfRows() * rowHeight) + rowHeight, hAxis: { minValue: dateRangeStart, maxValue: dateRangeEnd, } }; function drawChart() { chart.draw(dataTable, options); } // add custom marker function addMarkers(events) { var baseline; var baselineBounds; var chartElements; var labelFound; var labelText; var marker; var markerLabel; var markerSpan; var rowLabel; var svg; var svgNS; var timeline; var timelineUnit; var timelineWidth; var timespan; var xCoord; var yCoord; // initialize chart elements baseline = null; svg = null; svgNS = null; timeline = null; chartElements = container.getElementsByTagName('svg'); if (chartElements.length > 0) { svg = chartElements[0]; svgNS = svg.namespaceURI; } chartElements = container.getElementsByTagName('rect'); if (chartElements.length > 0) { timeline = chartElements[0]; } chartElements = container.getElementsByTagName('path'); if (chartElements.length > 0) { baseline = chartElements[0]; } if ((svg === null) || (timeline === null) || (baseline === null)) { return; } timelineWidth = parseFloat(timeline.getAttribute('width')); baselineBounds = baseline.getBBox(); timespan = dateRangeEnd.getTime() - dateRangeStart.getTime(); timelineUnit = (timelineWidth - baselineBounds.x) / timespan; // add events events.forEach(function (event) { // find row label rowLabel = dataTable.getValue(event.row, 0); chartElements = container.getElementsByTagName('text'); if (chartElements.length > 0) { Array.prototype.forEach.call(chartElements, function(label) { if (label.textContent.indexOf('…') > -1) { labelText = label.textContent.replace('…', ''); } else { labelText = label.textContent; } if (rowLabel.indexOf(labelText) > -1) { markerLabel = label.cloneNode(true); } }); } // calculate placement markerSpan = event.date.getTime() - dateRangeStart.getTime(); // add label markerLabel.setAttribute('text-anchor', 'start'); markerLabel.setAttribute('fill', event.color); markerLabel.setAttribute('x', (baselineBounds.x + (timelineUnit * markerSpan) + 6)); markerLabel.textContent = event.name; svg.appendChild(markerLabel); // add marker xCoord = (baselineBounds.x + (timelineUnit * markerSpan) - 4); yCoord = parseFloat(markerLabel.getAttribute('y')); switch (event.type) { case 'triangle': marker = document.createElementNS(svgNS, 'polygon'); marker.setAttribute('fill', 'transparent'); marker.setAttribute('stroke', event.color); marker.setAttribute('stroke-width', '3'); marker.setAttribute('points', xCoord + ',' + (yCoord - 10) + ' ' + (xCoord - 5) + ',' + yCoord + ' ' + (xCoord + 5) + ',' + yCoord); svg.appendChild(marker); break; case 'circle': marker = document.createElementNS(svgNS, 'circle'); marker.setAttribute('cx', xCoord); marker.setAttribute('cy', yCoord - 5); marker.setAttribute('r', '6'); marker.setAttribute('stroke', event.color); marker.setAttribute('stroke-width', '3'); marker.setAttribute('fill', 'transparent'); svg.appendChild(marker); break; } }); } google.visualization.events.addListener(chart, 'ready', function () { addMarkers([ {row: 0, date: new Date(currentYear - 1, 1, 11), name: 'Event 1', type: 'triangle', color: 'red'}, {row: 1, date: new Date(currentYear + 1, 5, 23), name: 'Event 2', type: 'circle', color: 'purple'}, {row: 3, date: new Date(currentYear + 1, 8, 2), name: 'Event 3', type: 'triangle', color: 'magenta'} ]); }); window.addEventListener('resize', drawChart, false); drawChart(); });

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="timeline"></div>