2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > flask与js交互的示例代码_用Python做交互式图形

flask与js交互的示例代码_用Python做交互式图形

时间:2024-04-16 13:56:04

相关推荐

flask与js交互的示例代码_用Python做交互式图形

这一工具名为Bokeh,官方介绍称,它能读取大型数据集或者流数据,以简单快速的方式为网页提供优美、高交互性能的图形。/en/latest/

Bokeh使用指南

Bokeh,是由非营利组织NumFocus提供支持,大家可以免费使用,官方网站地址:

/en/latest/

Bokeh面向用户开放三个层次的接口:

低级接口能为应用开发者提供高度灵活的图形表示(支持自定义一些顶层的组件)中级接口主要用于绘制曲线(会默认加载一些低级的组件)高级接口用于快速简单地构建复杂图形

官方支持Python 2.7和3.5+版本,在其他版本的Python上功能可能会受限。

想要使用这一资源,最直接的办法是去GitHub上下载。项目地址:

/bokeh/bokeh

不过,官方推荐的安装方式是使用Anaconda Python及其附带的Conda包管理系统,这是一个专门为Python/R语言打造的数据科学平台,下载地址:

/distribution/

在工具使用方面,官方也提供了详尽的用户指南,包括快速安装运行、了解基础概念、如何处理数据、绘图、添加注释交互等等

快速入门

Bokeh是用于现代Web浏览器的交互式可视化库。它提供通用图形的优雅,简洁的构造,并在大型或流数据集上提供高性能的交互性。Bokeh可以帮助任何想要快速轻松地进行交互式绘图,仪表板和数据应用程序的人。

为了提供高级定制所需的简单性以及强大而灵活的功能,Bokeh向用户提供了两个界面级别:

安装

有多种安装Bokeh的方法,我们建议最简单的方法是使用Anaconda Python发行版,然后在Bash或Windows命令提示符下输入以下命令:

conda install bokeh

这将安装Bokeh所需的所有依赖项。Anaconda可以最大程度地减少在所有平台和配置(包括Windows)上的安装工作,并将示例安装在examples/Anaconda或Miniconda安装目录的子目录中。

如果您确定已安装了所有必需的依赖项(例如NumPy),则可以pip在命令行中使用:

pip install bokeh

入门

Bokeh是一个大型库,具有许多功能,因此本节只是一些Bokeh常见用例和工作流程的快速浏览。有关更多详细信息,请查阅完整的《用户指南》。

让我们从一些例子开始。

在基本的Python列表中将数据绘制为包括缩放,平移,保存和其他工具的线图非常简单明了:

from bokeh.plotting import figure, output_file, show# prepare some datax = [1, 2, 3, 4, 5]y = [6, 7, 2, 4, 5]# output to static HTML fileoutput_file("lines.html")# create a new plot with a title and axis labelsp = figure(title="simple line example", x_axis_label='x', y_axis_label='y')# add a line renderer with legend and line thicknessp.line(x, y, legend="Temp.", line_width=2)# show the resultsshow(p)

执行此脚本时,您将看到"lines.html"已创建一个新的输出文件 ,并且浏览器会自动打开一个新选项卡以显示该文件。(出于演示目的,我们在本文档中直接内嵌了绘图输出。)

使用bokeh.plotting界面创建图的基本步骤是:

准备一些数据

在这种情况下,简单的python列表,但也可以是NumPy数组或Pandas系列。

告诉Bokeh在哪里生成输出

在这种情况下output_file(),请使用和文件名"lines.html"。另一种选择是output_notebook()在Jupyter笔记本电脑中使用。

呼叫figure()

这将创建具有典型默认选项并易于自定义标题,工具和轴标签的图。

添加渲染器

在这种情况下,我们将line()数据用作颜色,图例和宽度等视觉自定义项。

向Bokeh询问show()save()结果。

这些功能将绘图保存到HTML文件,并可以选择在浏览器中显示。

可以重复执行第三步和第四步,以创建多个绘图,如以下一些示例所示。

该bokeh.plotting接口也相当方便的,如果我们需要通过添加更多的数据系列,字形,数轴,等自定义输出的多一点。也可以在一个图上轻松地将多个字形组合在一起,如下所示:

from bokeh.plotting import figure, output_file, show# prepare some datax = [0.1, 0.5, 1.0, 1.5, 2.0, 2.5, 3.0]y0 = [i**2 for i in x]y1 = [10**i for i in x]y2 = [10**(i**2) for i in x]# output to static HTML fileoutput_file("log_lines.html")# create a new plotp = figure(tools="pan,box_zoom,reset,save",y_axis_type="log", y_range=[0.001, 10**11], title="log axis example",x_axis_label='sections', y_axis_label='particles')# add some renderersp.line(x, x, legend="y=x")p.circle(x, x, legend="y=x", fill_color="white", size=8)p.line(x, y0, legend="y=x^2", line_width=3)p.line(x, y1, legend="y=10^x", line_color="red")p.circle(x, y1, legend="y=10^x", fill_color="red", line_color="red", size=6)p.line(x, y2, legend="y=10^x^2", line_color="orange", line_dash="4 4")# show the resultsshow(p)

Jupyter笔记本

在这一点上,我们应该提到Jupyter笔记本。

Jupyter笔记本是用于探索性数据分析的常用工具,已在整个PyData社区中广泛使用。散景与Jupyter笔记本电脑无缝集成。要在笔记本中查看以上示例,您只需改为output_file()调用即可output_notebook()

您可以直接与MyBinder在线托管的实时教程笔记本进行交互。这些的静态版本可以在Bokeh NBViewer Gallery中查看 。

将背景虚化GitHub的仓库也有一些在例如笔记本电脑的examples/howto目录。克隆存储库后,浏览至此处并运行:

jupyter notebook

您可以打开自动打开的索引页面中列出的任何笔记本并与之交互。特别是,您可能会查看以下示例,这些示例说明如何将Bokeh与Jupyter交互式小部件一起使用:

示例/ howto / notebook_comms / Jupyter Interactors.ipynb一个基本示例,它结合了Bokeh的交互功能以及Jupyter的下拉菜单和滑块。示例/ howto / notebook_comms / Numba图片示例.ipynb一个更高级的示例,该示例使用Numba基于Jupyter小部件控件有效地交互执行图像处理。注意散景图不会在GitHub笔记本预览中内联显示。散景图使用JavaScript代码进行渲染,但是GitHub从预览内容中清除所有JavaScript。

样本数据

Bokeh源代码中包含的一些示例使用了单独分发的示例数据文件。要下载此数据,请在Bash或Windows命令提示符处执行以下命令:

bokeh sampledata

有关更多信息,请参见bokeh.sampledata参考。

概念

让我们考虑上面的图,并使用它们来帮助定义一些核心概念。

绘图

情节是Bokeh中的中心概念。它们是容纳所有各种对象(渲染器,参考线,数据和工具)的容器,这些对象构成了呈现给用户的最终可视化效果。该bokeh.plotting接口提供了figure()功能与组装所需的所有对象的帮助。

字形

字形是Bokeh可以显示的基本视觉标记。在最低级别上有字形对象,例如Line。如果使用的是底层 bokeh.models接口,则有责任创建和协调所有各种Bokeh对象,包括字形对象及其数据源。为了使生活更轻松,bokeh.plotting接口公开了更高级的字形方法,例如line()第一个示例中使用的方法。第二个示例还添加了调用以circle()在同一图上同时显示圆和字形。除线条和圆圈外,Bokeh还提供许多其他字形和标记。

标志符号的外观直接与与标志符号的各种属性关联的数据值相关。在上面的示例中,我们看到可以将x和y之类的位置属性设置为数据向量。但是字形还具有“ 线属性”,“ 填充属性 ”和“ 剖面线属性”的某种组合,以控制其外观。所有这些属性也可以使用“向量化”值进行设置。我们将在下面显示此示例。

指南和注释

散景图还可以具有其他可视化组件,以帮助呈现或帮助用户进行比较。这些分为两类。指南是视觉辅助工具,可帮助用户判断距离,角度等。其中包括网格线或带,轴(例如线性,对数或日期时间),它们也可能带有刻度和刻度标签。注释是视觉辅助工具,用于标记或命名绘图的各个部分。这些包括标题,图例等。

范围

范围描述绘图的数据空间范围。默认情况下,使用bokeh.plotting界面生成的绘图配置有DataRange1d对象,这些对象尝试自动设置绘图范围以包含所有可用数据。但是可以Range1d为固定范围提供显式 对象。为了方便起见,通常也可以将它们拼写为2元组或列表:

p = figure(x_range=[0,10], y_range=(10, 20))

资源

要生成图,必须将客户端库BokehJS JavaScript和CSS代码加载到浏览器中。默认情况下,该output_file()函数将从加载BokehJS。但是,您还可以通过将参数传递给函数,mode="inline"来配置Bokeh来生成静态HTML文件,该文件具有直接嵌入其中的BokehJS资源output_file()

更多的例子

以下是一些示例,以使用bokeh.plotting界面演示其他常见任务和用例。

矢量的颜色和大小

此示例说明了如何为字形属性(如fill_color和)提供数据值序列radius。在此示例中需要注意的其他事项:

提供一个明确的工具名称列表figure()使用mode参数从CDN获取BokehJS资源设置x_rangey_range明确转动线断开(通过其值设置为None)使用NumPy数组提供数据

import numpy as npfrom bokeh.plotting import figure, output_file, show# prepare some dataN = 4000x = np.random.random(size=N) * 100y = np.random.random(size=N) * 100radii = np.random.random(size=N) * 1.5colors = ["#%02x%02x%02x" % (int(r), int(g), 150) for r, g in zip(50+2*x, 30+2*y)]# output to static HTML file (with CDN resources)output_file("color_scatter.html", title="color_scatter.py example", mode="cdn")TOOLS = "crosshair,pan,wheel_zoom,box_zoom,reset,box_select,lasso_select"# create a new plot with the tools above, and explicit rangesp = figure(tools=TOOLS, x_range=(0, 100), y_range=(0, 100))# add a circle renderer with vectorized colors and sizesp.circle(x, y, radius=radii, fill_color=colors, fill_alpha=0.6, line_color=None)# show the resultsshow(p)

链接平移和刷涂

将不同地块的各个方面链接在一起可能是用于数据可视化的有用技术。在散景中,此类链接通常是通过在地块之间共享一些地块组件来实现的 。下面是一个示例,该示例通过在图之间共享范围对象来演示链接平移(更改一个图的范围会导致其他图的范围更改)。在此示例中需要注意的其他事项:

figure()多次调用以创建多个图使用gridplot()安排在一个阵列几重复使用新的字形方法显示新的字形,triangle()以及square()通过设置toolbar_location为隐藏工具栏None设置便捷参数color(同时设置line_colorfill_color)和alpha(同时设置line_alphafill_alpha

import numpy as npfrom bokeh.layouts import gridplotfrom bokeh.plotting import figure, output_file, show# prepare some dataN = 100x = np.linspace(0, 4*np.pi, N)y0 = np.sin(x)y1 = np.cos(x)y2 = np.sin(x) + np.cos(x)# output to static HTML fileoutput_file("linked_panning.html")# create a new plots1 = figure(width=250, plot_height=250, title=None)s1.circle(x, y0, size=10, color="navy", alpha=0.5)# NEW: create a new plot and share both rangess2 = figure(width=250, height=250, x_range=s1.x_range, y_range=s1.y_range, title=None)s2.triangle(x, y1, size=10, color="firebrick", alpha=0.5)# NEW: create a new plot and share only one ranges3 = figure(width=250, height=250, x_range=s1.x_range, title=None)s3.square(x, y2, size=10, color="olive", alpha=0.5)# NEW: put the subplots in a gridplotp = gridplot([[s1, s2, s3]], toolbar_location=None)# show the resultsshow(p)

尽管工具栏是隐藏的,但平移工具仍然存在并处于活动状态。单击并拖动上面的图以平移它们,并查看它们的范围如何链接在一起。

另一个经常有用的链接是链接笔刷(其中一个图上的选择导致选择在其他图上更新)。下面的示例通过ColumnDataSource在两个图之间共享a来演示链接的画笔:

尽管工具栏是隐藏的,但平移工具仍然存在并处于活动状态。单击并拖动上面的图以平移它们,并查看它们的范围如何链接在一起。

另一个经常有用的链接是链接笔刷(其中一个图上的选择导致选择在其他图上更新)。下面的示例通过ColumnDataSource在两个图之间共享a来演示链接的画笔:

import numpy as npfrom bokeh.plotting import figure, output_file, showfrom bokeh.sampledata.stocks import AAPL# prepare some dataaapl = np.array(AAPL['adj_close'])aapl_dates = np.array(AAPL['date'], dtype=np.datetime64)window_size = 30window = np.ones(window_size)/float(window_size)aapl_avg = np.convolve(aapl, window, 'same')# output to static HTML fileoutput_file("stocks.html", title="stocks.py example")# create a new plot with a datetime axis typep = figure(plot_width=800, plot_height=350, x_axis_type="datetime")# add renderersp.circle(aapl_dates, aapl, size=4, color='darkgrey', alpha=0.2, legend='close')p.line(aapl_dates, aapl_avg, color='navy', legend='avg')# NEW: customize by setting attributesp.title.text = "AAPL One-Month Average"p.legend.location = "top_left"p.grid.grid_line_alpha = 0p.xaxis.axis_label = 'Date'p.yaxis.axis_label = 'Price'p.ygrid.band_fill_color = "olive"p.ygrid.band_fill_alpha = 0.1# show the resultsshow(p)

此快速入门几乎不涉及散景功能的表面。

有关Bokeh提供的各种绘图API,使用Bokeh服务器以及如何将Bokeh绘图嵌入您自己的应用程序和文档中的更多信息,请参阅《用户指南》。有关所有模块,类,模型和对象的详细信息,请参考《参考》。如果您对学习如何构建和开发Bokeh感兴趣,或者想了解有关如何创建新的语言绑定的信息,请参阅《 开发人员指南》。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。