Google чарты, как добавить пользовательские баллы на диаграммах Ганта? - PullRequest
Новая
       44

Google чарты, как добавить пользовательские баллы на диаграммах Ганта?

0 голосов
/ 23 января 2019

Я пытаюсь добавить несколько пользовательских точек на диаграммах Ганта. Но я не вижу никакого официального способа сделать это.
Кто-нибудь знает, как я могу это сделать?

Я попытался добавить некоторую точку, например, треугольник ниже enter image description here

1 Ответ

0 голосов
/ 23 января 2019

Стандартных опций для добавления пользовательских точек нет,
, но мы можем вручную добавить событие '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>
...