chart.js 2.0当前鼠标坐标工具提示 [英] chart.js 2.0 current mouse coordinates tooltip
问题描述
我正在用chart.js实现一些点图。那里没有问题,但是我想做的是提供一个工具提示,而不仅仅是将其附加到给定的数据点。现在,您可以创建一个工具提示,它将在图表上给定数据点附近显示一个弹出窗口。例如,如果我有数据点[1,5],[2,6]和[3,7],它将很高兴地显示这三个数据点。
I am implementing some point charts with chart.js. No problems there, but what I want to do is have a tooltip that is not just attached to a given data point. Right now you can create a tooltip and it will display a popup near a given data point on the chart. For instance if I have the data points [1,5], [2,6], and [3,7] it will happily show those three data points.
但是我想要的是当我介于1.5和2.6之间时,确切地看到我在x轴上的位置。 1.5、1.6等。
But what I want is when I'm between 1,5 and 2,6 to see exactly where on the x axis I am. 1.5, 1.6, etc.
在chart.js调用的工具提示选项中,我可以执行以下操作:
Inside the tooltips options for the chart.js call I can do something like this:
工具提示:{
模式:'index',
相交:false,
回调:{
页脚:function(tooltipItems,data){
返回'x:'+ this._eventPosition.x +'y:'+ this._eventPosition.y;
},
},
footerFontStyle:'normal'
}
是x和y在画布上的位置,与实际的x和y图形坐标无关。我似乎在chart.js中找不到任何数据可以向我获取鼠标当前位置的实际图表x,y坐标。
But that is the position of x and y on the canvas and has nothing to do with the actual x and y graph coordinates. I can't seem to find any data available within chart.js that can get me the actual chart x,y coordinates of the current position of the mouse.
也请注意我不需要在工具提示页脚中使用它,而只是将其用作测试输出的便捷方法。我想要的是在固定位置上始终可见的工具提示,以显示鼠标悬停在其上的当前实际图表x位置,而与最近的数据点无关。
Also note I'm not needing it in the tooltip footer, I was just using that as a handy way to test output. What I would like is for an always visible tooltip in a fixed position to display the current actual chart x position that the mouse is hovering over regardless of the closest data point.
推荐答案
我终于收集了信息并进行了数学计算。这只是一个片段,向您展示是否有人遇到此问题。
I finally just gathered the information and did the math. Here is just a snippet to show you how if anyone else ever has this problem.
$(document).ready(function() {
var ctx = $("#graph_1");
var dataArray = [ {x:1,y:1},{x:2,y:3},{x:3,y:5},{x:4,y:8},{x:5,y:7},{x:6,y:4},{x:7,y:2},{x:8,y:1} ];
var myChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: "test",
fill: false,
data: dataArray
}]
},
options: {
title: {
display: true,
text: 'Test Graph'
},
animation: {
duration: 0,
}, // general animation time
hover: {
animationDuration: 0,
}, // duration of animations when hovering an item
responsiveAnimationDuration: 0, // animation duration after a resize
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'x axis label'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'y axis label'
}
}]
},
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
// Use the footer callback to display the sum of the items showing in the tooltip
footer: function(tooltipItems, data) {
//return 'x:' + this._eventPosition.x + ' y:' + this._eventPosition.y;
},
},
footerFontStyle: 'normal'
},
}
});
ctx.mousemove(function(evt) {
//console.log(evt.offsetX + "," + evt.offsetY);
var ytop = myChart.chartArea.top;
var ybottom = myChart.chartArea.bottom;
var ymin = myChart.scales['y-axis-1'].min;
var ymax = myChart.scales['y-axis-1'].max;
var newy = '';
var showstuff = 0;
if (evt.offsetY <= ybottom && evt.offsetY >= ytop) {
newy = Math.abs((evt.offsetY - ytop) / (ybottom - ytop));
newy = (newy - 1) * -1;
newy = newy * (Math.abs(ymax - ymin)) + ymin;
showstuff = 1;
}
var xtop = myChart.chartArea.left;
var xbottom = myChart.chartArea.right;
var xmin = myChart.scales['x-axis-1'].min;
var xmax = myChart.scales['x-axis-1'].max;
var newx = '';
if (evt.offsetX <= xbottom && evt.offsetX >= xtop && showstuff == 1) {
newx = Math.abs((evt.offsetX - xtop) / (xbottom - xtop));
newx = newx * (Math.abs(xmax - xmin)) + xmin;
}
if (newy != '' && newx != '') {
//console.log(newx + ',' + newy);
$("#graph_coords").html('Mouse Coordinates: ' + newx.toFixed(2) + ',' + newy.toFixed(2));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<SCRIPT src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></SCRIPT>
<DIV id="graph_coords"></DIV>
<DIV class="chart-container" style="position: relative; height:40vh; width:80vw;">
<CANVAS id="graph_1" style="background-color: #CBCBCB;"></CANVAS>
</DIV>
这篇关于chart.js 2.0当前鼠标坐标工具提示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!