在Web App中设置Bokeh Chart的绝对屏幕位置
，可以通过HTML和CSS来实现。以下是具体的步骤：
- 创建一个HTML页面，可以使用任何编辑器，如Notepad++或Sublime Text。命名为index.html。
- 在HTML页面中，使用Bokeh库来生成需要的图表。可以使用Python编写相关代码，将图表保存为一个HTML文件。例如，使用Bokeh库绘制一个简单的柱状图：
from bokeh.plotting import figure, output_file, show
output_file("chart.html")
p = figure(x_range=["A", "B", "C"], plot_height=250, title="Sample Chart")
p.vbar(x=["A", "B", "C"], top=[2, 4, 6], width=0.9)
show(p)- 将生成的HTML文件（这里命名为chart.html）引入到index.html页面中。在index.html中添加如下代码：
<!DOCTYPE html>
<html>
<head>
<title>Web App with Bokeh Chart</title>
<style>
#chart-container {
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div id="chart-container">
<!-- 在这里插入chart.html文件 -->
<iframe src="chart.html" frameborder="0"></iframe>
</div>
</body>
</html>- 在上述代码中，我们使用CSS中的绝对定位（position: absolute）来设置图表的位置。通过调整top和left属性的值，可以将图表定位到所需的屏幕位置。在这个例子中，我们将图表放置在屏幕的(100px, 100px)位置。
- 保存并打开index.html文件，你将看到Bokeh图表以指定的位置显示在Web应用程序中。
需要注意的是，上述方法适用于静态网页，如果使用的是动态Web框架（如Django或Flask），则需要根据具体框架的要求来进行操作。
推荐的腾讯云相关产品：
- 云服务器（ECS）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb_mysql
- 云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 私有网络（VPC）：https://cloud.tencent.com/product/vpc
- 云安全中心（SSC）：https://cloud.tencent.com/product/ssc
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发平台（MPT）：https://cloud.tencent.com/product/mpt
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（TCSBAAS）：https://cloud.tencent.com/product/tcsbaas
- 腾讯云元宇宙（Tencent Metaverse）：https://cloud.tencent.com/product/tencentmetaverse
请注意，上述链接仅供参考，具体的产品选择应根据实际需求和项目要求进行评估。
相关·内容
我正在尝试设置Bokeh Chart在布局中的绝对位置，以便其中一个图显示在另一个图的顶部。现在，当我计划这样的事情时： from bokeh.io import curdoc from bokeh.layouts import我正在寻找的是一些让它看起来像
浏览 20提问于2019-03-21得票数 5
回答已采纳
按照复杂性的顺序，对于金字塔，我可以创建静态bokeh图，然后用div标记(如概述的 )将它们不相关联。清楚地解释了如何设置一个bokeh服务器进行交互式数据探索，我已经成功地创建了这样一个应用程序。
无论如何，金字塔视图
浏览 3提问于2017-06-06得票数 1
回答已采纳
2回答
我正在拼命地将一个工作的bokeh嵌入到烧瓶中，却找不到合适的方法。我查看了所有的示例，但找不到一个包含更新数据的能力(最好的例子: sliders_applet)。如果我没有弄错，我确实需要bokeh服务器能够更改数据(使用滑块等)。以这种方式启动applet，例如：但是我找不到合适的方法，或者至少是一种将sliders_app</
浏览 6提问于2015-04-29得票数 20
1回答
指定组合框的位置
、、
我有以下脚本，它生成一个组合框(Select)和一个情节：from bokeh.models import ColumnDataSource,Plotfrom bokeh.simpleapp import simpleapp
df = ColumnDataSource(
浏览 4提问于2015-04-09得票数 0
回答已采纳
因此，我有以下代码，它很好用：from bokeh.resources import CDN from bokeh.resources import CDN
from bokeh.embed import file_htmlin <modul
浏览 2提问于2015-01-10得票数 0
回答已采纳
我的目标是向我的图形中添加一个HoverTool，它按名称显示工作日。日期由x轴值定义.我想在一个固定的位置显示这个信息，即使可见部分被BoxZoom这样的工具改变了。由于HoverTool至少需要一个渲染器，所以我首先尝试定义一行，但没有找到定义相对于图形的位置的方法。事实上，如果我放大，这条线不在可见部分，HoverTool不再工作(或者在一个不可见的区域)。我的第二次尝试是定
浏览 3提问于2021-07-10得票数 0
回答已采纳
当我试图在HoverTool.tooltips中使用bokeh.charts.Donut添加自定义值时，遇到了一些问题。
我试图在HoverTool.tooltips中添加百分比标签。我确信，在饼图中显示百分比值和绝对值一起显示是非常普遍的做法，因为它增加了可读性。由于bokeh.charts.Donut是一个高级图表API，我似乎无法使自定义HoverTool.tooltips像中所示的那样工作。from bokeh</em
浏览 0提问于2017-07-26得票数 1
回答已采纳
2回答
我想要在另一个divThe覆盖div中创建一个覆盖div，这个覆盖div是在一个for循环中动态生成的。但是当我写位置:绝对在我的覆盖类中时，内部div是在相同的位置创建的。
我的要求是在图表中间显示多个“总用户(号码)”。所以我写了一个覆盖css类。在覆盖类中，我给出了position:absolut
浏览 1提问于2020-07-17得票数 0
回答已采纳
在OSX上的chrome版本56.0.2924.87 (64位)上，当我在Outlook Web App中将displayInIframe设置为真时调用Office.context.ui.displayDialogAsync时，屏幕上不会出现.ms-Dialog-main div。见附件屏幕截图：
浏览 0提问于2017-04-03得票数 1
1回答
中制作交互式的情节。假设我想使用 --我认为Bokeh符合我的需要，因为我有可以重用的matplot/seaborn，而且我不太擅长javascript。启动bokeh服务器在views.py中更新我的视图
浏览 8提问于2017-01-21得票数 18
我刚刚更新了我所有的python包，我的一些脚本没有正常工作。具体来说，Bokeh的export_png函数有问题。 p = column(make_chart(False), make_chart(True))
File "C:\Users\ethan\projects\health\chart
浏览 1提问于2020-05-27得票数 6
回答已采纳
1回答
我正在尝试在Heorku上部署，我可以从Procfile启动Bokeh应用程序或Flask应用程序，但不能同时启动两者。因此，要么显示Flask提供的内容，要么显示Bokeh图。当我在Procfile中使用以下行进行部署时，Bokeh内容显示在网页上，但并不是没有显示在Flask中：
web: bokeh serve --port=$PORT --host=bokehapp.herokuapp.comgunicorn
浏览 18提问于2016-09-22得票数 5
回答已采纳
我能够嵌入一个bokeh服务器图形在烧瓶。这是localhost上的输出：问题是我无法在Heroku上完成这件事。我所看到的就是“这是你伟大的网站”的文字。有一个包含图表的脚本：import pandas as pd
from bokeh.models.1 connect=
浏览 4提问于2016-07-25得票数 3
--在我能够复制这个问题并更好地理解它之后，我更新了。 plot_height=250,稍后，
浏览 2提问于2019-02-12得票数 0
回答已采纳
在bokeh中，我们可以创建绝对坐标图。我能画一些类似ggplot的facet_grid吗？在不同的位置有两个水平的X轴。(上下)谢谢。
浏览 1提问于2020-03-29得票数 2
回答已采纳
1回答
现在，我需要在饼图的每个部分添加一个标签，该标签表示该部分的百分比，标签位置应与中心对齐。我找不到一种简单的方法来通过文档来完成它，并且尝试找到手动完成它的方法，比如这个例子：Adding labels in pie chart wedge in bokeh 我尝试创建标签集并将布局添加到打印中，但我无法确定是否有方法控制标签的位置、大小和字体。在本例中，它是一个元组(大小为1)，
浏览 32提问于2019-06-30得票数 0
我有一个图表，在Bokeh中，x轴使用datetime，y轴使用美元。我想在绘图区的左上角放置一个徽标。Bokeh纪录片在放置图像方面似乎特别神秘。下面的代码可以工作：p)
p.image_url(x=0, y=1, url=["Shrewd_Lines_200.png"], anchor=&
浏览 22提问于2020-06-03得票数 2
我有如下的文件bokeh app.pyfrom bokeh.plotting import figurecurdoc().add_root(layout)
在anaconda提示符中，我
浏览 3提问于2020-03-09得票数 0
然后，我再次尝试将整个过程封装起来，并通过手动在容器中运行Bokeh和Flask，并在Flask文件中对Bokeh服务器的IP进行硬编码来做到这一点。这远远不是最优的，因为IP可能会改变，或者如果我构建了一个不同的Bokeh应用程序，我将不得不再次手动设置所有的东西。所以我试着用“码头写作”来帮我解决这个问题，这就是我撞到一个大墙的地方。我绝对不能让水瓶容器与Bokeh</
浏览 4提问于2020-02-24得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
