个人中心
gpt4 book ai didi

python - 如何动态调整 Bokeh 图大小

转载 作者：太空宇宙 更新时间：2023-11-04 07:36:47 25 4
gpt4 key购买 nike

我的问题与昨天的问题非常相似: Bokeh resize plot dynamically

但由于我觉得两者之间的解决方案可能有点不同，所以我想发布自己的解决方案。我还复制了整个代码，以便任何人都可以复制/粘贴并运行它。

在下面的代码中，我基本上希望第二个 Bokeh 图在我单击标题时占据整个视口(viewport)，并在下一次单击时返回到原始大小。

作为辅助信息，我从github上借用了部分代码。 Bootstrap4 用于 css。用于动画的 TweenMax，当然绘图库是 Bokeh。包含的引导卡大小按预期更改，但绘图没有。如果我调整浏览器的大小，绘图会以某种方式自行调整大小。

import pandas as pd
import numpy as np
import io
import random
from jinja2 import Template
from bokeh.embed import components
from bokeh.plotting import figure
from bokeh.resources import INLINE
from bokeh.util.browser import view


PLOT_OPTIONS = dict(plot_width=800, plot_height=300)
SCATTER_OPTIONS = dict(size=12, alpha=0.5)

data = lambda: [random.choice([i for i in range(100)]) for r in range(10)]

# red = figure(sizing_mode='scale_width', tools='pan', **PLOT_OPTIONS)
red = figure(sizing_mode='stretch_both', tools='pan')
red.scatter(data(), data(), color="red", **SCATTER_OPTIONS)

# blue = figure(sizing_mode='fixed', tools='pan', **PLOT_OPTIONS)
blue = figure(sizing_mode='stretch_both', tools='pan', id="blue_fig")
blue.scatter(data(), data(), color="blue", **SCATTER_OPTIONS)

green = figure(sizing_mode='scale_width', tools='pan', **PLOT_OPTIONS)
green.scatter(data(), data(), color="green", **SCATTER_OPTIONS)


########## RENDER PLOTS ################

# Define our html template for out plots
template = Template('''<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
{{ js_resources }}
{{ css_resources }}
</head>
<body>
<div id="panel">
<div class="col-md-6" id="card1">
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-sm-4">
                    <h4 class="card-title mb-0">plot 1</h4>
                </div>
            </div>
            <div id="div1" style="height:400px;">
            {{ div1 }}
            </div>
        </div>
    </div>
</div>
<div class="col-md-6" id="card2">
    <div class="card">            
        <div class="card-body" style="background:yellow; border:solid 1px red">
            <div class="row">
                <div class="col-sm-4">
                    <h4 class="card-title mb-0"><a href='#' id="plot2">plot 2</a></h4>
                </div>
            </div>        
            <div id="div2" style="height:400px;">
            {{ div2 }}
            </div>
        </div>
    </div>
</div>
</div>
<script>
(function($){
   var i = 0;
   var po = $('#panel').offset();
   var co = $('#card2').offset();   
   var x=0, y=po.top-co.top;
    $('#plot2').click(function(){
      if(i==0){    
        TweenMax.to($("#card2"), 0.5, {x:x, y:y, className:"col-md-12"});
        TweenMax.to($("#div2"), 0.5, {height:800});
        i = 1;
      } else {
        TweenMax.to($("#card2"), 0.5, {x:0, y:0, className:"col-md-6"});
        TweenMax.to($("#div2"), 0.5, {height:400});   
        i = 0;   
      }
      $(window).resize();
      $(window).trigger('resize');
    });      
})(jQuery);
</script>
</body>
</html>
''')

resources = INLINE

js_resources = resources.render_js()
css_resources = resources.render_css()

script, div = components(red)
div1 = div+script

script, div = components(blue)
div2 = div+script

html = template.render(js_resources=js_resources,
                       css_resources=css_resources,
                       div1=div1,
                       div2=div2)

filename = 'embed_multiple_responsive.html'

with io.open(filename, mode='w', encoding='utf-8') as f:
    f.write(html)

view(filename)

最佳答案

这里是对你的代码的修改:

向 figure() 添加一个 id 参数:

blue = figure(sizing_mode='stretch_both', tools='pan', id="blue_fig")

添加onUpdate事件并调用Bokeh.index["blue_fig"].resize():

TweenMax.to($("#div2"), 0.5, {height:800, onUpdate:function(){Bokeh.index["blue_fig"].resize();}});
TweenMax.to($("#div2"), 0.5, {height:400, onUpdate:function(){Bokeh.index["blue_fig"].resize();}});

如果图形很复杂，resize()很慢，将onUpdate改为onComplete。

关于python - 如何动态调整 Bokeh 图大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48879674/

25 4 0
文章推荐： css - 使用包含媒体时出现 SCSS 语法错误
文章推荐： c - 如何在 x86 DOS 程序集中读取没有 "consuming"的键盘输入？
文章推荐： c双指针数组
文章推荐： python - 根据部分字符串去除冗余字符串
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com