时间戳

首页 > 解决方案 > 即使我在 html 中调用 cdn，我是否需要安装 plotly？

javascript - 即使我在 html 中调用 cdn，我是否需要安装 plotly？

问题描述

我正在使用烧瓶来构建在线应用程序。我正在使用 d3.js 获取用户输入，然后将其发送到 app.py，app.py 将使用此输入进行 api 调用并获取适当的数据，然后它将 jsonfied 数据返回给 javascript，以便在正确的 html 标签中呈现绘图，但它会保留在给我错误时：错误：提供的 DOM 元素为空或未定义

应用程序.py：

import os
from flask import Flask, render_template, jsonify, request, redirect, url_for
from alpha_vantage.timeseries import TimeSeries
import plotly
# import plotly.plotly as py
# import plotly.graph_objs as go


app = Flask(__name__)

api_key = "ssdqwjhwq"

# This will run upon entrance
@app.route("/")
def home():
    return render_template("index.html")

@app.route("/stockchart/<label>")
def stock_data(label):
    ts = TimeSeries(key=api_key, output_format='pandas')
    df, meta_deta = ts.get_daily(label, outputsize="full")
    df.columns = ["open", "high", "low", "close", "volume"]
    data = [{"dates":list(df.index.values)},
            {"close": list(df.close)}]
    return jsonify(data)

if __name__ == "__main__":
    app.run()

我的html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Stock Screener</title>
    <!-- Importing all cdn -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <div class="text-center">
        <h2>Stock Screener</h2>
        <h5>Interactive chart with predictions using machine learning</h5>
    </div>

    <div>
        <!-- Input for stock label -->
        <form>
            <label for="stockInput">Enter stock label</label>

            <!-- use js to store input into a variable. -->
            <input type="text" id="stockInput" name="stock_label" placeholder="Label">

            <!-- submit button-->
            <input type="submit" value="submit" id="stocklabelsubmit">
        </form>
    </div>
    <div class="chart">
    </div>

</body>
<script src="../static/js/index.js"></script>
</html>

还有我的 javascript

// give reference to submit button
// Upon click, submitted function will run

d3.select("#stocklabelsubmit").on("click", submitted);

function submitted(){
    d3.event.preventDefault();

    // grab label inputted.
    var inputted_label = d3.select("#stockInput").node().value;
    // refresh input box
    d3.select("#stockInput").node().value = "";
    // pass inputted_label to plot function
    Plot(inputted_label);
};

function Plot(input){
    var url = `/stockchart/${input}`
    // when this function is called call /stock_data function!!
    // data is what is returned from python
    d3.json(url).then(function(data){
        console.log(data);
        console.log(data[0]);
        console.log(data[0].dates);
        var trace = {
            x:data[0].dates,
            y:data[1].close,
            type: "scatter"
        };

        var layout {
            title:"Stock chart",
            xaxis:{
                title:"dates"
            },
            yaxis:{
                title:"closing price"
            }
        };
        var data = [trace];
        // var loc_plot = document.getElementById("chart");

        Plotly.newPlot("chart", data, layout);
    });
};

错误告诉我js第33行有错误 = Plotly.newPlot("chart", data,layout); 我不确定如何解决这个问题，直到正确打印控制台日志之前，一切似乎都可以正常工作。有什么帮助吗？谢谢！

标签： javascriptpythonhtmlflask

解决方案

根据文档，graphDiv参数 ofPlotly.newPlot()指的是 DOM 节点或 DOM 节点的字符串 ID。

在您上面的代码中，您似乎都没有提供。您提供的是 DOM 节点的类，而不是实际的 DOM 节点或 DOM 节点的 ID。这可能解释了您遇到的关于 null 或未定义的 DOM 节点的错误。

尝试更改<div class="chart">为<div class="chart" id="chart">（或其他 ID），或获取使用的节点Element.querySelector()并将其传递给 DOM 节点，看看是否可行。

推荐阅读