Question

我有一个散布的散点图，但烧瓶未显示我是从互联网的例子中摘录的

我的工作结果看起来像that：

这是我的代码：

plotly_test.py

from flask import Flask, render_template
import json
import plotly
from plotly import graph_objs as go
import numpy as np

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def kek():
    t = np.linspace(0, 10, 100)
    fig = go.Figure()
    fig.add_trace(go.Scatter(
        x=t, y=np.sin(t),
        name='sin',
        mode='markers',
        marker_color='rgba(152, 0, 0, .8)'
    ))
    fig.add_trace(go.Scatter(
        x=t, y=np.cos(t),
        name='cos',
        marker_color='rgba(255, 182, 193, .9)'
    ))
    fig.update_traces(mode='markers', marker_line_width=2, marker_size=10)
    fig.update_layout(title='Styled Scatter',
                      yaxis_zeroline=False, xaxis_zeroline=False)
    data = [fig]
    graphJSON = json.dumps(data, cls=plotly.utils.PlotlyJSONEncoder)
    return render_template('test1.html', graphJSON=graphJSON)

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

还有带有样式和脚本的html：

test1.html

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .header{
                text-align: center;
                background-color: rgb(136, 185, 229);
                height: 70px;
                line-height: 70px;
            }
            .chart{
                margin-top: 30px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <h2>
                Plotly Chart Demo
            </h2>
        </div>
        <div id="chart" class="chart">
        </div>
    </body>
        <!-- D3.js -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <!-- Plotly.js -->
        <script src="https://d14fo0winaifog.cloudfront.net/plotly-basic.js"></script>
        <script type="text/javascript">
            var graphs = {{ graphJSON|safe }};
            Plotly.plot('chart', graphs, {});        
        </script>
</html>

您能解释一下我该怎么做吗？不使用烧瓶，散布效果很好，但事实并非如此！

js concole

Answer 1

将此放在头部：

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

然后删除这部分：

    <!-- D3.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <!-- Plotly.js -->
    <script src="https://d14fo0winaifog.cloudfront.net/plotly-basic.js"></script>

Flask不会显示散乱的散点图

1 个答案: