如何在chart.js版本3中更改数据标签悬停时的光标？
在chart.js版本3中更改数据标签悬停时的光标，可以通过配置项interaction中的mode属性来实现。
首先，确保已经在HTML页面中引入了chart.js的库文件。
然后，在创建图表的配置对象中，添加interaction属性，并设置mode为index，如下所示：
var chartConfig = {
type: 'bar',
data: {
labels: ['标签1', '标签2', '标签3'],
datasets: [{
label: '数据集1',
data: [10, 20, 30]
}]
},
options: {
interaction: {
mode: 'index' // 设置光标的悬停模式为索引模式
}
}
};
var myChart = new Chart(document.getElementById('myChart'), chartConfig);在上述代码中，通过将mode设置为index来指定光标的悬停模式为索引模式。这样，在鼠标悬停在图表的数据标签上时，光标将显示为一个指示箭头。
此外，chart.js还支持其他的光标模式，包括point、nearest和x等。你可以根据自己的需求选择适合的模式。
值得注意的是，该设置只对具有数据标签的图表类型有效，如折线图、柱状图等。
推荐的腾讯云相关产品：无。
这是chart.js官方文档中有关设置光标模式的部分：https://www.chartjs.org/docs/latest/general/interactions/modes.html
相关·内容
3回答
在使用Chart.js库时，我希望在将鼠标悬停在甜甜圈上时更改光标。
我这样做：
$("#dc_LoadTime").mouseleave(function(){
$("#dc_LoadTime").css("cursor", "default");
});
$("#dc_LoadTime").mouseenter(function(){
$("#dc_LoadTime").css("cursor", "pointer");
});
在html页面中
浏览 0提问于2016-02-22得票数 8
回答已采纳
我有下面的使用的线条图示例。我想展示：
图例和悬停标签的指针光标
显示所有标签数据在线悬停。
var line_chart = new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: ['May', 'June', 'July'],
datasets: [{
data:
浏览 3提问于2017-07-17得票数 18
回答已采纳
1回答
我一直试图在鼠标光标悬停在数据标签上时立即将其更改为“指针”。 当我将鼠标悬停在数据点上时，我可以有效地实现这种效果，所以这是很好的。 options: {
onHover: (eve, legendItems, chartElement) => {
if (_.get(eve, 'native.target.style')) {
eve.native.target.style.cursor = legendItems[0] ? 'pointer' : 'default';
}
}
} 我正
浏览 22提问于2021-11-21得票数 0
我的饼图选项中有以下代码，以便在悬停时将鼠标光标更改为指针：
hover: {
onHover: (e, el) => {
const section = el[0];
const currentStyle = e.target.style;
currentStyle.cursor = section ? 'pointer' : 'normal';
}
}
问题
即使指针指向外部饼(或内部)，光标也会更改为指针。我希望它只在悬停数据集时更改。有可能吗？
即使游标停留在元
浏览 1提问于2018-03-06得票数 2
回答已采纳
我有一个Kendo UI Datavis条形图，我希望在将指针(手)光标悬停在图表中的条形图和这些条形图的标签上时显示其指针(手)光标。当移出图表中的条形图时，光标应返回到标准箭头指针。
我注意到，当光标悬停在轴标签(左、右和底部)和图例上时，光标变成了文本光标。因此，除了上述内容之外，我希望光标在悬停在轴标签和图例上时保持标准光标(箭头)(因为您不能编辑它们)。我还希望光标在悬停在x轴(底部)标签上时切换到指针光标。
当鼠标悬停在图表上的任何位置时，我可以很容易地显示整个图表的指针光标，但这并不是我们所希望的。
我尝试了使用seriesHover事件的各种策略，但到目前为止都没有起作用。
我
浏览 2提问于2013-01-02得票数 2
回答已采纳
我的雷达图表将不会显示数据值时，徘徊在一个点。Chart.js 2.8.0
<script src="./vendor/chart.js/Chart.js"></script>
<canvas id="radar-chart" width="1200" height="550"></canvas>
<script>
new Chart(document.getElementById("radar-chart"),{
type: 'radar
浏览 1提问于2019-08-06得票数 3
回答已采纳
大家好，
希望这是一件容易的事。我已经设置了一个带有onclick事件的图例，但是当我悬停在标签上时，我希望鼠标光标改变为“指针”(见上面的图表截图)。目前，很难判断标签是链接，因为当我悬停在它们上面时，鼠标光标不会改变。
另外，我如何在图例和图表(图例下方的空格)之间添加一些空白/填充。
非常感谢！
浏览 0提问于2017-02-27得票数 3
回答已采纳
我正在尝试使用Chart.js (v3.4.1)来制作一个简单的折线图。我的数据是一个对象数组，其中每个对象都具有x和y属性，每个属性都是一个整数。例如：[{x: 12, y: 122}]
我的最小概念证明如下：
<!DOCTYPE html>
<html>
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.min.js"
integrity="
浏览 0提问于2021-07-21得票数 1
我使用由Chart.js呈现的折线图。我使用多个数据集，而数据集只包含一个数据点(x，y) (来自业务域)。
图表显示了悬停时每个点(x，y，标签)的信息，但是我希望每个点旁边都有一个标签，默认情况下/每次都会显示相应的标签。
在我的研究中，我找不到任何解决方案。
有什么建议吗？这真的可以用Chart.js实现吗？
浏览 1提问于2016-12-17得票数 0
在Chart.Js图表中，当用户将鼠标悬停在饼图上时，有没有办法实现突出显示饼图？ 我已经查看了ClientSideEvents-ObjectHotTracked，但在鼠标悬停时找不到一个可以突出显示的。 function(s, e) { var hitInPie = e.hitInfo.inSeries; s.SetCursor(hitInPie ? 'pointer' : 'default'); } 此代码用于在鼠标光标接触到序列时将其更改为指针。 我想要实现的是突出显示光标点击的那块饼。谢谢。
浏览 33提问于2019-10-08得票数 0
我已经尝试在这里找到的chart.js中为这两个数据集制作标签。将鼠标悬停在图表中的不同日期上时显示的example of chart.js 我试着添加这个... options: {
tooltips: {
mode: 'index',
intersect: false
},
hover: {
mode: 'index',
intersect: false
} } 但是这没有帮助，在一个完美的世界里，当我在周日悬停时，我想显示它像28 (30)。有人能帮帮忙吗？
浏览 23提问于2021-11-02得票数 0
10回答
我正在使用matplotlib绘制散点图。散点图上的每个点都与一个命名对象相关联。当我将光标悬停在与该对象关联的散点图上的点上时，我希望能够看到该对象的名称。特别是，能够快速查看异常值的点的名称将是一件很好的事情。在这里搜索时，我能找到的最接近的是annotate命令，但它似乎在绘图上创建了一个固定的标签。不幸的是，对于我拥有的点的数量，如果我标记每个点，散点图将无法读取。有没有人知道一种方法，可以创建只在光标悬停在该点附近时才显示的标签？
浏览 3提问于2011-10-27得票数 202
回答已采纳
1回答
我正在尝试用chart.js或raphael创建这个图表。我期待，在悬停时，标签将显示与该图像完全一样。我用chart.js创建了它，但是无法实现内部样式和悬停功能。有人能帮忙吗？提前感谢
这是我找到的解决方案，但无法获得样式和实现悬停功能。
浏览 1提问于2016-12-11得票数 0
回答已采纳
1回答
我需要知道如何在WPF应用程序中动态调整label的大小。
我已经找到了一个示例，它已经实现了同时拖动和调整标签大小。我深入研究了代码，为了缩短代码，我发现在标签的OnMouseMove事件中，它检查鼠标光标的形状，如果是Hand，它将执行拖动，如果是resizing arrows，则相应地进行大小调整。看看这个。你终究会明白的。在这个特定的例子中，当鼠标悬停在标签的边框上时，我无法找到光标形状如何改变为resizing arrows。
So
我要么需要了解“在标签的边框上悬停时如何将鼠标光标形状更改为调整箭头的大小”，或就可以找到一种动态调整标签大小的新方法。
浏览 0提问于2012-12-21得票数 0
回答已采纳
8回答
IE 6+将光标显示为文本图标，而不是它应该显示的迷你指针(指针)。
我的显示，如果您在IE中的选项卡(All/ correctly /.)上悬停，它会显示一个文本--光标，但是Firefox/etc将正确显示为一个“指针”。
这将应用于ul.tabbernav li a:hover CSS属性。
知道当你在我的页面上的标签上悬停时，IE为什么不将光标显示为指针吗？
浏览 11提问于2009-08-17得票数 2
我们为Angular 5应用程序中的条形图使用Chart.js (2.6.0版)，客户端希望我们禁用图表交互的悬停事件(他们只想让条形图发生变化，并在用户单击条形图时显示工具提示)。
在条形图选项对象中，我们为events属性定义了以下内容：
events: ["touchstart","touchmove","click"]
这将禁用条形图上的悬停事件。但是，现在客户端希望我们在用户将光标悬停在其中一个条上时将光标更改为指针，以便他们知道可以单击它，这是一个有效的点。我在这里找到了几个解决方案，但我似乎找不到一种方法，如果不将"mous
浏览 3提问于2018-03-01得票数 6
我使用Chart.js创建了一个气泡图，但是只有当鼠标悬停在气泡上时，才会显示每个气泡的数据标签。如何默认显示所有气泡的数据标签(即不将鼠标悬停在顶部)？ new Chart(document.getElementById("stock-chart"), {
type: 'bubble',
data: {
labels: "Africa",
datasets: [
{
label: ["Stock 3, Stock 4"],
back
浏览 31提问于2019-07-04得票数 0
我有一个Dash应用程序中的Plotly Express图形。是否可以自定义悬停标签的内容(当我将光标移动到数据点上时出现) 如下图所示： ?
浏览 28提问于2021-06-22得票数 0
我正在用chart.js制作一个带有图表的网页。我想要3个并排的饼图，我用display: flex;将它们包装在一个div中。第一个的图表鼠标悬停在工具提示上运行良好。然而，对于第二个和第三个图表，只有当我将光标放在离数据部分很远的地方时，工具提示才会出现，而当光标直接放在数据部分上时，工具提示就不会出现。 我尝试过设置pointHitRadius和工具提示模式，但似乎都不起作用。 这是我的作品的jsfiddle：https://jsfiddle.net/6twvhpab/
浏览 32提问于2020-08-13得票数 0
回答已采纳
示例：
比较一下Chrome和Safari的上的推文。当鼠标保持不动，并使用触控板或鼠标滚轮滚动提要时，不会触发悬停状态。在Safari中，光标似乎只在移动光标时指向元素，而不是在滚动浏览器窗口时指向元素。这对于CSS和JQuery悬停状态都是正确的。
已经能够解决这个问题。如果将光标固定在歌曲列表上滚动浏览器窗口，则会触发悬停状态。一定有办法破解这个Safari特有的问题。
浏览 2提问于2012-06-01得票数 0
当我将鼠标悬停在它上面时，光标不会变成手形，直到你真正经过文本。(例如，如果您注意SO导航，则只要您触摸灰色区域，光标就会变为手形。我说的是问题、标签、用户、徽章、未回答的导航)
当我点击它时，它会将链接边框-文本..就像默认情况下的虚线边框之类的。我该怎么摆脱它呢？
浏览 2提问于2010-11-01得票数 1
回答已采纳
我试图构建一个chart.js散点图，在这个散点点上，工具提示会显示特定的到那个点的标签。
所以每个数据点都有x和y值，也有标签。
到目前为止我有
var ctx = document.getElementById('myChart').getContext('2d');
var scatterChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
labels: ["Label 1","Lab
浏览 2提问于2017-06-20得票数 14
回答已采纳
我正在使用Chart.js库绘制条形图，我希望不仅在条形图悬停时显示工具提示，而且还在该条形图的x轴标签悬停时显示工具提示。我找到了用于配置的onHover方法，但它只允许我访问当前悬停的条的数组，这没有什么用处。
那么，如何访问鼠标事件并从中获取位置以将其与条形图标签位置进行比较？还是有另一种方法呢？
我当前的配置：
const countryChartOptions = {
hover: {
onHover: this.onChartHover,
},
};
const onHover = (activeElements) => {
con
浏览 5提问于2017-01-28得票数 5
1回答
在PrimeNG图表中，当我悬停在一个数据点上时，我可以看到黑匣子上有关于这个点的一些信息。如何自定义这个盒子？我想为这个悬停信息框添加我自己的HTML。
P.S: PrimeNG图表模块在引擎盖下使用chart.js。
浏览 5提问于2022-05-22得票数 -2
回答已采纳
1回答
如果鼠标光标悬停在QButton上，那么触发函数的正确方法是什么？
更准确地说，我有一个名为statusLabel的标签，每当我将鼠标光标悬停在按钮上时，该标签就会显示消息，并且当鼠标不在按钮上时，应该恢复为空字符串。
浏览 3提问于2016-12-12得票数 0
回答已采纳
当光标悬停在tkinter窗口上时，我想做一个自定义的图像光标，如下所示：
但是，不管我搜索的有多难，我都找不出如何在tkinter窗口中添加一个自定义游标，所以我只能使用默认的白色光标。
不管怎么说，当光标悬停在我的tkinter窗口上时，我可以在光标上添加一个自定义图像吗？
浏览 3提问于2021-02-15得票数 1
回答已采纳
1回答
我有一个WPF应用程序，我使用DevExpress图表来显示一些数据。我想摆脱它们并使用LiveCharts，但是当鼠标光标在图表中时，我想在最靠近鼠标光标的图表点上显示一个圆圈。我已经尝试过一些部分，我可以显示在点上交叉的线，但是当你悬停在它上面的时候，我不能像它那样自动地标记那个点。有办法做到这一点而不改变源代码吗？
浏览 3提问于2017-09-04得票数 2
回答已采纳
我有一个天气网站，在那里你可以输入城市的名称，它将显示来自OpenWeatherAPI的天气数据。我还有一个用Chart.js制作的图表。然而，有一个问题，当我搜索其他城市时，图表会更新，但当我将光标悬停在某些点上时，每次新鼠标悬停时，都会突然出现以前的图表，而不是当前的图表。在更新图表之前，我尝试使用update()和destroy()方法，但似乎没有什么帮助。
我将我的画布对象放在一个名为chartContainer的div中，它是chartContainer div的唯一子对象。
var ctx = document.getElementById("myChart");
浏览 1提问于2020-12-03得票数 0
2回答
我有一个ExtJS网格，它有5列。
在其中一列中，当单击其他按钮时，我使用来自渲染器的div元素动态显示图像。我希望在将光标悬停在渲染器显示的图像上时显示手形光标。
我尝试添加内联样式和onmouseover处理程序来显示手形光标。当我第一次加载网格时，手形光标就会出现，onmouseover处理程序也会被调用。但是，当我在同一网格中加载另一组数据时，手形光标不会出现，onmouseover处理程序也不会调用？
你能帮助我得到一个手光标时，悬停在网格单元格中的div标签中渲染的图像。
浏览 2提问于2012-08-01得票数 0
回答已采纳
我尝试从列表创建标签，绑定'<Enter>'和'<Leave>'事件，使标签悬停时背景颜色发生变化(悬停时默认为蓝色，悬停时为红色)，然后打包标签。
目前，我正在将每个标签添加到字典中，并引用该标签，但是当光标进入任何标签时，最后一个(也是仅最后一个)标签的背景色会发生变化。
from tkinter import *
random_list = ['ABC', 'DEF', 'GHI', 'JKL', 'MNO', 'PQR']
cl
浏览 0提问于2017-06-02得票数 0
我有一个包含asp:ValidationSummary的自定义用户控件。它与其他显示数据的控件一起放在页面上。当我尝试保存页面并触发验证时，我得到了以下奇怪的行为：
如果我将鼠标悬停在页面上的任何控件上，所有标签都会变为红色。当光标离开页面时，它们会返回到CSS中指定的颜色。我没有找到任何鼠标悬停等的代码。
我想知道ValidationSummary是不是在做我不知道的事情？我很感谢你的反馈。
谢谢。
浏览 0提问于2008-12-24得票数 2
回答已采纳
我用Chart.js呈现了一个水平堆叠的条形图，图例对应于不同的类。下面是其中的一小部分(在虚拟数据集上工作，忽略无意义的名称)： ? 左边的标签是用户，图例中的标签(对应于条形图中的类，即不同的数据集)是邮件列表。图表基本上显示了有多少用户是特定邮件列表的成员；条形的长度是给定用户是多少邮件列表的成员。 我想做的是设置它，以便将鼠标悬停在图例中的条目上将突出显示(理想情况下带有边框或其他东西)条形图中与该数据集相对应的部分。因此，如果我将鼠标悬停在第一个数据集条目上，所有这些条左端的蓝色块(“阴离子”除外)都会得到突出显示。 使用图例的onHover和onLeave事件，我成功地con
浏览 53提问于2021-02-12得票数 1
1回答
我使用的是原始饼图，基于chart.js，有些情况下我不想显示任何标签。在这种情况下，当我将鼠标悬停在图表上时，会得到一个未定义标签的工具提示显示。
在没有标签的情况下，如何关闭工具提示？
浏览 14提问于2018-07-26得票数 0
我目前正在使用Chart.js，并在我的项目中使用一些动态数据构建一个雷达图。它工作得很好。但是，用户偶尔会在标签中使用太多字符，这会影响图形的整体大小。
有没有一种方法可以减少外环标签，这样说：
“这是一个很长的标签”到“这是一个...”
而不影响图形本身的标签(悬停标签)？
我确实想到了这样的东西：
var label = "This is a really long label";
newLabel = label.substring(0,8) + "...";
Giving: This is ...
但是，这将同时影响雷达图形外部的标签和内部悬停标签
浏览 2提问于2016-05-11得票数 0
我想要在鼠标光标悬停在QTabWidget的选项卡上时显示相应的页面。
例如，当鼠标光标悬停在“page2”标签上时，我希望QTabWidget会自动显示相应的页面，而不是单击。如何实现此功能？
浏览 1提问于2013-07-19得票数 2
回答已采纳
在使用Chart.js库V.2时，当鼠标悬停在条形图上时，我希望将光标更改为“不允许”。
这是我的密码
// Draw Chart
var ctx = document.getElementById("main").getContext("2d");
ctx.canvas.width = calculatedWidth;
ctx.canvas.height = calculatedHeight || 400;
mainDashboardChart = new Chart(c
浏览 1提问于2017-04-05得票数 1
回答已采纳
2回答
如何记录我正在编写的源代码，以便其他开发人员在将光标悬停在我在Qt creator中创建的类名上时看到帮助说明。我想做一些类似于将光标放在Qt类或函数名上时得到的帮助。
浏览 1提问于2012-03-17得票数 7
当我在画布上悬停时，我想要在画布顶部的一些标签上显示x，y坐标，如果我保持光标不变，但当我移动它时，这些坐标保持不变。我该怎么做？
浏览 4提问于2015-10-14得票数 2
回答已采纳
1回答
我有一个jquery datatable，支持拖放列和排序图标。
我需要应用光标:指针悬停排序图标和光标:移动悬停列标题的其他区域
虽然只有一个html标签<th>和排序图标也在其中，但我无法实现这一点。对此有任何建议/解决方案。
让问题更清晰的示例图片：
提前谢谢。
浏览 11提问于2016-08-06得票数 2
回答已采纳
4回答
$("#sales-period").on("change", function () {
$("body").css("cursor", "wait");
});
上面是我用来改变我的鼠标光标的代码，当下拉值改变时，问题是，光标在身体上确实会变成等待状态，但当我将鼠标悬停在链接上时，它仍然会变成指针。我如何才能强迫它保持显示等待状态，甚至在悬停链接时也是如此。
浏览 0提问于2013-07-08得票数 2
回答已采纳
3回答
我想要悬停一个链接(<a>标签，其中包含一个<div>标签)，所以颜色变成红色，但只有当我悬停黄色字段！我的问题是，如果光标不在黄色字段上，也可以将其悬停。
我知道我可以把a标签放到div标签中，但是我想链接整个框，而不仅仅是文本。
我也尝试使用a { width: 100px; }，但这当然不起作用。
我有什么办法解决这个问题吗？
浏览 8提问于2016-03-04得票数 0
回答已采纳
2回答
CSS转换和复选框标签的问题
、、、、
选中复选框时，我想更改标签的位置。如果我不转换标签的top偏移量属性，这会工作得很好。但是，如果我为这个值添加了一个转换(参见注释代码)，单击标签，并且不要移动鼠标的光标，标签看起来仍然处于悬停状态。这意味着，即使我没有悬停在它上面，光标也是一个指针，背景颜色是绿色(标签的悬停状态)。
如果你看到，你就会明白我的意思。
我的HTML代码如下：
<section>
<input type="checkbox" id="checkbox_id">
<label for="checkbox_id">C
浏览 3提问于2015-07-11得票数 0
我有一个有两个相同数据集的线条图-唯一的区别是第二个数据集利用了Chart.js趋势线插件。
当有人悬停在某个数据点上时，我如何只显示第一个dataset的标签？到目前为止，我已经看了很多关于StackOverflow的文档和其他问题，似乎找不到答案。
浏览 2提问于2019-11-26得票数 0
下面的锚标签起作用了。然而，我的问题是，“当鼠标悬停在锚标签上时，它怎么能强制光标改变它的外观(就像大多数链接一样)？”
<a onclick="doSomethingh(1)">Click Me</a>
浏览 3提问于2011-05-24得票数 0
回答已采纳
Chart.js 2.0折线图
我只需要显示当前点的悬停状态，而不是整个数据集。
Chart.js文档中有这个例子，
这是我的图表在我悬停在一个点上时的样子。
谢谢。
浏览 21提问于2016-07-24得票数 0
2回答
更改用户控件上的光标
、、、
我有一个显示图像的用户控件，当在控件上悬停时，图像的名称将显示在图像下面的标签中。我已经将这个用户控件放在TableLayoutPanel单元格中，它创建了一个映像表。
当鼠标经过每个控件，甚至窗体本身时，我正在尝试更改光标。
我试着把
Cursor.Current = Cursors.Hand
在控制器的MouseEnter事件、TableLayoutPanel甚至父窗体中都尝试过这一点，但没有任何结果。什么都没发生。为什么？
我还注意到，这在用户控件中很常见，在进入用户控件时很难更改鼠标光标。
有人知道如何更改用户控件中的光标吗？
浏览 2提问于2016-06-02得票数 2
回答已采纳
1回答
我正在使用dash制作一个仪表板。当悬停在散点图中的点上时，图表会显示悬停文本。当光标悬停在点的标签上时，我希望看到相同的悬停文本。有可能吗？ ?
浏览 20提问于2021-01-13得票数 1
1回答
我正在使用Chart.js显示一些数据作为条形图。这些数据的一个例子是：
{纽约: 29033，旧金山[：33432，俄克拉荷马城:38202]，等等。
当我使用这些数据集与Chart.js一起创建条形图时，图表中的条形图将与标签一起压缩，或者压缩在一起，或者很远，这取决于创建的标签数量。
有没有一种方法可以使条子和标签对齐，使它们与之相吻合？
浏览 1提问于2014-02-12得票数 0
我有一个使用jquery ui sortable的表应用于tbody。当我拖动tr时，我给了它一个移动光标。这很好用。
但是，客户端希望将光标悬停在该行上，以便他们知道它可以移动。我使用css将cursor:指针应用到tr。然后，在tr行上悬停时会给出一个点。
问题是，如果我拖放了可排序对象，我就不再获得移动光标。
你知道如何让游标同时移动和悬停可排序的行吗？
谢谢
格雷姆
浏览 2提问于2011-10-10得票数 0
回答已采纳
我对ChartJS有一个问题:我需要在我的项目中使用极坐标图，我必须用PDF显示这个图形。
我也需要显示没有悬停的工具提示。问题是，这些工具提示是每个数据的中心。我想在图表之外找到这个特定的。我对Chart.js做了很多修改，现在我有了：
不幸的是，当标签很长时，显示就不太好：
我的方法不好。是否有人已设法将工具提示显示在圆圈之外？
浏览 1提问于2015-07-03得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
