我 正在 使用 Chartjs v.1.0.2 ， 并 试图 设置 一 个 点 点 只 出现 在 悬停 在 图表 上 。 之后 ， 它 应该 被 删除 。 我 已经 设法 显示 它 ， 通过 改变 对象 的 值 ， 但 它 不是 流体 运动 ， 它 不 总是 显示 点 。 这 也 不 隐藏 它 在 悬停 。 它 怎么 能 是 流体 和 隐藏 时 ， 鼠标 没有 结束 ？
window.onload = function(){
var ctx = $("#chart1").get(0).getContext("2d");
var chart1 = new Chart(ctx).Line(data1, options);
$("#chart1").hover(function(e) {
var activeBars = chart1.getPointsAtEvent(e);
activeBars[0].display = true;
// console.log(activeBars[0]);
chart1.update();
});
};
var data1 = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(95,186,88,0.7)",
strokeColor: "rgba(95,186,88,1)",
pointColor: "rgba(95,186,88,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
var options = {
responsive: true,
bezierCurve : false,
scaleShowLabels: false,
scaleFontSize: 0,
pointDot : false,
scaleBeginAtZero: true,
scaleShowHorizontalLines: false,
scaleShowVerticalLines: true,
scaleGridLineColor : "rgba(232,232,232)",
showTooltips: true,
customTooltips: function (tooltip) {
var tooltipEl = $('#chartjs-tooltip');
if (!tooltip) {
tooltipEl.css({
opacity: 0
});
return;
}
tooltipEl.removeClass('above below');
tooltipEl.addClass(tooltip.yAlign);
// split out the label and value and make your own tooltip here
var parts = tooltip.text.split(":");
var innerHtml = '<span>' + parts[0].trim() + '</span> : <span><b>' + parts[1].trim() + '</b></span>';
tooltipEl.html(innerHtml);
tooltipEl.css({
opacity: 1,
left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
fontFamily: tooltip.fontFamily,
fontSize: tooltip.fontSize,
fontStyle: tooltip.fontStyle,
});
}
};中 的 每 一 个
简化 的 fiddle
5条答案
按热度按时间jtw3ybtb1#
使用 Chart.js v2.6.0 进行 测试
全局 设置 可以 解决 这个 问题 ：
中 的 每 一 个
或者 直接 在 图表 配置 中 ：
格式
和 数据 集 的 点 设置 。
例如 ：
格式
第 一 个
snvhrwxg2#
编辑 ： 以下 解决 方案 适用 于 Chart.js v1.0.2 （ 在 提出 此 解决 方案 时 的 最 新 版本 ） 。 请 参考 this answer ， 它 提供 了 Chart.js v2.x.x 的 解决 方案 。
不久 前 我 遇到 过 类似 的 情况 ， 并 通过 将 默认 点 设置 为 " 不可 见 " 来 解决 此 问题 ， 如下 所 示 ：
以上 两 个 步骤 使 默认 的 点 变得 很 小 ， 再 加上 透明 的 点 笔画 ， 使 默认 的 点 变得 不可 见 。 现在 如果 我们 把 * * pointDotStrokeWidth * * 做 得 足够 大 ， 就 可以 达到 我们 想要 的 悬停 效果 。
[Note： 通过 使 * * pointColor * * 透明 可以 达到 相同 的 效果 ， 但 如果 绘制 多 个 数据 集 ， 则 工具 提示 不会 在 数据 值 旁边 显示 相应 的 线 颜色 。 ]
示例 如下 （ 或者 您 可以 签 出 此 Fiddle: ChartJS - Show Points on Hover ） ：
第 一 个
flvtvl503#
ckx4rj1h4#
尝试 使用
mouseover和mouseout， 如下 所 示 。 同样 ， 您 也 可以 使用mouseenter和mouseleave方法 来 处理 事件 。中 的 每 一 个
6kkfgxo05#
这是一个六年前的问题，但我认为在2022年我们可以使用ChartJS version 4.0.1。
ChartJS支持interactions行为，可以通过图表配置上的
interaction、hover或tooltips设置进行配置。为此，我们将使用
hover设置并选择index模式。此模式查找相同索引处的项。如果intersect设置为false，则使用x方向上最近的项来确定索引。下面是一个工作片段
第一个