Question

我正在用虚线设置dcc.Graph()对象，并将图形设置为我在plotly中创建的散点图。

该图完全按照我在plotly中的方式显示其所有数据，但是当我运行本地服务器并以破折号查看该图时，除坐标轴和刻度标签外，其他所有内容均为空白。 / p>

我尝试了以下方法 -编辑布局中的宽度和高度 -仅使用图形对象创建了仪表板服务器 -单独运行图 -看了plotly主页上的图形表示形式

其他图形的数据可以正常工作，并且显示在同一破折号中，但不是同一破折号。

import plotly.plotly as py
import plotly.graph_objs as go
import numpy as np
from sklearn import linear_model

def create_tile_scatter_plot_figure():
    def data_to_plotly(x):
        k = []
        for i in range(0, len(x)):
            k.append(x[i][0])
        return k

    tiles = ['ALAÏA Vienne Laser-Cut Leather Tote',
             'AZZEDINE ALAÏA LASER-CUT KNITTED DRESS',
             'NEOPRENE SNEAKERS',
             'GRIP JACKET BLACK',
             'ORBIT PANT BLACK',
             'BLACK SHELL, MULTI FOX FUR',
             'LEATHER JACKET', 'LAUREN RALPH LAUREN Turtleneck Sweater',
             'Edwart Paris',
             'SG VARSITY POM BEANIE DARK BLUE',
             'Pro Longwear Foundation',
             'CHOCOLATE EYE PALETTE',
             'ALAÏA Laser-Cut Ankle Boots',
             'Mac 12 Lash',
             'Bobby Brown BUFF A Beige Pink Lipgloss',
             'ALAÏA Bracelet Leather Bucket Bag',
             'Bar 8 Mandarin Oriental Hotel',
             'Mandarin Hotel Paris', 'Grand Palais Paris']
    x_data = np.array([i + 1 for i in range(len(tiles))]).reshape(-1, 1)
    y_data = np.array([383, 367, 320, 318, 327, 420, 377, 303, 283, 302, 264, 257, 296,
                       317, 335, 302, 292, 297, 264]).reshape(-1, 1)
    tickvals = [i + 1 for i in range(len(tiles))]

    regr = linear_model.LinearRegression().fit(x_data, y_data)

    p1 = go.Scatter(x=data_to_plotly(x_data),
                    y=y_data,
                    mode='markers',
                    marker=dict(color='black')
                    )

    p2 = go.Scatter(x=data_to_plotly(x_data),
                    y=regr.predict(x_data),
                    mode='lines',
                    line=dict(color='blue', width=3)
                    )

    layout = go.Layout(title='Engagement by Tile',
                       paper_bgcolor='rgba(0,0,0,0)',
                       plot_bgcolor='rgba(0,0,0,0)',
                       width=1300,
                       height=800,
                       xaxis=dict(ticks='',
                                  ticktext=tiles,
                                  tickvals=tickvals,
                                  showgrid=False,
                                  showline=True,
                                  showticklabels=True,
                                  automargin=False,
                                  range=[0, len(tiles)+1]),
                       yaxis=dict(ticks='',
                                  showgrid=False,
                                  showline=True,
                                  showticklabels=False,
                                  automargin=True),
                       showlegend=False,
                       hovermode='closest')

    return go.Figure(data=[p1, p2], layout=layout)

app = dash.Dash(__name__)
app.layout = html.Div(id='main-container', children=[
    dcc.Graph(id='scatter-regression', figure=create_tile_scatter_plot_figure())]),
    ])
if __name__ == '__main__':
    app.run_server(debug=True)

我希望数据在破折号中出现在图表上，但看不到。

Answer 1

您的y坐标格式错误。我建议您在散点图创建过程中将它们展平，因此您可以进行以下更改：

import React, { useEffect, useRef } from "react";
import ReactDOM from "react-dom";
import backImg from "./background.png";

const Canvas = props => {
  const canvas = useRef(null);

  const image = useRef(null);
  useEffect(() => {
    const ctx = canvas.current.getContext("2d");
    image.current.onload = () => {
      ctx.drawImage(image.current, 0, 0);
      ctx.font = "40px Courier";
      ctx.fillText(props.text, 210, 75);
    };
  }, []);
  useEffect(() => {
    const ctx = canvas.current.getContext("2d");
    ctx.drawImage(image.current, 0, 0);
    ctx.font = "40px Courier";
    ctx.fillText(props.text, 210, 75);
  });
  return (
    <div>
      <canvas ref={canvas} width={640} height={425} />
      <img
        ref={image}
        alt="Stackoverflow56203352"
        src={backImg}
        className="hidden"
      />
    </div>
  );
};

function App() {
  return (
    <div className="App">
      <Canvas text="TEST 123" />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

到

y=y_data

和

y=y_data.flatten()

到

y=regr.predict(x_data)

如何修复在绘图中显示数据但在使用破折号运行时显示为空的绘图图形？

1 个答案: