代码之家 › 专栏 › 技术社区 › Aaron Ullal

谷歌图表在时间线上添加层

google-chartwrapper google-visualization charts javascript

0

Aaron Ullal · 技术社区 · 6 年前

我想在时间线上画出一系列有开始和结束日期的事件。谷歌图表库似乎通过时间线图表类型提供了特定的功能。

我还需要绘制单个、准时的事件(不仅仅是在开始/结束时间跨度内发生的事件),并用圆、三角形或其他符号表示它们。

我想知道是否可以在时间安排?或者添加自定义形状来表示具有匹配的当前/结束日期的事件?

任何洞察都是伟大的!

1 回复 | 直到 6 年前

1

0

WhiteHat 6 年前

没有可用于添加其他层/自定义形状的标准选项。

但是一旦图表的SVG 'ready' 事件火灾。

请参见以下工作片段,
功能 addMarkers 将为给定的日期和行添加自定义形状。

传递要添加到图表中的“事件”数组。

addMarkers([
  {row: 0, date: new Date(currentYear, 1, 11), name: 'Event A', type: 'triangle', color: 'yellow'},
  {row: 2, date: new Date(currentYear, 10, 15), name: 'Event B', type: 'circle', color: 'lime'}
]);

google.charts.load('current', {
  packages:['timeline']
}).then(function () {
  var container = document.getElementById('timeline');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({type: 'string', id: 'Row'});
  dataTable.addColumn({type: 'string', id: 'Bar'});
  dataTable.addColumn({type: 'date', id: 'Start'});
  dataTable.addColumn({type: 'date', id: 'End'});
  var currentYear = (new Date()).getFullYear();
  dataTable.addRows([
    ['Row 1', 'A-1', new Date(currentYear, 0, 1), new Date(currentYear, 2, 31)],
    ['Row 1', 'A-2', new Date(currentYear, 3, 1), new Date(currentYear, 5, 30)],
    ['Row 2', 'B-1', new Date(currentYear, 6, 1), new Date(currentYear, 8, 31)],
    ['Row 2', 'B-2', new Date(currentYear, 9, 1), new Date(currentYear, 11, 31)]
  ]);
  var dataTableGroup = google.visualization.data.group(dataTable, [0]);
  var dateRangeStart = dataTable.getColumnRange(2);
  var dateRangeEnd = dataTable.getColumnRange(3);
  var rowHeight = 44;
  var options = {
    height: (dataTableGroup.getNumberOfRows() * rowHeight) + rowHeight
  };

  function drawChart() {
    chart.draw(dataTable, options);
  }

  // add custom marker
  function addMarkers(events) {
    var baseline;
    var baselineBounds;
    var chartElements;
    var labelFound;
    var labelText;
    var marker;
    var markerLabel;
    var markerSpan;
    var rowLabel;
    var svg;
    var svgNS;
    var timeline;
    var timelineUnit;
    var timelineWidth;
    var timespan;
    var xCoord;
    var yCoord;

    // initialize chart elements
    baseline = null;
    svg = null;
    svgNS = null;
    timeline = null;
    chartElements = container.getElementsByTagName('svg');
    if (chartElements.length > 0) {
      svg = chartElements[0];
      svgNS = svg.namespaceURI;
    }
    chartElements = container.getElementsByTagName('rect');
    if (chartElements.length > 0) {
      timeline = chartElements[0];
    }
    chartElements = container.getElementsByTagName('path');
    if (chartElements.length > 0) {
      baseline = chartElements[0];
    }
    if ((svg === null) || (timeline === null) || (baseline === null)) {
      return;
    }
    timelineWidth = parseFloat(timeline.getAttribute('width'));
    baselineBounds = baseline.getBBox();
    timespan = dateRangeEnd.max.getTime() - dateRangeStart.min.getTime();
    timelineUnit = (timelineWidth - baselineBounds.x) / timespan;

    // add events
    events.forEach(function (event) {
      // find row label
      rowLabel = dataTable.getValue(event.row, 0);
      chartElements = container.getElementsByTagName('text');
      if (chartElements.length > 0) {
        Array.prototype.forEach.call(chartElements, function(label) {
          if (label.textContent.indexOf('â¦') > -1) {
            labelText = label.textContent.replace('â¦', '');
          } else {
            labelText = label.textContent;
          }
          if (rowLabel.indexOf(labelText) > -1) {
            markerLabel = label.cloneNode(true);
          }
        });
      }

      // calculate placement
      markerSpan = event.date.getTime() - dateRangeStart.min.getTime();

      // add label
      markerLabel.setAttribute('text-anchor', 'start');
      markerLabel.setAttribute('fill', event.color);
      markerLabel.setAttribute('x', (baselineBounds.x + (timelineUnit * markerSpan) + 6));
      markerLabel.textContent = event.name;
      svg.appendChild(markerLabel);

      // add marker
      xCoord = (baselineBounds.x + (timelineUnit * markerSpan) - 4);
      yCoord = parseFloat(markerLabel.getAttribute('y'));
      switch (event.type) {
        case 'triangle':
          marker = document.createElementNS(svgNS, 'polygon');
          marker.setAttribute('fill', 'transparent');
          marker.setAttribute('stroke', event.color);
          marker.setAttribute('stroke-width', '3');
          marker.setAttribute('points', xCoord + ',' + (yCoord - 10) + ' ' + (xCoord - 5) + ',' + yCoord + ' ' + (xCoord + 5) + ',' + yCoord);
          svg.appendChild(marker);
          break;

        case 'circle':
          marker = document.createElementNS(svgNS, 'circle');
          marker.setAttribute('cx', xCoord);
          marker.setAttribute('cy', yCoord - 5);
          marker.setAttribute('r', '6');
          marker.setAttribute('stroke', event.color);
          marker.setAttribute('stroke-width', '3');
          marker.setAttribute('fill', 'transparent');
          svg.appendChild(marker);
          break;
      }
    });
  }

  google.visualization.events.addListener(chart, 'ready', function () {
    addMarkers([
      {row: 0, date: new Date(currentYear, 1, 11), name: 'Event A', type: 'triangle', color: 'yellow'},
      {row: 2, date: new Date(currentYear, 10, 15), name: 'Event B', type: 'circle', color: 'lime'}
    ]);
  });

  window.addEventListener('resize', drawChart, false);
  drawChart();
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline"></div>