确定用户点击了哪个图表
我正在使用chart.js绘制多个折线图。当用户点击其中一个图表时，我需要知道是哪个图表。为了捕捉用户的单击，我在图表的选项中添加了事件:['click']以及一个onclick:clicked以在用户单击图表时调用函数clicked。现在我有了这个：
null
let chLine = document.getElementById("chLine");
let chartData = {
labels: ['l1', 'l2', 'l3', 'l4', 'l5', 'l6', 'l7', 'l8', 'l9'],
datasets: [
{
label: 'c1',
data: [0.3, 0.4, 0.5, 0.35, 0.2, 0.5, 0.4, 0.55, 0.6],
backgroundColor: 'transparent',
borderColor: '#e6194b',
borderWidth: 1,
pointBackgroundColor: '#e6194b'
},
{
label: 'c2',
data: [0.7, 0.5, 0.2, 0.4, 0.6, 0.1, 0.88, 0.35, 0.45],
backgroundColor: 'transparent',
borderColor: '#3cb44b',
borderWidth: 1,
pointBackgroundColor: '#3cb44b'
}
]
}
if (chLine) {
new Chart(chLine,{
type: 'line',
data: chartData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
position: 'top',
labels: {
boxWidth: 5
}
},
events: ['click'],
onClick: clicked
}
}
);
}
function clicked(c, i) {
console.log(c, i)
}<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div class="row my-3">
<div class="col">
<h4>Chart</h4>
</div>
</div>
<div class="row my-2">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<canvas id="chLine" height="100"></canvas>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script src="test.js"></script>
</body>
</html>null
每次单击图表时，它都会给出一个数组（包含每个图表的信息），还会给出一个包含click事件信息的对象。但我似乎找不到信息来断定哪个图表被点击了。我怎么能这么做？
共有1个答案
在clicked函数中，可以使用GetElementatEvent(c)&_DataSetIndex；获取图表数据的索引，然后使用该索引获取用于绘制折线图的数据。在本例中，另一个字段被添加到数据中，单击时，该名称字段将被控制。在这种情况下，您需要单击图表圆圈
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<div class="container">
<div class="row my-3">
<div class="col">
<h4>Chart</h4>
</div>
</div>
<div class="row my-2">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<canvas id="chLine" height="100"></canvas>
</div>
</div>
</div>
</div>
</div>
null
let chLine = document.getElementById("chLine");
let chartData = {
labels: ['l1', 'l2', 'l3', 'l4', 'l5', 'l6', 'l7', 'l8', 'l9'],
datasets: [{
name: 'First Chart',
label: 'c1',
data: [0.3, 0.4, 0.5, 0.35, 0.2, 0.5, 0.4, 0.55, 0.6],
backgroundColor: 'transparent',
borderColor: '#e6194b',
borderWidth: 1,
pointBackgroundColor: '#e6194b'
},
{
name: 'Second Chart',
label: 'c2',
data: [0.7, 0.5, 0.2, 0.4, 0.6, 0.1, 0.88, 0.35, 0.45],
backgroundColor: 'transparent',
borderColor: '#3cb44b',
borderWidth: 1,
pointBackgroundColor: '#3cb44b',
id: '1',
}
]
}
if (chLine) {
var myLineChart = new Chart(chLine, {
type: 'line',
data: chartData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
position: 'top',
labels: {
boxWidth: 5
}
},
events: ['click'],
onClick: clicked
}
});
}
function clicked(c, i, x) {
let getDataSetIndex = this.getElementAtEvent(c)[0]._datasetIndex;
console.log(chartData.datasets[getDataSetIndex].name)
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<div class="container">
<div class="row my-3">
<div class="col">
<h4>Chart</h4>
</div>
</div>
<div class="row my-2">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<canvas id="chLine" height="100"></canvas>
</div>
</div>
</div>
</div>
</div>-
我有一个listView，它充满了字符串的数组列表，我想让它可点击...但我无法识别哪个项目被点击了 我做了这个，但没用！ 有办法知道被点击的字符串吗？如果没有，是否有办法知道被点击项目的位置？
-
我试图构建一个GUI，它有许多按钮（JButton）/下拉项（JMenuItem），当按下每个包含字母的按钮时，相关的字母将添加到标签中。 我无法识别按下了哪个按钮。你能给我一个关于如何做到这一点的提示吗？
-
我有一个页面，访问者会得到两个页面，其中有两个按钮：是和否。 以下是html： 我在js上有点轻，但我从控制台中知道，如果我这样做： 然后返回两个按钮。 如果我这样做： 第一个按钮返回文本内容“否”。如果将0更改为1，则返回“是”。 该脚本在Google Tag Manager中称为宏，当 “单击发生”和“单击元素的ID包含”nim_authCreateAcctConfig”“（因此包含两个按钮）
-
问题内容： 我有一个包含多个链接的页面，可将用户重定向到其他页面。我以为使用表单会更好，所以我定义了一个带有Multiple的WTForms 。如何确定单击了哪个按钮并基于该按钮重定向？ 问题答案： 您在表单中添加了两个按钮，因此请检查哪个字段的数据是。
-
我知道，在Java中的事件驱动程序中，可以找出是什么对象导致了事件（例如，选择了，因此会发生特定的操作）。我的问题是，如果在一个按钮组中有两个，两个按钮都添加了动作侦听器，并且您一直在从一个按钮到另一个按钮中进行选择，那么是否有可能找到以前选择的？换句话说，如果我选择了另一个，在选择当前之前，是否可以编写代码来确定之前选择了哪个？ 编辑：我会更具体。我正在创建一个“虚构”的餐厅程序。在其中，我列出
-
问题是：这种方法是信息窗口内容的一般实现，但每个标记都要显示自己的信息。因此，据我所知，我必须在getInfoContents（Marker Marker）上检测哪些标记被单击，以便从我的数据结构中加载必要的信息以在信息窗口上显示。问题是：我如何识别点击的标记'Marker'代表什么实体？我的意思是，只有getInfoContents上的对象标记被触发以显示信息窗口，我如何检测哪个是要显示的正确信