javascript - 当我点击我的图表时,我怎样才能做点什么?
问题描述
我想做一个 onClick 事件,当我点击一个栏时它会生成一个控制台日志,我该怎么做?
state = {
chartData: {
labels: [],
datasets: [
{
label: 'Covid-19',
data: [],
backgroundColor:'red',
borderColor: 'red',
hoverBackgroundColor: 'green',
hoverBorderColor: 'green',
borderWidth: 4,
responsive: true,
}
],
}
}
<div className="container">
<Bar data={this.state.chartData}}/>
</div>
解决方案
请尝试如下代码段。
onClick = (e) => {
var data = e.target.data;
console.log(data);
}
...
state = {
chartData: {
labels: [],
datasets: [
{
label: 'Covid-19',
data: [],
backgroundColor:'red',
borderColor: 'red',
hoverBackgroundColor: 'green',
hoverBorderColor: 'green',
borderWidth: 4,
responsive: true,
}
],
}
}
<div className="container">
<Bar onClick={(e)=>this.onClick()} data={this.state.chartData}}/>
</div>
推荐阅读
- python - 多次匹配括号内的文本
- python - Tinymce - name='text' 的无效表单控件不可聚焦
- python - 从文本文件中读取并存储在数组中
- ruby-on-rails - Rails:如果模型属性为真,则在视图中执行以下操作
- reactjs - 为什么useState在获取数据后不起作用
- java - 使用 Apache poi 断开指向外部工作簿的链接
- c# - 如何根据命令行中的列表框选择执行单独的脚本?
- reactjs - 我应该在这个简单的 ReactJS 页面中使用 State 还是 Props?
- wordpress - 为什么我的 wordpress 网站需要花费太多时间才能从服务器获得响应?
- django - 运行 vue 开发模式与生产时的不一致