Javascript 如何确定在图表上单击了哪个栏

Javascript 如何确定在图表上单击了哪个栏,javascript,html,css,chart.js,Javascript,Html,Css,Chart.js,我有一个使用chart JS的条形图,我想做的是确定在图表上单击了哪个条形图。我在点击图表上的任何位置时都会得到答案,但我只想在点击条形图时进行标识,并标识该条形图的索引,这样我就可以在表格上显示每个点击条形图的具体细节!例如,在这张图片上,当点击2010年的任何一条时,它会给我索引0,而点击2011年的任何一条时,它会给我索引1。但我想要的是,当点击2010年的第二条时,它会给我索引1 我的html Thaf的反馈 无名氏 无名氏 无名氏 无名氏 无名氏 无名氏 无名氏 无名氏 无名氏 无名

我有一个使用chart JS的条形图,我想做的是确定在图表上单击了哪个条形图。我在点击图表上的任何位置时都会得到答案,但我只想在点击条形图时进行标识,并标识该条形图的索引,这样我就可以在表格上显示每个点击条形图的具体细节!例如,在这张图片上,当点击2010年的任何一条时,它会给我索引0,而点击2011年的任何一条时,它会给我索引1。但我想要的是,当点击2010年的第二条时,它会给我索引1 我的html


Thaf的反馈
无名氏
无名氏
无名氏
无名氏
无名氏
无名氏
无名氏
无名氏
无名氏
无名氏
无名氏
无名氏
无名氏
无名氏
函数Show(){
var x=document.getElementById(“myTable”);
如果(x.style.display==“无”){
x、 style.display=“block”;
}否则{
x、 style.display=“无”;
}
}
我的JS

“严格使用”;
window.ChartColor={
红色:“rgb(68114196)”,
橙色:“rgb(255192,0)”,
黄色:“rgb(91155213)”,
绿色:“rgb(23712549)”,
蓝色:“rgb(165165165)”,
紫色:“rgb(153102255)”,
灰色:“rgb(255,0,0)”
};
(职能(全球){
风险值月份=[
'2010',
'2011',
'2012',
'2013',
'2014',
'2015',
'2016',
'2017',
'2018',
'2019',
'2020',
'2021'
];
变量颜色=[
"4dc9f6",,
"f67019",,
"f53794",,
"537bc4",,
"acc236",,
"166a8f",,
“#00a950”,
"58595b",,
"8549ba"
];
var Samples=global.Samples | |(global.Samples={});
var Color=global.Color;
Samples.utils={
//改编自http://indiegamr.com/generate-repeatable-random-numbers-in-js/
srand:功能(seed){
这个._seed=种子;
},
兰德:功能(最小值、最大值){
var seed=这个;
min=min==未定义?0:min;
max=max==未定义?1:max;
这个._seed=(seed*9301+49297)%233280;
返回最小值+(此._seed/233280)*(最大值-最小值);
},
数字:函数(配置){
var cfg=config | |{};
var min=cfg.min | 0;
var max=cfg.max | | 1;
var from=cfg.from | |[];
var count=cfg.count | | 8;
var小数=cfg.decimals | | 8;
var连续性=cfg.continuity | | 1;
var dfactor=Math.pow(10,小数)| 0;
var数据=[];
var i,价值;
对于(i=0;i如果(this.rand(),您可以在图表声明中尝试此代码并加载html表数据

options:{
       onClick: graphClickEvent
}

function graphClickEvent(event, array){
   if(array.length === 0){
     //load table
   }
}

在阅读了你的评论并理解了你的问题之后,我想我为你找到了一个解决方案

options:{
   onClick: function (event, elements){  
       if (elements.length > 0) {   
           // To get the clicked element
           const clickedElement = this.getElementAtEvent(event);

           // To get the group id of the clicked element
           const groupIndex = clickedElement[0]._index;

           // To get the id of the clicked element with in the group
           const barIndex = clickedElement[0]._datasetIndex;
       }
   }
}

通过这种方式,您可以知道单击的元素是什么,它属于哪个组/列,以及它在组中具有哪个id(即,单击了五个条中的哪个条).

这是否回答了您的问题?@Geshode但我刚刚注意到,当单击图表上的任何位置时,它都会起作用!我如何修改它以在条形图上单击并识别条形图索引,因为已接受答案中的注释是,
'array[0].\u index'
为您提供已单击条的索引。通过该索引,您可以识别单击了哪个条。@Geshode'数组[0]“U索引”这样会使每组条都成为相同的索引。我的意思是,如果我们每年有5条条,那么第一年所有的条都是索引0,第二年所有的条都是索引1。它给出了我的年份,但不是哪个条。你明白我的意思了吗,先生?@Geshode请查看我上面的编辑是的!!谢谢,但我只是注意到当单击任何一条时它都会起作用我认为你的答案是正确的,但我不知道问题出在哪里,但有点不对劲,因为现在图表根本没有向我显示,可能代码中有语法错误,或者它现在确实向我显示了错误,但图表没有显示这段代码我知道问题所在…clickedElement const给了我一个[Object Object]的结果,它没有值!你知道为什么吗?那么当写“const barIndex=clickedElement[0]\u datasetIndex”然后它就不起作用了。但是groupIndex工作得很好,并且给了我正确的组数。对不起,那是一个错误。我修正了它。我非常感谢你的病人,感谢你的时间和一切
options:{
       onClick: graphClickEvent
}

function graphClickEvent(event, array){
   if(array.length === 0){
     //load table
   }
}
options:{
   onClick: function (event, elements){  
       if (elements.length > 0) {   
           // To get the clicked element
           const clickedElement = this.getElementAtEvent(event);

           // To get the group id of the clicked element
           const groupIndex = clickedElement[0]._index;

           // To get the id of the clicked element with in the group
           const barIndex = clickedElement[0]._datasetIndex;
       }
   }
}