Как прикрепить / заморозить заголовок SVG вверх - PullRequest
Новая
       13

Как прикрепить / заморозить заголовок SVG вверх

0 голосов
/ 15 марта 2019

На временной шкале Google есть хитрость, которая выводит верхний колонтитул (даты).Как заморозить этот заголовок, чтобы он оставался видимым при вертикальной прокрутке вниз.Похоже на стоп-кадр в Excel.

 function bring_date_header_up() {
    var g = document.getElementsByTagName("svg")[0].getElementsByTagName("g")[1];
    document.getElementsByTagName("svg")[0].parentNode.style.top = '80px';
    document.getElementsByTagName("svg")[0].style.overflow = 'visible';
    var height = Number(g.getElementsByTagName("text")[0].getAttribute('y')) + 25;
    g.setAttribute('transform','translate(38,-'+height+')');
    g = null;
  }

Вот пример: https://codepen.io/anon/pen/jJzxzj

1 Ответ

1 голос
/ 18 марта 2019

вы можете попробовать клонировать строку даты и добавить элемент над графиком.

элемент <g> захвачен и перемещен в исходном примере,
здесь мы делаем его копию и перемещаемся к другому элементу ... 

google.charts.load('current', {
  packages:['timeline']
}).then(function () {
  var data = new google.visualization.DataTable({
    cols: [
      {id: 'team', label: 'Team', type: 'string'},
      {id: 'start', label: 'Season Start Date', type: 'date'},
      {id: 'end', label: 'Season End Date', type: 'date'}
    ],
    rows: [
      {c: [{v: 'Baltimore Ravens'},     {v: 'Date(2000, 8, 5)'}, {v: 'Date(2001, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]},
      {c: [{v: 'Tampa Bay Buccaneers'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]},
      {c: [{v: 'Pittsburgh Steelers'},  {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]},
      {c: [{v: 'Indianapolis Colts'},   {v: 'Date(2006, 8, 5)'}, {v: 'Date(2007, 1, 5)'}]},
      {c: [{v: 'New York Giants'},      {v: 'Date(2007, 8, 5)'}, {v: 'Date(2008, 1, 5)'}]},
      {c: [{v: 'Pittsburgh Steelers'},  {v: 'Date(2008, 8, 5)'}, {v: 'Date(2009, 1, 5)'}]},
      {c: [{v: 'New Orleans Saints'},   {v: 'Date(2009, 8, 5)'}, {v: 'Date(2010, 1, 5)'}]},
      {c: [{v: 'Green Bay Packers'},    {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
      {c: [{v: 'Green Bay Packers'},    {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]},
      {c: [{v: 'Tampa Bay Buccaneers'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]},
      {c: [{v: 'Pittsburgh Steelers'},  {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]},
    ]
  });

  var options = {
    height: 650,
    timeline: {
      groupByRowLabel: true
    }
  };

  var chart = new google.visualization.Timeline(document.getElementById('chart'));
  google.visualization.events.addListener(chart, 'ready', afterDraw);
  chart.draw(data, options);
  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
});

function afterDraw() {
  var header = document.getElementById('header');
  header.innerHTML = '';
  var svg = document.getElementsByTagName('svg')[0];
  var g = svg.getElementsByTagName('g')[1];
  var svgNew = header.appendChild(svg.cloneNode());
  var gNew = svgNew.appendChild(g.cloneNode(true));
  var height = parseFloat(gNew.getElementsByTagName('text')[0].getAttribute('y')) - 25;
  gNew.setAttribute('transform','translate(0,-'+height+')');
  g.parentNode.removeChild(g);
}
#header {
  height: 56px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="header"></div>
<div id="chart"></div>
...