Google图表在时间轴上添加层 [英] Google Charts Add Layer On Top Of Timeline

问题描述

我希望在时间轴上绘制一系列带有开始和结束日期的事件.似乎Google图表库通过时间轴图表类型提供了特定功能.

I am looking to plot on a timeline a series of events with a start and end date. It seems like the google chart library offers that specific functionality through the Timeline chart type.

我还需要绘制单个守时事件(不仅是发生在开始/结束时间跨度上的事件)，并用诸如圆形，三角形或其他符号之类的符号来表示它们.

I also need to plot single, punctual events (not only events that happen over a begin/end timespan) and represent them with symbols like circles, triangles or other.

我想知道是否有可能在要做的时间表?或者添加自定义形状来表示匹配的结束日期/结束日期的事件?

I was wondering if it is possible to add another layer on top of the timeline to do that? Or perhaps to add custom shapes to represent events that have matching being/end dates?

任何见识都会很棒！

推荐答案

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

there are no standard options you can use to add another layer / custom shapes.

，但是一旦图表的'ready'事件触发，就可以手动修改图表的svg.

but the chart's svg can be modified manually, once the chart's 'ready' event fires.

请参阅以下工作片段，
函数 addMarkers 将为给定的日期和行添加自定义形状.

see following working snippet,
function addMarkers will add custom shapes for a given date and row.

传递要添加到图表中的事件"数组.

pass an array of "events" to be added to the chart.

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>

这篇关于Google图表在时间轴上添加层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！