Question

我想知道，当您在延迟但平稳的过渡中将鼠标悬停在另一个坐标上时，是否可以使工具提示跟随鼠标？此刻工具提示出现并立即消失。我想知道是否可以通过简单的方式完成？

    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>

我想知道，当您在延迟但平稳的过渡中将鼠标悬停在另一个坐标上时，是否可以使工具提示跟随鼠标？此刻工具提示出现并立即消失。我想知道是否可以通过简单的方式完成？

Answer 1

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>

如何使工具提示流畅地跟随鼠标？

1 个答案: