使用dash上传组件上传csv文件并生成图表

2023-12-01

我想上传 csv 文件并生成一个从 csv 文件输出数据的图表,我可以上传 csv 并使用 dash_table 显示数据,但我无法使图表正常工作。 上传 csv 文件后出现错误:参数无效figure.data传递到 ID 为“Mygraph”的 Graph 中。 期望一个数组。 供货类型object.

import base64
import datetime
import io
import plotly.graph_objs as go
import cufflinks as cf

import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import dash_table

import pandas as pd

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
server = app.server

colors = {"graphBackground": "#F5F5F5", "background": "#ffffff", "text": "#000000"}

app.layout = html.Div(
    [
        dcc.Upload(
            id="upload-data",
            children=html.Div(["Drag and Drop or ", html.A("Select Files")]),
            style={
                "width": "100%",
                "height": "60px",
                "lineHeight": "60px",
                "borderWidth": "1px",
                "borderStyle": "dashed",
                "borderRadius": "5px",
                "textAlign": "center",
                "margin": "10px",
            },
            # Allow multiple files to be uploaded
            multiple=True,
        ),
        dcc.Graph(id="Mygraph"),
        html.Div(id="output-data-upload"),
    ]
)


@app.callback(
    Output("Mygraph", "figure"),
    [Input("upload-data", "contents"), Input("upload-data", "filename")],
)
def update_graph(contents, filename):
    fig = {
        "layout": go.Layout(
            plot_bgcolor=colors["graphBackground"],
            paper_bgcolor=colors["graphBackground"],
        )
    }

    if contents:
        contents = contents[0]
        filename = filename[0]
        df = parse_data(contents, filename)
        df = df.set_index(df.columns[0])
        fig["data"] = df.iplot(
            asFigure=True, kind="scatter", mode="lines+markers", size=1
        )

    return fig


def parse_data(contents, filename):
    content_type, content_string = contents.split(",")

    decoded = base64.b64decode(content_string)
    try:
        if "csv" in filename:
            # Assume that the user uploaded a CSV or TXT file
            df = pd.read_csv(io.StringIO(decoded.decode("utf-8")))
        elif "xls" in filename:
            # Assume that the user uploaded an excel file
            df = pd.read_excel(io.BytesIO(decoded))
        elif "txt" or "tsv" in filename:
            # Assume that the user upl, delimiter = r'\s+'oaded an excel file
            df = pd.read_csv(io.StringIO(decoded.decode("utf-8")), delimiter=r"\s+")
    except Exception as e:
        print(e)
        return html.Div(["There was an error processing this file."])

    return df


@app.callback(
    Output("output-data-upload", "children"),
    [Input("upload-data", "contents"), Input("upload-data", "filename")],
)


def update_table(contents, filename):
    table = html.Div()

    if contents:
        contents = contents[0]
        filename = filename[0]
        df = parse_data(contents, filename)

        table = html.Div(
            [
                html.H5(filename),
                dash_table.DataTable(
                    data=df.to_dict("rows"),
                    columns=[{"name": i, "id": i} for i in df.columns],
                ),
                html.Hr(),
                html.Div("Raw Content"),
                html.Pre(
                    contents[0:200] + "...",
                    style={"whiteSpace": "pre-wrap", "wordBreak": "break-all"},
                ),
            ]
        )

    return table


if __name__ == "__main__":
    app.run_server(debug=True)

Error: screenshot of error


你需要创建一个go.Figure对象并返回它,例如:

@app.callback(Output('Mygraph', 'figure'), [
Input('upload-data', 'contents'),
Input('upload-data', 'filename')
])
def update_graph(contents, filename):
    x = []
    y = []
    if contents:
        contents = contents[0]
        filename = filename[0]
        df = parse_data(contents, filename)
        df = df.set_index(df.columns[0])
        x=df['DATE']
        y=df['TMAX']
    fig = go.Figure(
        data=[
            go.Scatter(
                x=x, 
                y=y, 
                mode='lines+markers')
            ],
        layout=go.Layout(
            plot_bgcolor=colors["graphBackground"],
            paper_bgcolor=colors["graphBackground"]
        ))
    return fig

取决于您想要什么样的图表(例如go.Scatter) 和要显示的值的类型 (x and y值)。 要向图中添加更多线条,您可以添加更多go.Scatter反对data具有不同值的数组。

enter image description here

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用dash上传组件上传csv文件并生成图表 的相关文章

随机推荐

  • PHP服务器端帖子

    我正在尝试让服务器端 POST 在 PHP 中工作 我正在尝试将交易数据发送到支付网关 但我不断收到以下错误 信息 fopen https secure ogone com ncol test orderstandard asp 无法打开流
  • JavaScript:可选回调? [复制]

    这个问题在这里已经有答案了 我编写了一个函数 它有 3 个参数 其中一个是回调函数 如何使回调成为可选参数 而不必编写另一个没有回调参数的函数 function myFunction arg1 arg2 callback do someth
  • 从数组中返回奇数或偶数

    只是需要帮助来确定我在这个代码战争挑战中做错了什么 我意识到这对某些人来说可能很容易 但请注意我只是 Javascript 的初学者 挑战 给你一个数组 长度至少为 3 但是 可能非常大 包含整数 该数组要么完全是 由奇数整数组成或完全由偶
  • 继承鉴别器的 .NET Linq to SQL 性能问题

    我遇到了具有大量继承类的 LINQ to SQL 模型的性能问题 我隔离了这个问题 它似乎是 LINQ to SQL 生成的代码本身的某种问题 我使用 Northwind 创建了一个示例程序来充实这个问题 在这两种情况下 它都会返回 Cus
  • 迭代向量时 typeid.name() 不会改变。动态转换和 typeid 基类指针

    答 总之用虚函数 因此 实际上不要将其用作良好的设计 但出于学习目的 请阅读 首先我想说我正在使用 c 和 Qt 我有一个形状指针向量 基类 编辑 doSomething 不是基类的成员 而是派生类的成员 这就是为什么我使用dynamic
  • 多部分/表单数据的问题

    当我的表单包含多部分 表单数据时 我无法从 servlet 中的文件和文本输入获取值 我正在使用 apache commons fileuploads 来帮助上传 有什么建议 另外 在下面的代码中 有一些我认为应该更有效的事情 有没有更好的
  • 在mysql中使用select into局部变量和准备好的语句

    每次调用此存储过程时我都会收到此错误 1064 You have an error in your SQL syntax check the manual that corresponds to your MySQL server vers
  • Jquery:元素数组的事件监听器

    我使用以下方法用元素填充数组 each 方法和 this 选择器 function var elements new Array var index 0 img each function if this attr attribute th
  • 如何检测文本中只有空格的行?

    鉴于 空行 是一个空格 我正在尝试逐行读取文本文件 我想忽略空白行 或者以更正确的方式 我想检测空行 空行可以包含空格 换行符等 并且它仍然被视为空行 如果您在记事本中打开它 在空行中您不应该看到任何内容 有没有一种快速的方法可以在Pyth
  • Python 从标准输入中读取参数

    我想从 python stdin 读取数据 但也想在我的程序中拥有输入选项 当我尝试将选项传递给我的程序时 我收到错误文件未找到并且我的参数被丢弃 为了解析参数 我使用以下代码 parser argparse ArgumentParser
  • 在 C++ 中更改带有前导零的十六进制数的位,(C)

    我有这个十六进制字符串的数字 002A05 我需要将这个数字的第 7 位设置为 1 所以转换后我会得到 022A05 但它必须适用于每 6 个字符的十六进制数字 我尝试通过 strtol 将十六进制字符串转换为整数 但该函数去掉了前导零 请
  • 找到最适合n个球体交点的点

    我有一系列带有距离的点 我希望找到一个最能满足以下条件的点 for point i distance i in pointArray abs point point i distance i 我认为这可以通过某种回归或最小二乘来解决 但我在
  • 如何从 OpenShift DATA_DIR 提供上传的图像

    我的应用程序在 JBoss EAP 上运行 我想将图像上传到 OPENSHIFT DATA DIR 然后将它们的相对路径保存在 MySQL DB 中 因为我需要构建图像的路径 然后在需要时将它们提供给浏览器 If my OPENSHIFT
  • 使用 JavaScript 动态计算总和

    我有两个文本框Num1 and Num2和另一个文本框Sum具有价值10 如果用户输入一个数字 我该如何做到这一点Num1 它将添加到Sum并动态改变显示的数字Sum文本框 如果用户输入一个数字Num2它还会将该数字添加到显示的更新数字中S
  • 如何将数据从过滤器传递到 Jersey 中的端点

    您可以在不使用 ThreadLocal 或 HttpSession 的情况下将一些数据从 javax servlet Filter 传递到 Jersey 端点吗 因为第一个问题是 你为什么要这样做 主要是好奇 在实践中 我认为我可以使用它来
  • 定义带或不带导出的变量

    What is export for 有什么区别 export name value and name value export使变量可用于子流程 That is export name value 表示变量名可用于任何过程你从那个 she
  • Java 编译器错误消息“预期”是什么意思?

    class if public static void main String args int x 9 if x lt 9 System out println Yay else System out println Yay 我从编译器运
  • 椭圆曲线乘法函数

    我正在尝试为椭圆曲线创建自己的库 有些事情有效 但有些则无效 要从私钥计算公钥 您应该将生成点与私钥相乘 然后得到另一个点 公钥点 ECPoint BigInteger ECPoint 现在 我有一个私钥 并将其与 Secp256k1 曲线
  • 如何使用 Go 和 gorilla websocket 仅发送给一个客户端而不是所有客户端

    我正在尝试用 Go 学习 websocket 我一直在研究 gorilla websocket 的示例 我已经查看了这两个示例 展示了如何使用 gorilla websocket https github com gorilla webso
  • 使用dash上传组件上传csv文件并生成图表

    我想上传 csv 文件并生成一个从 csv 文件输出数据的图表 我可以上传 csv 并使用 dash table 显示数据 但我无法使图表正常工作 上传 csv 文件后出现错误 参数无效figure data传递到 ID 为 Mygraph