- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在使用 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
最佳答案
使用 Chart.js v2.6.0 测试
全局设置就可以了:
Chart.defaults.global.hover.intersect = false;
或直接在图表配置中:
options: {
hover: {
intersect: false;
}
}
以及数据集的点设置。
例如
datasets: [{
label: 'My First dataset',
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgb(255, 99, 132)',
data: [10, 30, 46, 2, 8, 50, 0],
fill: false,
pointBorderColor: 'rgba(0, 0, 0, 0)',
pointBackgroundColor: 'rgba(0, 0, 0, 0)',
pointHoverBackgroundColor: 'rgb(255, 99, 132)',
pointHoverBorderColor: 'rgb(255, 99, 132)'}],...
window.onload = function() {
const mode = 'index';
const intersect = false;
const config = {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgb(255, 99, 132)',
data: [10, 30, 46, 2, 8, 50, 0],
fill: false,
pointBorderColor: 'rgba(0, 0, 0, 0)',
pointBackgroundColor: 'rgba(0, 0, 0, 0)',
pointHoverBackgroundColor: 'rgb(255, 99, 132)',
pointHoverBorderColor: 'rgb(255, 99, 132)',
}, {
label: 'My Second dataset',
borderColor: 'rgb(54, 162, 235)',
backgroundColor: 'rgb(54, 162, 235)',
data: [7, 49, 46, 13, 25, 30, 22],
fill: false,
pointBorderColor: 'rgba(0, 0, 0, 0)',
pointBackgroundColor: 'rgba(0, 0, 0, 0)',
pointHoverBackgroundColor: 'rgb(54, 162, 235)',
pointHoverBorderColor: 'rgb(54, 162, 235)',
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Mode: index, intersect = false'
},
tooltips: {
mode: 'index',
intersect: intersect,
},
hover: {
mode: mode,
intersect: intersect
},
}
};
const ctx = document.getElementById('canvas').getContext('2d');
const chart = new Chart(ctx, config);
}
<canvas id="canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
关于javascript - chartjs 在悬停在折线图上时显示点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33906174/
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
折线图是一种用于可视化数据变化趋势的图表,它可以用于表示任何数值随着时间或类别的变化。 折线图由折线段和折线交点组成,折线段表示数值随时间或类别的变化趋势,折线交点表示数据的转折点。 折
我是 d3 和 typescript 的新手。 我正在尝试使用 d3 v4 和 typescript 创建一个简单的折线图。 但是,我收到了一个 typescript 错误,如下图所示: 问题是什么?
我是 Qlikview 的新手,经过几次失败的尝试后,我不得不请求一些有关 Qlikview 中图表的指导。我想创建折线图,其中包含: 一维 - 一个月的时间段按天数分割 一个表达式 - 每天创建的任
我正在尝试使用 Firebase 实时数据库中的数据在 Android 中制作折线图。 这是数据库的结构: enter image description here 这是代码: public clas
我有一个 TSQL 查询,它提供了一些性能基线的一个月数据。我用折线图显示数据。现在我想在报告中添加更多参数,以提供从两个不同月份选择数据的选项,并将其显示在同一个折线图中以进行比较。我不知道如何开始
我有一个简单(但非常大)的数据集,其中包含从 4 月到 8 月在不同站点进行的计数。 在 4 月中旬和 7 月之间,没有零计数 - 但零线从最早到最晚的日期延伸。 以下是用于制作上述图表的部分数据(列
我正在创建一个折线图,我想在不改变线条长度的情况下增加线条的高度或厚度。 在增加宽度属性之前,它看起来像这样: 增加宽度属性后,它看起来像这样: 我只想增加 height,但是没有这样的属性,所以我尝
我想在折线图的顶部显示值。我看过this answer这很有帮助,但它改变了折线图节点。我想要的是相同的想法,但不在节点上显示值,而是在它们附近(可能在它们的右侧和上方)显示值,例如:
我正在尝试使用谷歌图表以折线图的形式显示mysql数据。我认为问题出在我尝试格式化谷歌图表数据的部分。我的代码有什么问题吗? $sth = mysql_query("SELECT * FROM rea
我有 JavaFX LineChart 和一些带有 XYChart.Series 对象的数据 XYChart.Series series = new XYChart.Series(); series.
给定: 理想图 - 描绘了我的机器应该具有的预期读数。实际图表 - 描述我的机器在该实例中的实际读数。 X轴:来自机器的力(N) Y 轴:时间 这两个图都是使用 python 中的 pyplot 库创
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。 关闭 6 年前。
<% function table2(total,table_x,table_y,all_width,all_height,line_n
我想根据数据中的一列离散值过滤使用 plotly 创建的图表。最终目标是能够使用按钮来更新过滤值,所以我不想事先过滤数据。 library(plotly) df % filter(group1=
我正在尝试在 JavaFX 中创建折线图。此折线图应该有一个轴 (y) 与数字和另一个轴 (x) 与日期。日期范围应该由用户使用两个日期选择器来选择。现在这是我的问题:折线图只有类别和数字轴。有什么方
我正在使用 nivo 折线图,并希望将 x 轴用作时间线,最多一分钟。 不幸的是,我无法呈现该图表,因为它无法正确读取日期。例如,这是我的数据的一部分: { x: "2020-04-24T13:07:
我有一个用 gRaphael 创建的折线图。它有轴和刻度线,但我想要网格线。是否有内置的方法来实现这一点或可以帮助我的附加库? 最佳答案 gRaphael 没有添加网格线的内置方法,但绘制它们非常容易
我正在生成一份报告,该报告是根据查询字符串在网页的页面加载时生成的。我在电子表格中生成的单元格数据完全符合我的要求。现在我需要添加一个折线图。数据是动态的,行数会有所不同。 搜索后没有信息,这与在 .
我正在尝试使用 highcharts 中每 x 秒更新一次的折线图。理想情况下,我希望它使用一些特定数据进行初始化,并每 x 秒轮询一次 Web 服务,并进行相应更新。 目前,我只是尝试使用网络服务中
我是一名优秀的程序员,十分优秀!