グラフ表示（plotly）¶

from fastapi import FastAPI, Query, Form
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
from starlette.requests import Request
import plotly.graph_objects as go

app = FastAPI()

templates = Jinja2Templates(directory="templates")


# xy.txt, xy_negative.txt のデータを読み込む関数; ファイル名(or ファイルパス)をリストに入れて渡す
def read_xy_data(file_path):
    x, y = [], []
    try:
        with open(file_path, "r") as file:
            for line in file:
                try:
                    x_val, y_val = map(float, line.split())
                    x.append(x_val)
                    y.append(y_val)
                except ValueError:
                    # 数値以外のデータは無視; ファイルの1行目にある、x_value y_valueっていう文字列を無視できる
                    continue
    except FileNotFoundError:
        print(f"File not found: {file_path}")
    return x, y


@app.get("/", response_class=HTMLResponse)
async def home(request: Request):
    return templates.TemplateResponse("index.html", {"request": request})


@app.post("/graph", response_class=HTMLResponse)
async def graph(request: Request, files: list[str] = Form(...)):
    fig = go.Figure()

    # 指定されたファイルを順番に処理
    for file in files:
        x, y = read_xy_data(file)

        if not x or not y:
            return templates.TemplateResponse(
                "error.html",
                {
                    "request": request,
                    "file": file,  # ← error.htmlでファイル名を表示するために渡してるだけ
                },
                status_code=500,
            )

        # データをグラフに追加
        fig.add_trace(go.Scatter(x=x, y=y, mode='lines+markers', name=f'{file}'))

    # レイアウト設定
    fig.update_layout(
        title="Example: Title",
        xaxis_title="Example: X-axis",
        yaxis_title="Example: Y-axis",
        template="plotly_white",
        showlegend=True,  # これがないと1つのファイルを選択したときに凡例が表示されなくなる
        updatemenus=[  # Y軸をリニアと対数で切り替えるためのボタン
            {
                'buttons': [
                    {
                        'args': [{'yaxis.type': 'linear'}],  # 辞書で指定するのではなくて"."を使って書けばこの要素だけオーバーライドできる(relayout)
                        'label': 'y: Linear Scale',
                        'method': 'relayout'
                    },
                    {
                        'args': [{'yaxis.type': 'log'}],  # 辞書で指定するのではなくて"."を使って書けばこの要素だけオーバーライドできる(relayout)
                        'label': 'y: Logarithmic Scale',
                        'method': 'relayout'
                    }
                ],
                'direction': 'down',
                'pad': {'r': 10, 't': 10},
                'showactive': True,
                'x': 0.17,
                'xanchor': 'left',
                'y': 1.15,
                'yanchor': 'top'
            }
        ]
    )

    # グラフをHTML化
    graph_html = fig.to_html()

    return HTMLResponse(content=graph_html, status_code=200)

fig.update_layout(
    yaxis=dict(
        title="y",
        exponentformat="power"  # ここで指定する
    ),
)