我正在尝试使用Chart.js向折线图中添加单击事件。我已经启用了工具提示来显示折线图中的信息,但我还想添加一个单击方法,让我知道用户单击了X轴上的哪个位置。现在我只想弹出一个警报,告诉我用户单击的X轴上的值。
研究部:
我浏览了Chart.js的文档,发现了这个方法:.getPointsAtEvent(事件)
在Chart示例上调用getPointsAtEvent(event),传递事件或jQuery事件的参数,将返回位于该事件相同位置的点元素。
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?");
};
对于那些很难想象图表的人,请看下面的内容:
希望我已经提供了足够的信息来获得一些帮助。如果我需要解释自己,请让我知道。提前感谢!!!:)
6条答案
按热度按时间9nvpjoqh1#
如果您使用的是新的ChartJs版本,请使用以下命令:
mwngjboj2#
更改此行
到这个
然后你会看到你的代码片段,做了一些修改
在onclick处理程序中添加
console.log(activePoints);
,以查看activePoints
变量的内容。可以通过以下方式访问它们
最好先检查属性是否为
undefined
,因为每个单击事件后面都没有数据。62o28rlo3#
我无法使
onclick
方法工作。但我最终设法使用
click
方法运行了它:注:本例适用于条形图--其他图表检索点的方法略有不同(请参阅文档)。
cxfofazt4#
到目前为止,提供的答案接近正确的解决方案,但还不完整。您需要使用getElementsAtEvent()来获取正确的元素,但这会为您提供位于单击的x索引处的元素集合。即使您使用多个数据集,这也可能是多个值,每个数据集一个值。
要找出从中提取的正确数据集,请调用getDatasetAtEvent()方法。这将返回包含所单击的数据集元素的元素列表。从其中任何一个元素中选择数据集ID,它们都是相同的ID。
把这两个放在一起,你就得到了你所需要的调用,来计算出被点击的元素中包含的数据。当你初始化你的数据集时,传入不仅仅是x和y值,这将允许你用这个事件做各种各样的巧妙的技巧。(例如,触发一个弹出窗口,提供关于这个事件的更详细的信息)
也许有一种更简洁的方法来获取这些数据,但是我没有发现它会在图表文档和票据中出现。
zujrkrfu5#
版本3
您也可以使用建置
onClick
选项,取得下列参数:(event, activeElements, chartInstance)
个所以你可以读取第二个元素的数组来查看哪些元素是活动的。默认情况下这个数组只包含一个项目,但是如果你改变交互模式,这里可能会有多个项目。
第一个
在v3中,
getElementsAtEvent
已被删除,现在您必须用途:chart.getElementsAtEventForMode(event, 'index', { intersect: true }, false)
如果要使用
getDatasetAtEvent
,现在必须用途:chart.getElementsAtEventForMode(e, 'dataset', { intersect: true }, false)
whitzsjs6#
在当前版本(3.9.1)中,我再也找不到
.getPointsAtEvent(event)
了。作为一个对我有效的解决方案,我在Chart.js GitHub代码示例中找到了基本上,在生成工具提示时,您将数据保存到变量
selectedPoint
中,并在onClick
事件中开始使用该变量。