javascript - 如何在同一个 HTML 页面中离线绘制所有 Plotly 图表？

Question

我正在尝试使用 jupyter-notebook 制作一个 python 脚本，它正在从我的网站的 sql-server 获取数据我想在每次加载页面时使用 javascript 函数调用此脚本。所以页面上会有 Plotly 图表。这是我的代码:

# coding: utf-8

# In[1]:


#import os
#os.chdir("D:/Datasets/Trell")


# In[2]:


import json
from pandas.io.json import json_normalize
import pandas as pd
import numpy as np
import warnings
warnings.filterwarnings('ignore')

from plotly.offline import init_notebook_mode,plot, iplot
init_notebook_mode(connected=True)
import plotly.graph_objs as go
import plotly.offline as offline
offline.init_notebook_mode()
import plotly.tools as tls



# In[3]:


# importing the requests library
import requests

# api-endpoint
URL = "https://*****.co.in/*****/*******.php"

# location given here
token= '************'

query= 'SELECT userId,createdAt,userName,trails_count,bio FROM users WHERE createdAt >= "2018-07-01"'

# defining a params dict for the parameters to be sent to the API
PARAMS = {'token':token, 'query':query}

# sending get request and saving the response as response object
r = requests.post(url = URL, data = PARAMS)


# In[4]:


data=r.json()


# In[5]:


df=pd.DataFrame(data)


# In[6]:


df.head(1)


# In[7]:


df['date'] = pd.DatetimeIndex(df.createdAt).normalize()


# In[8]:


df['user']=1


# In[9]:


df_user=df.groupby(['date'],as_index=False)['user'].agg('sum')


# In[10]:


data = [go.Scatter( x=df_user['date'], y=df_user['user'] )]
plot(data, filename='time-series.')


# In[11]:


df_user['day_of_week']=df_user['date'].dt.weekday_name
df_newuser_day=df_user.groupby(['day_of_week'],as_index=False)['user'].agg('sum')
df_newuser_day=df_newuser_day.sort_values(['user'],ascending=False)

trace = go.Bar(
    x=df_newuser_day['day_of_week'],
    y=df_newuser_day.user,
    marker=dict(
        color="blue",
        #colorscale = 'Blues',
        reversescale = True
    ),
)

layout = go.Layout(
    title='Days of Week on which max. users register (July)'
)

data = [trace]
fig = go.Figure(data=data, layout=layout)
plot(fig, filename="medal.")

但问题是，每次plot()执行新函数 HTML选项卡正在打开 filename=函数内部提到过。

我想要的是，当我执行文件时，所有图表都位于单个 HTML 下页面，我还想给标题 <h1>在每个 plotly 之前添加标签，以便 plotly 易于理解。那么有没有一种方法可以做到这一点，同时添加一些 HTMl和CSS plotly 之前的标签绘图，使其看起来像一个干净的网页，其中包含所有 plotly图表以及 <h1> 下提到的标题标签。

就像我希望所有图表依次出现在同一页面上一样。

附注我不想使用iplot因为它仅在同一个笔记本中绘图，并且也不保存文件。

Answer 1

要使绘图显示在同一页面中，请使用 plotly offline 的 iplot 方法，而不是 plot。

所以声明。

plot(fig, filename="medal.")

将会成为。

iplot(fig)

如果您想在绘图前添加 HTML，请使用 ipython 提供的 display 和 HTML。

from IPython.core.display import display, HTML
display(HTML('<h1>Hello, world!</h1>'))
iplot(fig)

因此，首先我们可以先插入html，然后再绘制图表!

要了解更多信息，请访问此 SO Answer