Временная шкала визуализации Google показывает время курсора мыши

Question

Я надеюсь, что смогу - в графике визуализации Google- показать время / дату курсора мыши в Java Script,

Скажите как: console.log(googlechart.timedate(mouse.x)); Есть ли способ получить дату времени моей мыши х?

дело в том, что я пытаюсь перетаскивать элементы временной шкалы, поэтому сначала я перетаскивал расстояние мыши, когда курсор находился на каком-то элементе, теперь я получил пиксели и хочу применить это изменение в значении этого элемент шкалы времени, по которому было проведено перетаскивание, но не могу знать, как узнать новое значение даты / времени, на которое нужно изменить, тогда я обновлю чертеж,

Благодарю.

Answer 1

К сожалению, нет встроенного способа сделать это с помощью их API. Основываясь на ответе на этот вопрос, я изменил пример Google JSFiddle для TimeLine, чтобы добавить простой mousemove событие, которое вычисляет относительные X и Y позиции курсора.

  google.charts.load('current', {'packages':['timeline']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('timeline');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'President' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
      [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);


    // create 'ready' event listener to add mousemove event listener to the chart
    var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
          google.visualization.events.removeListener(runOnce);
          // create mousemove event listener in the chart's container
          // I use jQuery, but you can use whatever works best for you
          $(container).mousemove(function (e) {
            var xPos = e.pageX - container.offsetLeft;
            var yPos = e.pageY - container.offsetTop;

            // (Do something with xPos and yPos.)
        });
    });

    chart.draw(dataTable);
  }

Вот JSFiddle.

Это только начало. Вам нужно будет выяснить, как интерполировать данные времени и даты по координатам мыши, потому что для этого нет API-функций, и даже если бы они были, вы бы не смогли получить значения "между", не используя свой собственные расчеты. Вы можете найти некоторую помощь здесь.