Как сделать так, чтобы подсказка плавно следовала за мышью? - PullRequest
Новая
       42

Как сделать так, чтобы подсказка плавно следовала за мышью?

0 голосов
/ 15 октября 2018

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

    google.charts.load('current', {
callback: function () {
var rawData = [
    [2010, 100, 100],
    [2011, 105, 120],
    [2012, 111, 122],
    [2013, 122, 132],
    [2014, 131, 146],
    [2015, 139, 150],
    [2016, 143, 156],
];


var data = new google.visualization.DataTable({
  "cols": [
    {"id":"","label":"Date","type":'number'},
    {"id":"","label":"Black","type":'number'},
    {"id":"","label":"White","type":"number"}
  ]
});   

var options = {
    backgroundColor: 'transparent',
    focusTarget: 'category',
    lineWidth: 3,
    colors: ['#000'],
    crosshair: { orientation: 'vertical', trigger: 'both', color: 'black' },
    tooltip: { isHtml: true},
    pointSize: 0,
    animation:{
    startup: true,
    duration: 300,
    easing: 'out'
  },
    legend: 'none',
    series: {
        0: { lineDashStyle: [4, 4],tooltip : false, color:'rgb(223, 119, 106)', enableInteractivity: false, format: '0000'},
        1: {color:'black', zIndex:5, format: '0000'},
    },
    hAxis: {
      format: '0000',
      gridlines: { color: 'transparent', count: 6 },
      textStyle: { fontSize: 14, color: 'black' },
      viewWindow: { min: 2010, max: 2016 }
  },
    vAxis:{ 
      gridlines: { count: 7 },
        textPosition: 'none',
      textStyle: { color: 'transparent' },
      viewWindow: { min: 100, max: 160 }
  },
    chartArea: { top: 110, left: 20, right: 200 },
};

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));


drawChart();
setInterval(drawChart, 500);


var rowIndex = 0;
function drawChart() {
  if (rowIndex < rawData.length) {
    data.addRow(rawData[rowIndex++]);
    chart.draw(data, options);
  }
}
},
packages:['corechart']
});


<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px"></div>

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

1 Ответ

0 голосов
/ 15 октября 2018

В Javascript есть прослушиватель событий onmousemove.См. https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmousemove

С помощью прослушивателя событий onmousemove вы можете получить координаты x & y курсора и, при необходимости, указать местоположение подсказки.Самым сложным было бы реализовать дельту ускорения перехода между координатами.

Вот демонстрация JSBIN, показывающая, как: https://jsbin.com/kuhatikone/edit?html,output

<body>

<div onmousemove="handleMouseMove(event)" onmouseout="clearCoor()"></div>

<p>Mouse over the rectangle above, and get the coordinates of your mouse pointer.</p>

<p>When the mouse is moved over the div, the p element will display the horizontal and vertical coordinates of your mouse pointer, whose values are returned from the clientX and clientY properties on the 
MouseEvent object.</p>

<p id="demo"></p>

<script>
function handleMouseMove(e) {
    var x = e.clientX;
    var y = e.clientY;
    var coor = "Coordinates: (" + x + "," + y + ")";
    document.getElementById("demo").innerHTML = coor;
}

function clearCoor() {
    document.getElementById("demo").innerHTML = "";
}
</script>

</body>
...