javascript - 如何使工具提示流畅地跟随鼠标?

标签 javascript charts google-visualization linegraph

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

    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>


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

最佳答案

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>

关于javascript - 如何使工具提示流畅地跟随鼠标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52820643/

相关文章:

javascript - 为什么注释或工具提示没有出现在本系列中

javascript - 当导航到达另一个顶部导航时如何使导航粘滞

javascript - 绘制自定义折线图和柱形图

javascript - Google Visualization group() 聚合函数返回空值

javascript - C3.JS : show only one line on load by default for line chart

google-visualization - 在 Visualizations API 中使用 Google 的带注释的时间轴,您可以插入注释而不考虑数据集吗?

javascript - 如何在 javascript 中获取 Google DataTable 的最后一行?

javascript - 从 php 制作的数组中提取数据并将其传递给 javascript twig

javascript - 停止按钮点击?

javascript - 光标未使用 HTML Canvas 对齐