- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我正在尝试使用 Chart.js 将点击事件添加到我的折线图中.我已经启用了工具提示来显示折线图中的信息,但我还想添加一个单击方法,让我知道用户在 x 轴上单击的位置。现在我只想弹出一个警报,给我用户点击的 x 轴上的值。
研究:
我浏览了 documentation of Chart.js我遇到了这个方法:.getPointsAtEvent(event)
Calling getPointsAtEvent(event) on your Chart instance passing an argument of an event, or jQuery event, will return the point elements that are at that the same position of that event.
canvas.onclick = function(evt){
var activePoints = myLineChart.getPointsAtEvent(evt);
// => activePoints is an array of points on the canvas that are at the same position as the click event. };
我只是不知道如何使用或在我的代码中将函数放置在何处。如果有人能帮我弄清楚在哪里可以将其添加到我的代码中,将不胜感激!
我的代码:(在 javascript 中)
//NOTE: the div 'roomForChart' has been already declared as <div id="roomForChart"></div>
//creating html code inside of javascript to display the canvas used for the graph
htmlForGraph = "<canvas id='myChart' width ='500' height='400'>";
document.getElementById('roomForChart').innerHTML += htmlForGraph;
//NOW TO CREATE DATA
//the data for my line chart
var data = {
labels: ["Aug 1", "Aug 2", "Aug 3","Aug 4","Aug 5"], //the x axis
datasets: [
{ //my red line
label: "Usage Plan",
fillColor: "rgba(255,255,255,0.2)", //adds the color below the line
strokeColor: "rgba(224,0,0,1)",//creates the line
pointColor: "rgba(244,0,0,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [1024, 1024, 1024, 1024, 1024]
},
{ //my green line
label: "Overall Usage",
fillColor: "rgba(48,197,83,0.2)",
strokeColor: "rgba(48,197,83,1)",
pointColor: "rgba(48,197,83,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(48,197,83,1)",
data: [15, 25, 45, 45, 1500]
},
{ //my blue line
label: "Daily Usage",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [15, 10, 20, 0, 5]
}
] //ending the datasets
}; //ending data
//creating a variable for my chart
var ctx = document.getElementById("myChart").getContext("2d");
//code to create a maximum y value on the chart
var maxUsage = 1024;
var maxSteps = 5;
var myLineChart = new Chart(ctx).Line(data, {
pointDot: false,
scaleOverride: true,
scaleSteps: maxSteps,
scaleStepWidth: Math.ceil(maxUsage / maxSteps),
scaleStartValue: 0
});
//what I have tried but it doesn't show an alert message
ctx.onclick = function(evt){
var activePoints = myLineChart.getPointsAtEvent(evt);
// => activePoints is an array of points on the canvas that are at the same position as the click event.
alert("See me?");
};
对于那些难以想象图表的人来说:
希望我提供了足够的信息以获得一些帮助。如果我需要解释一下,请告诉我。先感谢您!!! :)
最佳答案
如果您使用的是新的 ChartJs 版本,请使用:
canvas.onclick = function(evt){
var activePoints = myLineChart.getElementsAtEvent(evt);
};
关于javascript - 如何使用 Chart.js 向我的折线图添加点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25514802/
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,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 服务,并进行相应更新。 目前,我只是尝试使用网络服务中
我是一名优秀的程序员,十分优秀!