谷歌图表，如何在甘特图上添加自定义点？

Posted 2023-05-08

【中文标题】谷歌图表，如何在甘特图上添加自定义点？

【英文标题】：Google charts, how to add custom points on Gantt Charts?

【发布时间】：2019-06-17 04:07:25

【问题描述】：

我正在尝试在甘特图上添加一些自定义点。但我没有看到任何官方方法可以做到这一点。 有谁知道我怎么做这个？

我尝试在下面添加一些点，例如三角形

【参考方案1】：

没有添加自定义点的标准选项， 但我们可以手动添加图表的'ready' 事件。

请参阅以下工作 sn-p， 函数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);

【讨论】：

在上面的例子中，我们如何减小三角形（Marker）的大小？

请参阅上面的 更新 -- 如果您觉得这有帮助，我们将不胜感激...

@谢谢！它有帮助。