首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

有没有办法在Plotly中获取单击点的"customdata“属性?

在Plotly中,可以通过设置customdata属性来为每个数据点附加自定义的数据。当用户点击某个数据点时,可以通过事件回调函数获取该点的customdata属性。

以下是一个使用Plotly和JavaScript的示例,展示了如何在点击事件中获取customdata属性:

代码语言:txt
复制
// 假设我们有一个散点图
var trace = {
  x: [1, 2, 3, 4],
  y: [10, 11, 12, 13],
  mode: 'markers',
  marker: { size: 12 },
  customdata: ['A', 'B', 'C', 'D'], // 自定义数据
  type: 'scatter'
};

var data = [trace];

var layout = {
  title: 'Click on Points to See CustomData'
};

Plotly.newPlot('myDiv', data, layout);

// 添加点击事件监听器
document.getElementById('myDiv').on('plotly_click', function(data){
  var point = data.points[0]; // 获取点击的点
  if(point) {
    console.log('Customdata for this point:', point.customdata); // 打印customdata
  }
});

在这个例子中,每个数据点的customdata属性被设置为一个字符串。当用户点击图表上的一个点时,控制台会输出该点的customdata值。

如果你在使用Python的Plotly库,可以通过回调函数来实现类似的功能:

代码语言:txt
复制
import plotly.graph_objs as go
from plotly.subplots import make_subplots
import dash
from dash import dcc, html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

fig = make_subplots()
fig.add_trace(go.Scatter(x=[1, 2, 3, 4], y=[10, 11, 12, 13], mode='markers', customdata=['A', 'B', 'C', 'D']))

app.layout = html.Div([
    dcc.Graph(id='example-graph', figure=fig),
    html.Div(id='click-data')
])

@app.callback(
    Output('click-data', 'children'),
    [Input('example-graph', 'clickData')]
)
def display_click_data(clickData):
    if clickData is not None:
        point = clickData['points'][0]
        return f'Customdata for this point: {point["customdata"]}'

if __name__ == '__main__':
    app.run_server(debug=True)

在这个Python示例中,我们使用了Dash框架来创建一个交互式的Plotly图表,并设置了一个回调函数来处理点击事件。当用户点击图表上的一个点时,页面上会显示该点的customdata值。

这些示例展示了如何在Plotly图表中附加和使用customdata属性,并在用户交互时获取这些数据。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

8分3秒

Windows NTFS 16T分区上限如何破,无损调整块大小到8192的需求如何实现?

16分8秒

人工智能新途-用路由器集群模仿神经元集群

领券