홈>
내 질문은 어제 질문 한 내용과 매우 유사합니다. Bokeh 크기 조정 플롯 동적
그러나 해결책이 둘 사이에서 약간 다를 수 있다고 생각하기 때문에 내 자신을 게시하고 싶습니다. 또한 전체 코드를 복사하여 누구나 복사/붙여 넣기 및 실행할 수 있습니다.
아래 코드에서 기본적으로 제목을 클릭하고 다음 클릭시 원래 크기로 돌아 가면 두 번째 Bokeh 플롯이 전체보기 포트를 차지하기를 원합니다.
부가 정보로서, 나는 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)
-
답변 # 1
관련 자료
- Windows 10에서 터미널 크기를 얻는 방법 (PHP 사용)
- python - Bokeh 맵에서 Javascript를 사용하는 방법은 무엇입니까?
- html - SVG를 의사 요소에 맞추는 방법
- ggplot2 - R을 사용하여 다중 상자 그림을 만드는 방법
- python - 방법으로 플롯을 저장하는 방법은 무엇입니까?
- python - 그리드 Matplotlib로 플롯 크기 결정
- pandas - plotly - dash plotly에서 시계열을 그리는 방법
- python - 시계열의 역을 플로팅하는 방법
- dictionary - MATLAB의지도에서 데이터를 플로팅하려면 어떻게해야합니까?
- R에서 조각 별 함수를 그리는 방법은 무엇입니까?
- 애니메이션 GIF 크기를 작게 만들려면 (HTML)
- php - 내부 배열 크기로 배열을 정렬하는 방법
- javascript - Angular 9에서 HTML 페이지를 A4 크기로 분할하는 방법
- python 3.x - 줄거리에 선을 그리는 방법?
- java - 주어진 문자열의 파일 크기를 어떻게 얻습니까?
- c# - Orca를 사용하여 1GB MSI 파일의 크기를 어떻게 줄일 수 있습니까?
- python - 정렬 된 가로 막대를 그리는 방법
- android - 행 항목을 화면에 맞추는 방법
- mount - WSL rootfs의 크기를 줄이려면 어떻게합니까?
- python - 디스플레이에 평균선을 그리는 방법은 무엇입니까?
다음은 코드를 수정 한 것입니다 :
와이즈 비즈 추가
id
에 대한 논쟁 :blue = figure(sizing_mode='stretch_both', tools='pan', id="blue_fig")
추가 이벤트 및 전화onUpdate
: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