Google图表，如何在甘特图上添加自定义点？ [英] Google charts, how to add custom points on Gantt Charts?

问题描述

我正在尝试在甘特图上添加一些自定义点。但是我看不到有任何正式的方法。

有谁知道我能做到这一点吗？

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图表，如何在甘特图上添加自定义点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！