如何将原始HTML/JavaScript添加到Dash应用程序？
将原始HTML/JavaScript添加到Dash应用程序可以通过以下步骤实现：
- 创建一个Dash应用程序的Python脚本，导入所需的库和模块。
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output- 在应用程序中创建一个布局，使用Dash提供的HTML和核心组件。
app = dash.Dash(__name__)
app.layout = html.Div(
children=[
html.H1("My Dash App"),
dcc.Input(id="input", type="text", placeholder="Enter text"),
html.Div(id="output")
]
)- 创建回调函数，将原始的HTML/JavaScript添加到Dash应用程序中。
@app.callback(
Output("output", "children"),
[Input("input", "value")]
)
def update_output(value):
# 在这里添加原始的HTML/JavaScript代码
return html.Div([
html.H3("Output:"),
html.P(value)
])- 运行应用程序。
if __name__ == "__main__":
app.run_server(debug=True)以上步骤将创建一个简单的Dash应用程序，其中包含一个输入框和一个输出框。通过回调函数，可以根据输入框的值来更新输出框的内容。在回调函数中，可以添加原始的HTML/JavaScript代码，以实现更复杂的功能。
推荐的腾讯云相关产品：腾讯云云服务器（https://cloud.tencent.com/product/cvm）和腾讯云容器服务（https://cloud.tencent.com/product/ccs）。
相关·内容
下面是一个示例仪表板，它使用plotly dash发布和订阅MQTT消息。在收到来自JSON中特定主题的消息后，将创建一个dataframe，并将其填充到具有id = gw_table的dbc.Table.from_dataframe中。需要的是当接收到一个新的JSON数据时，数据表需要附加一个新行，与下面的脚本一样，它用新接收到的数据重新填充第一行。
阅读文档和其他类似的问题，我尝试了与dcc.store，但没有成功。
app.py
import dash
import dash_html_components as html
import dash_core_components as d
浏览 3提问于2021-07-22得票数 1
如何将pandas-profiling报告集成到dash应用程序中？
Streamlit允许这些集成(但我很难在其中管理缓存/会话)
但我在dash上没有看到任何关于这方面的文档。请帮帮忙。
浏览 3提问于2021-04-21得票数 1
我的目标是将用JS编写的GitHub热图集成到我的test.py Dash框架中。
root-
-assets–>google.js
–>index.js
–>main.css
-css–>main.css
-index.html
-test.py
我的热图(index.html)如下，
<!DOCTYPE html>
<html>
<head>
<title>Github contribution graph</title
浏览 0提问于2020-10-15得票数 0
回答已采纳
我正在尝试在Plotly Dash中进行客户端回调，其中将执行JavaScript脚本。我在脚本中的其他地方定义了一个Python变量，现在我想将该变量传递给客户端回调，在那里我有我的脚本。以下是代码的一小段： python_variable = 'string or some variable'
app.clientside_callback(
"""
function(n_clicks, user_input) {
if (n_clicks){
alert(%{user_input} + %
浏览 42提问于2021-10-06得票数 0
回答已采纳
我想把下面的代码转换成dash-plotly代码。我可以知道如何将HTML代码中的第二个脚本标记转换为dash-plotly吗？
.summary:hover+.detail,
.detail:hover {
display: block;
}
.show.detail {
display: block;
}
.detail {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
浏览 0提问于2018-06-24得票数 3
您可以在巧妙的文档中找到一堆Dash示例，大多数示例的结尾都是关于如何使用Dash构建图形的说明：
，Dash呢？Dash是一个用于构建分析应用程序的开放源代码框架，不需要Javascript，并且它与Plotly库紧密集成。
了解如何在上安装Dash。
但是我想用JupyterLab来代替。那么，为了让它在JupyterLab中运行，我必须在下面的“普通”Dash应用程序中做哪些更改？
代码示例：
import plotly.graph_objects as go
import plotly.express as px
import dash
import dash_core_compon
浏览 2提问于2020-09-18得票数 2
回答已采纳
1回答
我正在网络上抓取一个html表格，我能够阅读表格，现在我只需要在我的页面中写回。因此，我需要在html.Div()中返回它，并将其视为一个真正的表 def table():
URL = "https://www.infrontanalytics.com/fe-en/BMG5876H1051/Marvell-Technology-Group-Ltd-/beta"
tables = pd.read_html(URL)
print("There are : ",len(tables)," tables")
浏览 32提问于2020-12-06得票数 0
我知道如何将背景图像添加到绘图图形对象中，但是，是否可以为html.Div或html.H1添加背景图像？
浏览 2提问于2018-08-07得票数 2
回答已采纳
2回答
我正在用破折号来构建一个应用程序，但我对如何正确地设置这些项目感到困惑。
import dash
import dash_bootstrap_components as dbc
from dash import html
from dash import dcc
app = dash.Dash(__name__)
app.layout = html.Div([
dbc.Row([ #row 1
dcc.Input(type='text'),
html.Button('A button'),
]),
浏览 21提问于2022-05-30得票数 0
我正在尝试显示我从DASH应用程序中的本地路径读取的pdf。我试着使用Embed和Iframe。但是，它们都没有显示pdf。此外，没有错误，它只是空白。下面是代码片段。 import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import PyPDF2
import docx2txt
from jupyter_dash import JupyterDash
#external_stylesheets = ['
浏览 58提问于2020-07-20得票数 1
我在我的应用程序中有一个使用Dash的表，但是我使用html组件，而不是使用Dash的DataTable。该应用程序相当大，已经配置，所以我想避免重写它。在html中，有一个使表可排序的<table class="sortable">。然而，当我用破折号构造表时，我应该在哪里写这个属性呢？这是我的表代码：
def generate_table(dataframe, max_rows=1000):
return html.Table([
html.Thead(
html.Tr([html.Th(col) for col
浏览 0提问于2020-09-08得票数 2
回答已采纳
我正试图从运行在带有木星Dash的木星笔记本中的中获得第一个Dash示例，该应用程序作为一个独立的应用程序运行良好，但在笔记本中实现时出错，我无法理解。我得到了
TypeError:需要一个整数(got类型NoneType)
当我试着运行笔记本的时候。
from jupyter_dash import JupyterDash
import dash_html_components as html
import dash_core_components as dcc
import dash
from dash.dependencies import Input, Output
app =
浏览 11提问于2022-08-19得票数 0
在任何使用HTML5和JavaScript (客户端技术)的web应用程序中，是否有任何现有的框架/插件提供视频聊天功能？
浏览 2提问于2015-10-26得票数 0
我正在尝试在HTML页面上显示绘图。如何将此图插入到Html.DiV()中。我试过了，但它给了我一个错误。 import pandas as pd
import yfinance as yf
import matplotlib.pyplot as plt
import pyfolio as pf
ticker='AAPL'
tickers_list = [ticker]
data = pd.DataFrame(columns=tickers_list)
for ticker in tickers_list:
data[ticker] = yf.download(t
浏览 43提问于2021-01-30得票数 0
回答已采纳
1回答
我已经成功地创建了我的第一个烧瓶应用程序，并将我的代码分成了一系列蓝图，因为随着时间的推移，我的代码库将大大增加。我现在正试图在我的应用程序中嵌入一个巧妙的仪表板(或者只是一个巧妙的可视显示)。
现在，我正在使用一个我从网络上学到的玩具例子。第二个代码块启动破折号，但我的目标是将第二个代码集成到我的主烧瓶应用程序中。暂时来说，我希望它能成为主应用程序中的一条路线(稍后我会把它解析成一个蓝图模块)，但无法从文档中找到一个教学示例，演示如何将它们集成在一起。
我正在寻找一些代码支持，他们可以展示如何将第二个代码无缝地作为一个路由集成到主应用程序中。
这个链接给了我一些想法去尝试，，但是我在那里提出
浏览 1提问于2020-05-18得票数 0
我使用Python中的熊猫库从csv文件中读取并填充下拉列表。我的应用程序使用Dash Plotly创建一个HTML界面。我只填充下拉列表的值，下拉列表的标签与值相同。如何将标签更改为csv文件中的文本？
available_rpi.csv
ip,name
192.168.1.6,"Virtual I²C (192.168.1.6)"
192.168.1.102,"GPS UART (192.168.1.102)"
192.168.1.106,"Ultrasonic I²C (192.168.1.103)"
python脚本：
import da
浏览 1提问于2018-11-28得票数 0
回答已采纳
我正在创建一个多页应用程序，我已经创建了一个导航栏，链接到不同的页面(URL)，最近它神秘地停止了工作。我已经尝试将所有代码恢复到最后一个已知的良好状态，但它没有修复这个问题。目前，这只在我的开发机器上被破坏，并且活的应用程序仍然工作，但由于这个问题，我不能发布新的版本。我已经为所有相关代码提供了下面的代码片段，并希望对此问题有一个全新的关注，谢谢。
值得注意的是，如果我将dbc.NavLink更改为dbc.Link，一切都可以正常工作，但它没有正确地布局，或者在页面中出现活动按钮，因此这不是所需的选项。
这是我的版本
dash-bootstrap-components 0.7.1
dash-
浏览 2提问于2020-02-28得票数 5
回答已采纳
我正在尝试使用Kubernates在我的服务器上使用Flask运行Dash应用程序 import dash
import dash_html_components as html
from flask import Flask
server = Flask(__name__)
app = dash.Dash(name='my-server', server=server)
app.layout = html.Div([
....
])
@server.route("/")
def dash_app():
return app.index
浏览 22提问于2021-09-13得票数 0
import dash_core_components as dcc
import dash_html_components as html
import dash
import sys
app = dash.Dash()
app.layout = html.Div([
dcc.Interval(id='interval1', interval=1000,
n_intervals=0),
dcc.Interval(id='interval2', interval=1 * 1000,
n_intervals=0),
html.H1(id
浏览 1提问于2021-07-06得票数 1
回答已采纳
我想创建一个非常简单的应用程序，在浏览器中显示我，我选择的月份的报告是由Pandas和Matplotlib创建的。 我想在浏览器中包括一个过滤器，以选择我应该显示的报告，然后，如果可能，包括一个下载相应PDF的选项。 实现这一目标的最佳工具是什么？有没有你知道的类似的小例子？ 我已经看到了创建jinja2和html报告的库pdf和pfgkit，但我不知道如何将其与过滤器匹配，我希望添加web应用程序。
浏览 7提问于2019-02-23得票数 0
回答已采纳
1回答
我已经创建了一个Dash应用程序来跟踪和存储图像的悬停数据(参见下面的代码)。我想把悬停跟踪部分变成客户端回调，让应用更具扩展性，提高悬停跟踪的性能。下面是我使用普通回调的代码。如何使此函数成为客户端回调函数？
import dash
import dash_core_components as dcc
import dash_html_components as html
import numpy as np
import plotly.express as px
import requests
from dash.dependencies import ClientsideFunction
浏览 7提问于2021-09-02得票数 0
我正在添加一个包含有小叶地图的引导折叠元素，这样我就可以打开/关闭地图视图了。但是，小叶地图在应用程序初始化时调整大小，并且在打开折叠项目时不会调整大小。因此，结果显示的地图，当切换到时，大部分只是一个灰色的方框。在做了一些研究之后，我似乎必须在打开折叠元素后调用地图上的invalidateSize函数。但是，我不确定如何在我的Plotly-Dash应用程序上运行这个javascript命令。这就是我目前所拥有的。 import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
im
浏览 11提问于2021-10-04得票数 0
回答已采纳
1回答
我所做的一切打破了我的应用程序是删除ui-sref (我从来不喜欢使用该方式)，并与$state.go内的Javascript。
<tr ng-repeat="ticker in tickers">
<!--<td>{{ ticker }} <button ui-sref="dash.tags({ticker: ticker})">Click Me</button></td>-->
<td>{{ ticker }} <button ng-click=&#
浏览 1提问于2017-02-21得票数 1
回答已采纳
我正在用Python3创建一个Dash应用程序。尝试在条形图中添加水平线。文档中的示例是折线图，它有数字x轴和y轴，而我有一个分类的X轴。下面的代码成功创建了图形，但没有显示shape对象。如何将水平线添加到此图表？
html.Div(
[ dcc.Graph(
id='example-graph-23',
figure={
'data
浏览 22提问于2019-11-22得票数 1
回答已采纳
我想知道是否有可能以某种方式将一个带有图形和指定回调的dash应用程序转换为一个单独的HTML页面，以便能够将其发送出去，并仍然具有回调的功能。也就是说，将所有python代码转换为javascript，然后将其嵌入到静态HTML页面中。 我已经寻找了很长一段时间，但找不到解决方案，或者甚至不可能。 任何帮助都是非常感谢的！
浏览 54提问于2020-12-12得票数 1
回答已采纳
我正在尝试根据用户在Dash中的输入来更改标题。但是不知道如何将值传递给html.H1标记，因为它不带参数value。当用户提交输入时，我该如何更改标题？
# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input
from dash.dependencies import Output
from dash.dependencies import State
ext
浏览 5提问于2020-05-28得票数 0
回答已采纳
假设我有一个这样简单的图表：
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
app.layout = html.Div(children=[
html.H1(children='Hello Dash'),
html.Div(children='''
Dash: A web application framework for Python.
'
浏览 1提问于2018-06-26得票数 0
回答已采纳
1回答
如何在选择其他RadioItem选项时更新一个RadioItem选项？
更多详细信息：
I有2 RadioItems (radio1和radio2)。当用户从radio1中选择值时，我希望更改radio2的选项。如何做到？<code>F 211</code>
我试过这样做，但不管用：
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
external_styleshe
浏览 3提问于2021-05-12得票数 0
回答已采纳
我正在尝试使用dash服务器和mod_wsgi服务一个(python3.8.2) mod_wsgi应用程序，但是应用程序在“加载.”时停止。屏幕。服务器为dash的每个.js脚本返回404 s。我在本地服务器上使用dash的时候没有遇到任何问题.但我不是想在本地服务。
我想要一些关于我哪里出错的建议，以及如何启动和运行这个特定的应用程序。
症状
我能够提供一个简单的蟒蛇“你好世界”和一个简单的烧瓶应用程序，使用我的设置。然而，当创建一个简单的“破折号”应用程序..。
[Error] Failed to load resource: the server responded with a sta
浏览 0提问于2020-08-24得票数 1
回答已采纳
在生成内容之前，我尝试在div上添加一个加载gif图像。它在firefox中运行良好，但在internet explorer中不起作用。下面是我的代码
感谢堆
<script type="text/javascript">
j(document).ready(function() {
j('#sliderform').submit(function() {
//j('#dash1').html('loading....');
bodyContent = j.ajax({
b
浏览 1提问于2011-06-10得票数 0
下面是一个Dash应用程序代码(app.py)的最小示例：
# Libraries
import csv
import pandas as pd
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output, State
# CSV files generation
row_list = [
["SN", "Name", "Quotes"],
浏览 3提问于2020-12-24得票数 1
回答已采纳
5回答
我正在尝试用datetime滑块构建一个破折号应用程序，但是下面的代码不起作用-- url显示“错误加载布局”。我是在做一些愚蠢的事情，还是在datetime对象上构建滑块所需的任何技巧？可复制代码如下：
import dash
import dash_core_components as dcc
import dash_html_components as html
import datetime
base = datetime.datetime.today()
date_list = [base - datetime.timedelta(days=x) for x in range(0,
浏览 0提问于2018-06-27得票数 9
回答已采纳
5回答
我想将CSS样式表或<style>块提供给Python Dash应用程序。我在下面尝试过这两种方法，但对我都不起作用。该应用程序加载正常，但文本仍为黑色，而不是绿色。
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
from flask import send_from_directory
# define t
浏览 10提问于2018-06-14得票数 10
1回答
我以这种方式使用JavaScript触发了一个HTML文件下载：
var pom = document.createElement('a');
pom.setAttribute('href', 'data:application/octet-stream;charset=utf-8,' + encodeURIComponent(htmlContent));
pom.setAttribute('download', 'download.html');
pom.click();
这可以很好地工作，但如果htmlCont
浏览 1提问于2014-11-18得票数 0
我在文件index.php中包含了一个名为test.php的文件
让我们假设index.php是这样的
<html>
<head>
</head>
<body>
<h1 id="dash">Index</h1>
<div id='tab.php'>
<?php include('tab.php'); ?>
</div>
</body>
</html>
tab.php是这样的
<html>
<
浏览 1提问于2011-11-29得票数 0
回答已采纳
标题说明了一切。在anaconda提示符下使用conda install -c conda-forge dash成功安装了dash。然而，我在第1行import dash上收到了一个非常奇怪的日期时间错误。我正在运行dash docs中的示例代码： import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd
external_stylesheets = ['https://codep
浏览 8提问于2021-01-20得票数 1
回答已采纳
我正在使用Dash Plotly开发仪表板，单击选项卡时出现错误。 错误显示为null is not an object (evaluating ‘n.layout’) (此错误源于运行Dash应用程序的内置JavaScript代码。单击以查看完整堆栈跟踪或打开浏览器控制台。)“ 有人能帮我解决这个问题吗？ 我的代码如下所示。 import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_daq as daq
from dash.dependencies impor
浏览 17提问于2021-01-22得票数 0
回答已采纳
亲爱的读者，
我想在由某些JS代码生成的Python页面上显示一个图像。参见这里的描述：。在静态HTML页面中，将包含以下脚本
<script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>
这个DIV将显示图像：
<div class='altmetric-embed' data-badge-type='donut' data-doi="10.1038/n
浏览 0提问于2020-04-03得票数 2
1回答
我正在做一个短跑项目。我刚在dash学到了，我创建了一个简单的组件ie - textarea。以下是组件的代码-
my_dash_component/mydashcomponent.react.js
import React, {Component} from 'react';
import PropTypes from 'prop-types';
export default class mydashcomponent extends Component {
render(){
const {id,setProps,value} = this.pro
浏览 0提问于2019-03-27得票数 1
我想要创建一个水瓶网络应用程序。我想将几个Dash-应用程序集成到这个站点中，并在主页上显示到每个Dash应用程序的链接。下面是一个很小的例子:主页应该如下所示：
from flask import Flask
app = Flask(__name__)
@app.route("/")
def main():
return "Hello World"
if __name__ == "__main__":
app.run(debug = True)
假设我们有一个Dash应用程序，看起来如下：
import dash
import
浏览 2提问于2020-01-07得票数 10
回答已采纳
1回答
我正在尝试链接一个外部/本地CSS，但是它似乎没有被链接。 我遵循了此链接中的示例：https://dash.plot.ly/external-resources app.py external_stylesheets = [
dbc.themes.SLATE,
{
'href': 'custom.css',
'rel': 'stylesheet',
}
]
app = dash.Dash(
meta_tags=[
浏览 59提问于2020-08-13得票数 3
我正在寻找一种最简单的方法，用不同的数据集生成相同的仪表板X次。每个仪表板都是一个页面，主应用程序是一个烧瓶应用程序。
目标是让仪表板模板在不同数据集的不同破折号实例上运行。
我从下面的代码开始，但是当破折号页包含回调时，即当html.Div([html.H1('Hi there, I am app1 for reports')])变成一个更大的回调函数时，我感到很困难。
import dash
import dash_html_components as html
from flask import Flask, render_template, redirect
from
浏览 3提问于2021-12-15得票数 0
1回答
使用ajax呈现部分
、、、、
这看起来很简单，但我的部分没有使用ajax在视图(dash.html.erb)中呈现。
routes.rb
match "users/dash" => "users#dash"
用户控制器
def dash
respond_to do |format|
format.js
end
end
dash.html.erb
<div id= "mydiv">This view is not shown using ajax.</div>
dash.js.erb
$('#mydiv'
浏览 2提问于2013-02-13得票数 0
回答已采纳
我需要用Dash绘制一个三维散射和数据表。
我的意图是能够使用数据表过滤散点图。我的数据的第一行是目标。过滤器是否可以始终保留第一行？
例如，我尝试使用solar.csv构建一个模型：
from dash import Dash, dash_table
import pandas as pd
from dash.dependencies import Input, Output
import plotly.express as px
from dash import Dash, dash_table, html, dcc
df = pd.read_csv('https://raw.g
浏览 9提问于2022-03-22得票数 0
回答已采纳
我的版面上有这样的东西。
import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
app = dash.Dash()
app.layout = html.Div([
html.H1('Progress bar'),
dbc.Progress(id="progress", value=50, striped=True, animated=True)
])
浏览 3提问于2019-11-08得票数 2
回答已采纳
我还是个新手，我正在通过修改谷歌提供的例子来慢慢学习如何使用聚合物。
但我遇到了一个小问题。
我在Javascript中有一个数组：
var dash = [{"uid": 1,
"text" : "It's a TOWN!",
"username" : "Sam112",
"avatar" : "../ToolKit/images/avatar-01.svg",
"favorite": false,
"num" : "Standard
浏览 1提问于2014-08-06得票数 0
Dash DataTable组件在列标题下提供了一个自由文本过滤器.
如何将此筛选器替换为包含所有可供选择的唯一值的下拉筛选器？
Excel中现成的东西：
或者在中使用一些简单的黑客
我知道我可以在通过回调与DataTable交互的DataTable之外使用下拉筛选器，但是我希望下拉过滤器成为DataTable列标题的一部分。在这个意义上，我不想使用解决方案来自：
浏览 4提问于2021-10-26得票数 4
我在使用javascript制作网站时遇到了问题。我想要做的是有一个排序的时间线，当鼠标经过每个节点时，两边的信息都会更新。但是，我无法使用鼠标悬停来处理节点。我相信这是因为他们都超过了基线，每个人的z指数都是2。有人能帮我解决这个问题吗？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel
浏览 4提问于2011-09-05得票数 1
回答已采纳
在外部网站上处理Wordpress提要时，遇到了包含单引号和破折号等字符的帖子标题问题。
JSON输出如下所示：
{"rendered":"Some title post text here – some text after dash"}
{"rendered":"‘Title text in quotes ’: More title text"}
在前端将这些unicode字符转换回文本的最佳方法是什么？目前，它正在显示unicode。
想着一定有一个javascr
浏览 0提问于2017-06-30得票数 2
1回答
我正试图在uvicorn服务器上运行一个破折号应用程序。该应用程序非常简单，只需在屏幕上显示文本“hello”。守则如下：
from dash import Dash, html
dash_app = Dash(__name__)
dash_app.layout = html.Div(id='main-layout', children=["hello"])
如果我使用dash_app.run()运行该应用程序，该应用程序将按预期运行，并且我可以访问本地主机上的页面。
然而，我正试图使用uvicorn运行这个应用程序。用于启动服务器的命令如下所示：
uvicor
浏览 5提问于2022-09-14得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
