Question

When a chart is drawn, it scrolls to the top but I am trying to make the chart stay on the same place at redraw. Because I cannot see the source code, I tried to get the scroll position and scroll to it on redraw but it does not work. Can someone please help me or is there a better way of doing it. Thank you.

 <div class="row">
    <div class="col-12">
      <div id="timelineDiv">
        <div class="text-center">
          <p class="mes">{{timelinecontr.mess}}</p>
        </div>
        <div class="col-12">
          <div id="timeline" class="chart"></div>
        </div>
      </div>
    </div>
  </div>

#timelineDiv{
  overflow-x: scroll;
  overflow-y: scroll;
  white-space: nowrap;
  border: 13px solid #bed5cd;
  width: 100%;
  margin: 0 auto;
  position: relative;
  background-color: deepskyblue;
  height: 550px;
}

timelinecontr.pos = $('#timeline div').scrollTop(); // position
      $('#timeline div').scrollTop(timelinecontr.pos) // this is called on chart redraw

Answer 1

需要等到图表完成绘图后再设置滚动位置

在绘制图表之前，获取滚动位置

当图表的'ready'事件触发时，设置滚动位置

var rowHeight = 42;
var timelinePos;
google.visualization.events.addListener(chart, 'ready', function () {
  $('#timeline').scrollTop(timelinePos);
});

function drawChart() {
  timelinePos = $('#timeline').scrollTop();
  chart.draw(dataTable, {
    height: (dataTable.getNumberOfRows() * rowHeight) + rowHeight
  });
}

注意：如果图表上没有设置height选项，则时间轴将使用自己的滚动条

请参阅以下工作代码段...

google.charts.load('current', {
  callback: function () {
    var container = document.getElementById('timeline');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ '1', 'A', new Date(2011, 3, 30), new Date(2012, 2, 4) ],
      [ '2', 'B', new Date(2012, 2, 4),  new Date(2013, 3, 30) ],
      [ '3', 'C', new Date(2013, 3, 30), new Date(2014, 2, 4) ],
      [ '4', 'D', new Date(2014, 2, 4),  new Date(2015, 2, 4) ],
      [ '5', 'E', new Date(2015, 3, 30), new Date(2016, 2, 4) ],
      [ '6', 'F', new Date(2016, 2, 4),  new Date(2017, 2, 4) ],
      [ '7', 'G', new Date(2017, 2, 4),  new Date(2018, 2, 4) ],
      [ '8', 'H', new Date(2018, 2, 4),  new Date(2019, 2, 4) ],
      [ '9', 'I', new Date(2019, 2, 4),  new Date(2020, 2, 4) ],
      [ '0', 'J', new Date(2020, 2, 4),  new Date(2021, 2, 4) ]
    ]);

    var rowHeight = 42;
    var timelinePos;
    google.visualization.events.addListener(chart, 'ready', function () {
      $('#timeline').scrollTop(timelinePos);
    });

    function drawChart() {
      timelinePos = $('#timeline').scrollTop();
      chart.draw(dataTable, {
        height: (dataTable.getNumberOfRows() * rowHeight) + rowHeight
      });
    }

    $('#draw-chart').on('click', drawChart);
    $(window).resize(drawChart);
    drawChart();
  },
  packages: ['timeline']
});

#timeline {
  overflow-x: scroll;
  overflow-y: scroll;
  white-space: nowrap;
  border: 13px solid #bed5cd;
  width: 100%;
  margin: 0 auto;
  position: relative;
  background-color: deepskyblue;
  height: 350px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline"></div>
<button id="draw-chart">Draw Chart</button>

Google Timeline Chart Go to position on redraw

1 个答案: