谷歌圖表，如何在甘特圖上添加自定義點？

Question

我正在嘗試在甘特圖上添加一些自定義點。 但我沒有看到任何官方方法可以做到這一點。
有誰知道我怎么做這個？

我試着在下面添加一些像三角形的點

Answer 1

沒有添加自定義點的標准選項，
但我們可以手動添加圖表的'ready'事件。

請參閱以下工作片段，
函數addMarker將向圖表添加一個三角形。

傳遞行標簽的參數和點放置的日期，例如

addMarker('Find sources', new Date(2019, 0, 3));
addMarker('Outline paper', new Date(2019, 0, 5, 12));
addMarker('Write paper', new Date(2019, 0, 8));

 google.charts.load('current', { packages:['gantt'] }).then(function () { var container = document.getElementById('gantt'); var chart = new google.visualization.Gantt(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn('string', 'Task ID'); dataTable.addColumn('string', 'Task Name'); dataTable.addColumn('string', 'Resource'); dataTable.addColumn('date', 'Start Date'); dataTable.addColumn('date', 'End Date'); dataTable.addColumn('number', 'Duration'); dataTable.addColumn('number', 'Percent Complete'); dataTable.addColumn('string', 'Dependencies'); dataTable.addRows([ ['Research', 'Find sources', null, new Date(2019, 0, 1), new Date(2019, 0, 5), null, 100, null], ['Write', 'Write paper', 'write', null, new Date(2019, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'], ['Cite', 'Create bibliography', 'write', null, new Date(2019, 0, 7), daysToMilliseconds(1), 20, 'Research'], ['Complete', 'Hand in paper', 'complete', null, new Date(2019, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'], ['Outline', 'Outline paper', 'write', null, new Date(2019, 0, 6), daysToMilliseconds(1), 100, 'Research'] ]); var dateRangeStart = dataTable.getColumnRange(3); var dateRangeEnd = dataTable.getColumnRange(4); var formatDate = new google.visualization.DateFormat({ pattern: 'MM/dd/yyyy' }); var rowHeight = 45; var options = { height: ((dataTable.getNumberOfRows() * rowHeight) + rowHeight), gantt: { criticalPathEnabled: true, criticalPathStyle: { stroke: '#e64a19', strokeWidth: 5 } } }; function daysToMilliseconds(days) { return days * 24 * 60 * 60 * 1000; } function drawChart() { chart.draw(dataTable, options); } function addMarker(markerRow, markerDate) { var baseline; var baselineBounds; var chartElements; var marker; var markerSpan; var rowLabel; var svg; var svgNS; var gantt; var ganttUnit; var ganttWidth; var timespan; var xCoord; var yCoord; // initialize chart elements baseline = null; gantt = null; rowLabel = null; svg = null; svgNS = null; chartElements = container.getElementsByTagName('svg'); if (chartElements.length > 0) { svg = chartElements[0]; svgNS = svg.namespaceURI; } chartElements = container.getElementsByTagName('rect'); if (chartElements.length > 0) { gantt = chartElements[0]; } chartElements = container.getElementsByTagName('path'); if (chartElements.length > 0) { Array.prototype.forEach.call(chartElements, function(path) { if ((baseline === null) && (path.getAttribute('fill') !== 'none')) { baseline = path; } }); } chartElements = container.getElementsByTagName('text'); if (chartElements.length > 0) { Array.prototype.forEach.call(chartElements, function(label) { if (label.textContent === markerRow) { rowLabel = label; } }); } if ((svg === null) || (gantt === null) || (baseline === null) || (rowLabel === null) || (markerDate.getTime() < dateRangeStart.min.getTime()) || (markerDate.getTime() > dateRangeEnd.max.getTime())) { return; } // calculate placement ganttWidth = parseFloat(gantt.getAttribute('width')); baselineBounds = baseline.getBBox(); timespan = dateRangeEnd.max.getTime() - dateRangeStart.min.getTime(); ganttUnit = (ganttWidth - baselineBounds.x) / timespan; markerSpan = markerDate.getTime() - dateRangeStart.min.getTime(); // add marker marker = document.createElementNS(svgNS, 'polygon'); marker.setAttribute('fill', 'transparent'); marker.setAttribute('stroke', '#ffeb3b'); marker.setAttribute('stroke-width', '3'); xCoord = (baselineBounds.x + (ganttUnit * markerSpan) - 4); yCoord = parseFloat(rowLabel.getAttribute('y')); marker.setAttribute('points', xCoord + ',' + (yCoord - 10) + ' ' + (xCoord - 5) + ',' + yCoord + ' ' + (xCoord + 5) + ',' + yCoord); svg.insertBefore(marker, rowLabel.parentNode); } google.visualization.events.addListener(chart, 'ready', function () { // add marker for current date addMarker('Find sources', new Date(2019, 0, 3)); addMarker('Outline paper', new Date(2019, 0, 5, 12)); addMarker('Write paper', new Date(2019, 0, 8)); }); window.addEventListener('resize', drawChart, false); drawChart(); });

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

---

更新

標記的大小在多邊形元素的'points'屬性中指定。
在addMarker函數的底部，
請參閱 --> marker.setAttribute('points', ...

'points'的值應該是三組 x,y 坐標。
分別是上、左、右。
注意：添加四組 x,y 坐標將添加一個矩形標記。

變量xCoord & yCoord是計算出的 x,y 坐標，標記應該放置的位置，並且應該是標記的中心。
因此，為了繪制三角形......
頂部 = xCoord + ',' + (yCoord - 10)
左 = (xCoord - 5) + ',' + yCoord
右 = (xCoord + 5) + ',' + yCoord

總之，為了改變標記的大小，
我們更改對變量xCoord和yCoord所做的修飾符

將標記的大小減少一半，
我們將更改坐標如下...
頂部 = xCoord + ',' + (yCoord - 5)
左 = (xCoord - 2.5) + ',' + yCoord
右 = (xCoord + 2.5) + ',' + yCoord

例如

marker.setAttribute('points', xCoord + ',' + (yCoord - 5) + ' ' + (xCoord - 2.5) + ',' + yCoord + ' ' + (xCoord + 2.5) + ',' + yCoord);