2017-08-14 23 views
3

私はJupyter Notebookで作成したレポートを持っています。私はアウトプット(プロッ​​ト)を美的理由の中心にしたい。私はここに与えられた答えを試してみました出力をPython Jupyterノートブックの中央に配置するにはどうすればよいですか?

Centering output on IPython notebook

が、しかしこの1つは動作しません。

私はそれを拡張し、それを作る、プロットが広く、中央に配置する必要がない場合には、プロットを中心としながら、(Center align outputs in ipython notebook

CSS = """ 
.output { 
    align-items: center; 
} 
""" 

HTML('<style>{}</style>'.format(CSS)) 

しかしStackOverflowの上で動作され、これを見つけました私が望んでいないページよりも広い。私はそれが言ったように、出力マージン領域を調整しようとしたが、それはどちらか

enter image description here

誰もが持って(再び私がすることを望むいけない)、再び左にそれをプッシュするか、スクロールバーを必要としていることをポイントにそれをsquishes助言がありますか?私はこれが標準的で簡単だが、明らかにそうではないと思った。(もし私が望むものが不可能ならば、コードブロックだけを集中させることは完璧な回避策になるだろうか?)

Ie。この表を中央:このコードによって生成される

enter image description here

df = pd.DataFrame(a01) 

new_df01 = df[['Call','FirstReceivedDate','Value']] 
new_df01['month'] = pd.Categorical(new_df01['FirstReceivedDate'].dt.strftime('%b'), 
             categories=vals, ordered=True) 

groupA01 = new_df01.groupby(['Call']).agg({'Value':sum, 'FirstReceivedDate':'count'}).rename(columns={'FirstReceivedDate':'Count'}) 
groupA01['Value'] = groupA01['Value'].map('{:,.2f}'.format) 

def hover(hover_color="#F1C40F"): 
    return dict(selector="tr:hover", 
       props=[("background-color", "%s" % hover_color)]) 

styles2 = [ 
    hover(), 
    dict(selector="th", props=[("font-size", "80%"), 
           ("font-family", "Gill Sans MT"), 
           ("color",'white'), 
           ('background-color', 'rgb(11, 48, 79)'), 
           ("text-align", "center")]), 
    dict(selector="td", props=[("font-size", "75%"), 
           ("font-family", "Gill Sans MT"), 
           ("text-align", "center")]), 
    dict(selector="tr", props=[("line-height", "11px")]), 
    dict(selector="caption", props=[("caption-side", "bottom")]) 
] 


html2 = (groupA01.style.set_table_styles(styles2) 
      .set_caption("")) 
html2 

ありがとうございます!ヒートマップのプロットを表示するためのコードを追加

dfreverse = df_hml.values.tolist() 
dfreverse.reverse() 

colorscale = [[0,'#FFFFFF'],[0.5, '#454D59'], [1, '#F1C40F']] 

x = [threeYr,twoYr,oneYr,Yr] 
y = ['March', 'February', 'January', 'December', 'November', 'October', 'September', 'August', 'July', 'June', 'May', 'April'] 
z = dfreverse 

hovertext = list() 
for yi, yy in enumerate(y): 
    hovertext.append(list()) 
    for xi, xx in enumerate(x): 
     hovertext[-1].append('Count: {}<br />{}<br />{}'.format(z[yi][xi],yy, xx)) 

data = [plotly.graph_objs.Heatmap(z=z, 
            colorscale=colorscale, 
            x=x, 
            y=y, 
            hoverinfo='text', 
            text=hovertext)] 

layout = go.Layout(
    autosize=False, 
    font=Font(
     family="Gill Sans MT", 
     size = 11 
    ), 
    width=600, 
    height=450, 
    margin=go.Margin(
     l=0, 
     r=160, 
     b=50, 
     t=100, 
     pad=3 
    ), 
     xaxis=dict(
     title='', 
     showgrid=False, 
     titlefont=dict(
      # family='Gill sans, monospace', 
      size=12, 
      #color='#7f7f7f' 
     ), 
     showticklabels=True, 
     tickangle=25, 
     tickfont=dict(
      family="Gill Sans MT", 
      size=12, 
      color='black' 
     ), 
    ), 
    yaxis=dict(
     title='', 
     showgrid=False, 
     titlefont=dict(
      #family='Gill sans', 
      #size=12, 
      #color='#7f7f7f' 
     ), 
     showticklabels=True, 
     tickangle=25, 
     tickfont=dict(
      family="Gill Sans MT", 
      size=12, 
      color='black' 
     ), 
) 
) 

fig = plotly.graph_objs.Figure(data=data, layout=layout) 
plotly.offline.iplot(fig,config={"displayModeBar": False},show_link=False,filename='pandas-heatmap') 
+0

は、あなただけのノートブックのライブバージョンで出力を中央にしますか、またはあなたはそれが後の中心にしたいですか'nbconvert'はそれを例えばHTML、PDF?または、両方のシナリオの中央に配置したいですか? –

+0

お返事ありがとうございます!ノートを使ってhtmlに書き出すときに出力を中央に揃えたいと思っています:) – ScoutEU

答えて

1

を、あなたのグラフをセンタリングするため、このクラスのトライアウトありませんデータフレームがないので、私はの能力を実証するランダムなデータフレームとプロットを作成していてください。クラス。チェックアウトしてください。

コード:

from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot 
from IPython.display import display, HTML 
from plotly.graph_objs import * 
import numpy as np 
init_notebook_mode(connected=True) 

display(HTML(""" 
<style> 
.output { 
    display: flex; 
    align-items: center; 
    text-align: center; 
} 
</style> 
""")) 
iplot([{"x": [1, 2, 3], "y": [3, 1, 6]}]) 
iplot([Box(y = np.random.randn(50), showlegend=False) for i in range(45)], show_link=False) 
x = np.random.randn(2000) 
y = np.random.randn(2000) 
iplot([Histogram2dContour(x=x, y=y, contours=Contours(coloring='heatmap')), 
     Scatter(x=x, y=y, mode='markers', marker=Marker(color='white', size=3, opacity=0.3))], show_link=False) 

出力:

enter image description here

+0

ナーレン、今すぐチェックしてみてください:) – ScoutEU

+0

まず、あなたのコードが本当に出力を中心にしてくれてありがとう、私の以前の問題のように、HTMLにエクスポートすると何らかの理由でチャートが潰れ、水平スクロールバーが追加されます:/ ...なぜか分かりません。 – ScoutEU

+0

@スカウト私に輸出してチェックさせてください –

関連する問題