Обновление сюжета Bokeh в блокноте, но не в статическом HTML
Это первый раз, чтобы задать вопрос здесь. Я совершенно новичок в HTML, CSS, JavaScipt, Django, Python и Bokeh . Я плохо знаю английский. И я буду благодарен за вашу помощь.
Я сталкиваюсь с проблемой, когда хочу реализовать простую функцию. Здесь есть 2 участка. Когда я нажимаю на круг первого графика, круги, не связанные со вторым местом, будут скрыты. Это работа в тетради. Но когда я добавляю это на страницу HTML . Второй сюжет не изменится. Я использую Django+ Python для реализации этой функции. И я использую тег компонента HTML для добавления графиков на веб-страницу.
Прошу прощения, что мне не разрешают выкладывать сюда картинки, но есть ссылки.
Вот GIF, когда он работает в ноутбуке. работать в тетради
И это GIF, когда он не работает в статическом HTML . не работает в HTML
Вот код HTML .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link
href="https://cdn.pydata.org/bokeh/release/bokeh-0.13.0.min.css"
rel="stylesheet" type="text/css">
<link
href="https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.13.0.min.css"
rel="stylesheet" type="text/css">
<link
href="https://cdn.pydata.org/bokeh/release/bokeh-tables-0.13.0.min.css"
rel="stylesheet" type="text/css">
<script src="https://cdn.pydata.org/bokeh/release/bokeh-0.13.0.min.js"></script>
<script src="https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.13.0.min.js"></script>
<script src="https://cdn.pydata.org/bokeh/release/bokeh-tables-0.13.0.min.js"></script>
</head>
<body>
{{ script2 |safe }}
{{ div2 |safe }}
{{ script3 |safe }}
{{ div3 |safe }}
</body>
</html>А вот и код Python.
from PIL.ImageQt import rgb
from bokeh.embed import components
from bokeh.layouts import column, widgetbox, layout
from bokeh.models import Range1d, Title, Label, PrintfTickFormatter, NumeralTickFormatter, Axis, ColumnDataSource, \
ColorBar, LinearAxis, TapTool, CDSView, BooleanFilter, CustomJS, Slider, layouts, Select
from bokeh.plotting import figure, Figure
from bokeh.models import HoverTool
from bokeh.layouts import column
# Create your views here.
from bokeh.resources import CDN
from bokeh.transform import linear_cmap
from django.shortcuts import render
def test(request):
data1 = {'time': [1, 2, 3, 4, 5, 6, 7],
'projectname': ["project1", "project2", "project3", "project4", "project5", "project6", "project7"],
'id': ['byq-1', 'byq-2', 'byq-3', 'byq-4', 'byq-5', 'byq-6', 'byq-7'],
'missingnumber0': [1, 2, 30, 22, 23, 5, 9],
'missingnumber1': [3, 4, 30, 12, 20, 1, 20],
'missingnumber': [4, 6, 60, 34, 43, 6, 29],
'holi': [0.10, -0.20, 0.30, -0.11, -0.32, 0.44, 0.05],
'lilo': [0.23, -0.21, 0.02, 0.03, 0.66, 0.31, 0.22],
'holo': [0.33, -0.41, 0.32, -0.08, 0.34, 0.75, 0.27],
}
data2 = data1
source1 = ColumnDataSource(data1)
source2 = ColumnDataSource(data2)
plot1 = figure(plot_width=850, plot_height=170, toolbar_location=None, active_drag=None, title="total")
plot1.circle(x='missingnumber', y='holo', size=10, line_color='Blue', fill_color='DeepSkyBlue', alpha=0.5,
source=source1)
plot2 = figure(plot_width=850, plot_height=170, toolbar_location=None, active_drag=None, title="test")
plot2.circle(x='missingnumber', y='holo', size=10, line_color='Blue', fill_color='DeepSkyBlue', alpha=0.5,
source=source2)
def callback1(plot2=plot2, source2=source2, window=None):
inds = cb_data.source.selected['1d'].indices
d1 = cb_data.source.attributes.data
d2 = source2.data
d2['time'] = []
d2['projectname'] = []
d2['id'] = []
d2['missingnumber0'] = []
d2['missingnumber1'] = []
d2['missingnumber'] = []
d2['holi'] = []
d2['lilo'] = []
d2['holo'] = []
d2['time'].push(d1['time'][inds[0]])
d2['projectname'].push(d1['projectname'][inds[0]])
d2['id'].push(d1['id'][inds[0]])
d2['missingnumber0'].push(d1['missingnumber0'][inds[0]])
d2['missingnumber1'].push(d1['missingnumber1'][inds[0]])
d2['missingnumber'].push(d1['missingnumber'][inds[0]])
d2['holi'].push(d1['holi'][inds[0]])
d2['lilo'].push(d1['lilo'][inds[0]])
d2['holo'].push(d1['holo'][inds[0]])
source2.change.emit()
taptool1 = TapTool(callback=CustomJS.from_py_func(callback1))
plot1.add_tools(taptool1)
script2, div2 = components(plot1)
script3, div3 = components(plot2)
return render(request, 'test.html',
{'script2': script2, 'div2': div2, 'script3': script3, 'div3': div3})Я думаю, что проблема в том, что, хотя я меняю источник второго графика, веб-браузер не отправляет команду перерисовки в эту область. Но я не знаю, как решить эту проблему.