如何确定图表js上点击了哪个条
我有一个使用图表 JS 的线形条形图，我想要做的是确定在图表上单击了哪个条形。单击图表上的任何位置时，我得到了答案，但我只想在单击条形时确定并确定该条形的索引，以便我可以显示表格上每个单击的条形的特定详细信息！例如在这张图片上，当点击 2010 年的任何条时，它会给我索引 0，对于 2011 年的任何点击条，它给我 1。但我想要的是当点击 2010 年的第二个条时那么它应该给我索引 1
我的html
<div id = "myTable" class="container-lg" style="margin-left: 300px;">
<div class="table-responsive">
<div class="table-wrapper">
<table class="table table-bordered">
<thead>
<tr style="background-color: #4B4B4B" >
<th style="font-weight: 500; color: white; text-align:center" colspan="2">Feedback from Thamama F</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">John Doe</td>
<td style="text-align:center">John Doe</td>
</tr> <tr>
<td style="text-align:center">John Doe</td>
<td style="text-align:center">John Doe</td>
</tr> <tr>
<td style="text-align:center">John Doe</td>
<td style="text-align:center">John Doe</td>
</tr> <tr>
<td style="text-align:center">John Doe</td>
<td style="text-align:center">John Doe</td>
</tr> <tr>
<td style="text-align:center">John Doe</td>
<td style="text-align:center">John Doe</td>
</tr> <tr>
<td style="text-align:center">John Doe</td>
<td style="text-align:center">John Doe</td>
</tr> <tr>
<td style="text-align:center">John Doe</td>
<td style="text-align:center">John Doe</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript">
function Show() {
var x = document.getElementById("myTable");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
我的JS
'use strict';
window.chartColors = {
red: 'rgb(68, 114, 196)',
orange: 'rgb(255, 192, 0)',
yellow: 'rgb(91, 155, 213)',
green: 'rgb(237, 125, 49)',
blue: 'rgb(165, 165, 165)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(255, 0, 0)'
};
(function(global) {
var Months = [
'2010',
'2011',
'2012',
'2013',
'2014',
'2015',
'2016',
'2017',
'2018',
'2019',
'2020',
'2021'
];
var COLORS = [
'#4dc9f6',
'#f67019',
'#f53794',
'#537bc4',
'#acc236',
'#166a8f',
'#00a950',
'#58595b',
'#8549ba'
];
var Samples = global.Samples || (global.Samples = {});
var Color = global.Color;
Samples.utils = {
// Adapted from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
srand: function(seed) {
this._seed = seed;
},
rand: function(min, max) {
var seed = this._seed;
min = min === undefined ? 0 : min;
max = max === undefined ? 1 : max;
this._seed = (seed * 9301 + 49297) % 233280;
return min + (this._seed / 233280) * (max - min);
},
numbers: function(config) {
var cfg = config || {};
var min = cfg.min || 0;
var max = cfg.max || 1;
var from = cfg.from || [];
var count = cfg.count || 8;
var decimals = cfg.decimals || 8;
var continuity = cfg.continuity || 1;
var dfactor = Math.pow(10, decimals) || 0;
var data = [];
var i, value;
for (i = 0; i < count; ++i) {
value = (from[i] || 0) + this.rand(min, max);
if (this.rand() <= continuity) {
data.push(Math.round(dfactor * value) / dfactor);
} else {
data.push(null);
}
}
return data;
},
labels: function(config) {
var cfg = config || {};
var min = cfg.min || 0;
var max = cfg.max || 100;
var count = cfg.count || 8;
var step = (max - min) / count;
var decimals = cfg.decimals || 8;
var dfactor = Math.pow(10, decimals) || 0;
var prefix = cfg.prefix || '';
var values = [];
var i;
for (i = min; i < max; i += step) {
values.push(prefix + Math.round(dfactor * i) / dfactor);
}
return values;
},
months: function(config) {
var cfg = config || {};
var count = cfg.count || 12;
var section = cfg.section;
var values = [];
var i, value;
for (i = 0; i < count; ++i) {
value = Months[Math.ceil(i) % 12];
values.push(value.substring(0, section));
}
return values;
},
color: function(index) {
return COLORS[index % COLORS.length];
},
transparentize: function(color, opacity) {
var alpha = opacity === undefined ? 0.5 : 1 - opacity;
return Color(color).alpha(alpha).rgbString();
}
};
// DEPRECATED
window.randomScalingFactor = function() {
return Math.round(Samples.utils.rand(500, 2500));
};
// INITIALIZATION
Samples.utils.srand(Date.now());
// Google Analytics
/* eslint-disable */
if (document.location.hostname.match(/^(www\.)?chartjs\.org$/)) {
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-28909194-3', 'auto');
ga('send', 'pageview');
}
/* eslint-enable */
}(this));
var chartData = {
labels: [
'2010',
'2011',
'2012',
'2013',
'2014',
'2015',
'2016',
'2017',
'2018',
'2019',
'2020',
'2021'
],
datasets: [{
type: 'line',
label: '',
backgroundColor: window.chartColors.grey,
borderColor: window.chartColors.grey,
borderWidth: 2,
fill: false,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
]
},
{
type: 'bar',
label: '',
backgroundColor: window.chartColors.red,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
borderColor: 'white',
borderWidth: 1
}, {
type: 'bar',
label: '',
backgroundColor: window.chartColors.orange,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
]
}, {
type: 'bar',
label: '',
backgroundColor: window.chartColors.yellow,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
borderColor: 'white',
borderWidth: 1
}, {
type: 'bar',
label: '',
backgroundColor: window.chartColors.green,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
borderColor: 'white',
borderWidth: 1
}, {
type: 'bar',
label: '',
backgroundColor: window.chartColors.blue,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
borderColor: 'white',
borderWidth: 1
}]
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myMixedChart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
responsive: true,
title: {
display: true,
text: 'Wet Gas'
},
tooltips: {
mode: 'index',
intersect: true
},scales: {
xAxes: [{ barPercentage: 0.5 }]
}
}
});
};
document.getElementById('randomizeData').addEventListener('click',
function() {
chartData.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return randomScalingFactor();
});
});
window.myMixedChart.update();
});
2 个答案:
答案 0 :(得分：1)
您可以在图表声明中尝试此代码并加载您的 html 表格数据
options:{
onClick: graphClickEvent
}
function graphClickEvent(event, array){
if(array.length === 0){
//load table
}
}
答案 1 :(得分：1)
阅读您的评论并了解您的问题后，我想我为您找到了解决方案。
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（即点击了五个条中的哪一个）。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？