js工具提示不仅在点上，而且在线上
我在chart.js中有一个折线图。现在我想有一个工具提示，当我悬停在线上，而不仅仅是当我悬停在一个点上。然后工具提示应该显示在鼠标的位置。这有可能吗？
共有1个答案
如果您仍在使用版本2的lib：https：//chartjs-plugin-crosshair.netlify.app/，则可以使用croshair插件来实现此目的
现场示例：
var ctx = document.getElementById("myChart");
function generateDataset(shift, label, color) {
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
let data = [];
let index = 0;
while (index < 5) {
data.push({
x: index,
y: getRandomInt(10, 40)
});
index++;
}
var dataset = {
backgroundColor: color,
borderColor: color,
showLine: true,
fill: false,
pointRadius: 2,
label: label,
data: data,
lineTension: 0,
interpolate: true,
xAxisID: 'x-axis-0'
};
return dataset;
}
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D', 'E'],
datasets: [
generateDataset(0, "A", "red"),
generateDataset(1, "B", "green")
]
},
options: {
scales: {
xAxes: [{
display: true,
type: 'linear',
position: 'bottom',
id: 'x-axis-0',
ticks: {
source: 'labels'
}
}]
},
tooltips: {
mode: "interpolate",
intersect: false,
callbacks: {
title: function(a, d) {
// return a[0].xLabel.toFixed(2);
return a[0].xLabel;
},
label: function(i, d) {
return (
d.datasets[i.datasetIndex].label + ": " + i.yLabel.toFixed(2)
);
}
}
},
plugins: {
crosshair: {
line: {
// Add alpha chanel so line becomes transparant so you dont see it
color: '#ffffff00',
},
sync: {
enabled: false
}
}
}
}
});.myChartDiv {
max-width: 600px;
max-height: 400px;
}<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
<script src="https://npmcdn.com/chart.js@2.9.4/dist/Chart.bundle.min.js"></script>
<script src="https://unpkg.com/chartjs-plugin-crosshair@1.1.6/dist/chartjs-plugin-crosshair.js"></script>
</body>
</html>-
我使用的是chart.bundle.min.js 2.3.0。
-
我试图在qtip中的图像上显示jQuery UI工具提示。现在，工具提示显示在工具提示后面。你知道怎么把它展示在它面前吗？ 小提琴在这里：http://jsfiddle.net/wYM2Q/ 将鼠标移到文本“bind qtip to this”上。然后将鼠标悬停在qtip内的图像上。你会看到qtip后面显示的工具提示，我想在它前面显示。
-
我在使用mousemove事件显示工具提示时遇到了一些麻烦。基本上，当我的鼠标指针在图片框的某些区域上时，我想显示一个工具提示。我试图使用mousemove事件来完成此操作，确定阉羊指针位于最佳位置，并（如果是这样）使用settools tip设置工具提示。 这是我的mousemove事件（我注意到，当显示工具提示时，mousemove会持续触发，我会检查位置是否真的发生了变化） 这工作正常，除了
-
我想给我的workinprogress机器人添加工具提示，但出现了这个错误。 /home/runner/simplebot/index.js:46. setColor（"#4287f5"）. setTitle（"工具提示示例"）. setdescription（"悬停工具提示"：[（i）]（${message.url}'嘿，看！它是一个工具提示！'））；message.channel.send（工
-
不要在laravel中使用JS代码和工具提示使用公共函数！ 错误： [2019-10-0311:31:34]生产。错误：异常“Symfony\Component\Debug\exception\FatalErrorException”，在/home2/linkman2/public\html/panel/app/Http/Controllers/ActionController.php:42堆栈跟
-
我已经使用FullCalendar配置有一段时间了，但我已经到了一个无法理解的地步。我希望启用当最终用户将鼠标悬停在事件上时显示的工具提示。我想在活动的工具提示中提供一些进一步的信息，例如电话联系号码等。 我尝试了许多不同的选择，我能够找到 例如，下面的链接列表 完整日历事件弹出窗口 http://jsfiddle.net/m54g5aen/ Fullcalendar/eventdidmount-