python窗口显示表格_python – 在图表弹出窗口中放置图表

此篇博客介绍了如何使用Plotly JavaScript库创建一个交互式图表,当鼠标悬停在数据点上时,会弹出一个显示对应数据点值的动态popup图表。通过`onHover`函数和`Plotly.newPlot`方法,展示了如何实现实时数据展示的技巧。
摘要由CSDN通过智能技术生成

(function main() {

var Plot = { id: 'plot', domain: 'https://plot.ly' };

Plot.onHover = function(message) {

var y = message.points[0].y; /*** y value of the data point(bar) under hover ***/

var line1 = {

x: [0.25,0.5,1], /*** dummy x array in popup-chart ***/

y: [1/y, 2, y], /*** dummy y array in popup-chart ***/

mode: 'lines+markers'

};

var layout = {

title:'Popup graph on hover',

height: 400,

width: 480

};

Plotly.newPlot('myDiv', [ line1 ], layout); // this finally draws your popup-chart

};

Plot.init = function init() {

var pinger = setInterval(function() {

Plot.post({task: 'ping'});

}, 500);

function messageListener(e) {

var message = e.data;

if(message.pong) {

console.log('Initial pong, frame is ready to receive');

clearInterval(pinger);

Plot.post({

'task': 'listen',

'events': ['hover']

});

}

else if(message.type === 'hover') {

Plot.onHover(message);

}

}

window.removeEventListener('message', messageListener);

window.addEventListener('message', messageListener);

};

Plot.post = function post(o) {

document.getElementById(Plot.id).contentWindow.postMessage(o, Plot.domain);

};

Plot.init();

})();

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值