[英]Google charts, how to add custom points on Gantt Charts?
there are no standard options to add custom points,没有添加自定义点的标准选项,
but we can manually add on the chart's 'ready'
event.但我们可以手动添加图表的
'ready'
事件。
see following working snippet,请参阅以下工作片段,
function addMarker
will add a triangle to the chart.函数
addMarker
将向图表添加一个三角形。
pass arguments for row label and date for point placement, eg传递行标签的参数和点放置的日期,例如
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>
UPDATE更新
the size of the marker is specified in the 'points'
attribute of the polygon element.标记的大小在多边形元素的
'points'
属性中指定。
at the bottom of the addMarker
function,在
addMarker
函数的底部,
see the line for --> marker.setAttribute('points', ...
请参阅 -->
marker.setAttribute('points', ...
the value of 'points'
should be three sets of x,y coordinates. 'points'
的值应该是三组 x,y 坐标。
top, left, & right respectively.分别是上、左、右。
note: adding four sets of x,y coordinates would add a rectangle marker.注意:添加四组 x,y 坐标将添加一个矩形标记。
the variables xCoord
& yCoord
are the calculated x,y coordinates of where the marker should be placed, and should be the center of the marker.变量
xCoord
& yCoord
是计算出的 x,y 坐标,标记应该放置的位置,并且应该是标记的中心。
as such, in order to draw the triangle...因此,为了绘制三角形......
top = xCoord + ',' + (yCoord - 10)
顶部 =
xCoord + ',' + (yCoord - 10)
left = (xCoord - 5) + ',' + yCoord
左 =
(xCoord - 5) + ',' + yCoord
right = (xCoord + 5) + ',' + yCoord
右 =
(xCoord + 5) + ',' + yCoord
in summary, in order to change the size of the marker,总之,为了改变标记的大小,
we change the modifiers made to the variables xCoord
& yCoord
我们更改对变量
xCoord
和yCoord
所做的修饰符
to reduce the size of the marker by half,将标记的大小减少一半,
we would change the coordinates as follows...我们将更改坐标如下...
top = xCoord + ',' + (yCoord - 5)
顶部 =
xCoord + ',' + (yCoord - 5)
left = (xCoord - 2.5) + ',' + yCoord
左 =
(xCoord - 2.5) + ',' + yCoord
right = (xCoord + 2.5) + ',' + yCoord
右 =
(xCoord + 2.5) + ',' + yCoord
eg例如
marker.setAttribute('points', xCoord + ',' + (yCoord - 5) + ' ' + (xCoord - 2.5) + ',' + yCoord + ' ' + (xCoord + 2.5) + ',' + yCoord);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.