问题描述
我正在尝试在甘特图上添加一些自定义点。但是我看不到有任何正式的方法。
有谁知道我能做到这一点吗？
I'm trying to add some custom points on a Gantt charts. But I don't see any official way to do that.
Any one know how I can make this ?
我尝试在
I tried to add some point like triangle below
推荐答案
没有添加自定义点的标准选项，
，但是我们可以手动在图表的'ready'上添加事件。
there are no standard options to add custom points,
but we can manually add on the chart's 'ready' event.
请参阅以下工作片段，
函数 addMarker
see following working snippet,
function addMarker will add a triangle to the chart.
为行标签传递参数，为点放置日期传递参数，例如
pass arguments for row label and date for point placement, e.g.
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'，...
the size of the marker is specified in the 'points' attribute of the polygon element.
at the bottom of the addMarker function,
see the line for --> marker.setAttribute('points', ...
'points'应该是三组x，y坐标。
分别是顶部，左侧和右侧。
注意：添加四组x， y坐标会添加一个矩形标记。
the value of 'points' should be three sets of x,y coordinates.
top, left, & right respectively.
note: adding four sets of x,y coordinates would add a rectangle marker.
变量 xCoord & yCoord 是标记应放置的位置的x，y坐标，应该是标记的中心。
这样，以便绘制三角形...
top = xCoord +'，'+（yCoord-10）
left = （ xCoord-5）+'，'+ yCoord
right = （xCoord + 5）+'，'+ yCoord
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.
as such, in order to draw the triangle...
top = xCoord + ',' + (yCoord - 10)
left = (xCoord - 5) + ',' + yCoord
right = (xCoord + 5) + ',' + yCoord
总而言之，为了更改标记的大小，
我们更改了对变量 xCoord 的修饰符& yCoord
in summary, in order to change the size of the marker,
we change the modifiers made to the variables xCoord & yCoord
将标记的大小减小一半，
我们将如下更改坐标...
top = xCoor d +'，'+（yCoord-5）
left = （xCoord-2.5）+'，'+ yCoord
右边= （xCoord + 2.5）+'，'+ yCoord
to reduce the size of the marker by half,
we would change the coordinates as follows...
top = xCoord + ',' + (yCoord - 5)
left = (xCoord - 2.5) + ',' + yCoord
right = (xCoord + 2.5) + ',' + yCoord
eg
marker.setAttribute('points', xCoord + ',' + (yCoord - 5) + ' ' + (xCoord - 2.5) + ',' + yCoord + ' ' + (xCoord + 2.5) + ',' + yCoord);
这篇关于Google图表，如何在甘特图上添加自定义点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！