# ライブラリのインポート import plotly.graph_objects as go from plotly.subplots import make_subplots import numpy as np # 4つのグラフを2×2で配置するサブプロットを作成 # subplot_titles: 各グラフのタイトル fig = make_subplots( rows=2, cols=2, subplot_titles=[ ‘1. 背景: 売上停滞（昨年）’, ‘2. 課題: 新規顧客減少’, ‘3. 解決策: 施策の効果’, ‘4. 結果: 目標達成！’ ], vertical_spacing=0.12, # 縦の間隔 horizontal_spacing=0.1 # 横の間隔 ) # ========== 1. 背景: 売上推移（停滞） ========== 月 = list(range(1, 13)) # 350万円前後で横ばいのデータを生成 昨年売上 = [350 + np.random.randn() * 15 for _ in range(12)] fig.add_trace(go.Scatter( x=月, y=昨年売上, mode=’lines+markers’, line=dict(color=’gray’, width=2, dash=’dash’), marker=dict(size=6), name=’昨年売上’ ), row=1, col=1) # ========== 2. 課題: 新規顧客数の減少 ========== # 月を追うごとに減少するデータ 新規顧客 = [40, 38, 35, 32, 30, 28, 25, 23, 22, 20, 18, 16] fig.add_trace(go.Scatter( x=月, y=新規顧客, mode=’lines+markers’, line=dict(color=’red’, width=3), marker=dict(size=8), name=’新規顧客’ ), row=1, col=2) # ========== 3. 解決策: 施策の効果（棒グラフ） ========== 施策 = [‘新商品’, ‘SNS広告’, ‘キャンペーン’] 効果 = [50, 30, 20] # 各施策の売上増加額（万円） fig.add_trace(go.Bar( x=施策, y=効果, marker=dict(color=[‘#3498DB’, ‘#E74C3C’, ‘#F39C12′]), text=[f’+{v}万円’ for v in 効果], textposition=’outside’, name=’施策効果’ ), row=2, col=1) # ========== 4. 結果: 目標達成（ゲージ） ========== fig.add_trace(go.Indicator( mode=’number+delta+gauge’, value=450, delta={ ‘reference’: 400, # 目標値との比較 ‘relative’: True, # パーセント表示 ‘increasing’: {‘color’: ‘green’} }, number={‘suffix’: ‘万円’, ‘font’: {‘size’: 36}}, title={‘text’: ‘目標達成率: 112%’}, gauge={ ‘axis’: {‘range’: [0, 500]}, ‘bar’: {‘color’: ‘green’}, ‘threshold’: { ‘value’: 400, ‘line’: {‘width’: 3, ‘color’: ‘red’} } } ), row=2, col=2) # レイアウト全体の設定 fig.update_layout( height=700, title_text=’📊 売上改善のストーリー（4フェーズ）’, title_font_size=20, showlegend=False ) fig.show()

import plotly.graph_objects as go # 売上推移データ（1月〜12月） 月 = list(range(1, 13)) 売上 = [350, 340, 345, 355, 350, 370, 390, 410, 430, 450, 460, 470] fig = go.Figure() # 折れ線グラフを追加 fig.add_trace(go.Scatter( x=月, y=売上, mode=’lines+markers’, line=dict(color=’steelblue’, width=3), marker=dict(size=8), name=’売上’ )) # ========== 重要ポイント1: 最低点を強調 ========== fig.add_annotation( x=2, y=340, # 注釈を付ける位置 text=’📉 最低点
新規顧客減少’, # 表示するテキスト showarrow=True, # 矢印を表示 arrowhead=2, # 矢印の形 arrowsize=1, # 矢印のサイズ arrowwidth=2, # 矢印の太さ arrowcolor=’red’, # 矢印の色 ax=40, ay=-50, # 矢印の方向（テキスト位置からの相対座標） bgcolor=’#FADBD8′, # テキストの背景色 bordercolor=’red’, # テキストの枠線色 borderwidth=2, font=dict(size=12, color=’red’) ) # ========== 重要ポイント2: 施策開始 ========== fig.add_annotation( x=6, y=370, text=’🚀 施策開始
新商品投入’, showarrow=True, arrowhead=2, arrowcolor=’orange’, ax=-40, ay=-50, bgcolor=’#FCF3CF’, bordercolor=’orange’, borderwidth=2, font=dict(size=12, color=’#B7950B’) ) # ========== 重要ポイント3: 目標達成 ========== fig.add_annotation( x=10, y=450, text=’✓ 目標達成!
450万円突破’, showarrow=True, arrowhead=2, arrowcolor=’green’, ax=40, ay=50, bgcolor=’#D5F4E6′, bordercolor=’green’, borderwidth=2, font=dict(size=14, color=’green’) ) # ========== 目標ラインを追加 ========== # add_hline(): 水平線を追加 fig.add_hline( y=400, line_dash=’dash’, # 破線 line_color=’green’, annotation_text=’目標: 400万円’, annotation_position=’right’ ) # レイアウト設定 fig.update_layout( title=’📈 売上改善ストーリー: 課題から成功まで’, xaxis_title=’月’, yaxis_title=’売上（万円）’, height=600, hovermode=’x unified’ ) fig.show()

import plotly.graph_objects as go # 売上データ 月 = list(range(1, 13)) 売上 = [350, 340, 345, 355, 350, 370, 390, 410, 430, 450, 460, 470] # フェーズごとに色を設定 # 1〜5月: 課題期（赤） # 6〜8月: 移行期（オレンジ） # 9〜12月: 成功期（緑） 色リスト = [] for i in range(len(売上)): if i < 5: 色リスト.append('#E74C3C') # 赤（課題期） elif i < 8: 色リスト.append('#F39C12') # オレンジ（移行期） else: 色リスト.append('#2ECC71') # 緑（成功期） fig = go.Figure() # 棒グラフで色分け fig.add_trace(go.Bar( x=月, y=売上, marker=dict( color=色リスト, line=dict(width=2, color='white') # 白い枠線 ), text=売上, textposition='outside', textfont=dict(size=11) )) # ========== フェーズ区分の背景を追加 ========== # add_vrect(): 縦方向の矩形（背景色）を追加 # 課題期の背景 fig.add_vrect( x0=0.5, x1=5.5, # X軸の範囲 fillcolor='red', opacity=0.1, # 薄く annotation_text='課題期', annotation_position='top left' ) # 移行期の背景 fig.add_vrect( x0=5.5, x1=8.5, fillcolor='orange', opacity=0.1, annotation_text='移行期', annotation_position='top left' ) # 成功期の背景 fig.add_vrect( x0=8.5, x1=12.5, fillcolor='green', opacity=0.1, annotation_text='成功期', annotation_position='top left' ) # レイアウト設定 fig.update_layout( title='📊 色でストーリーを表現: 課題→移行→成功', xaxis_title='月', yaxis_title='売上（万円）', height=500, showlegend=False ) fig.show()

import plotly.express as px import pandas as pd import numpy as np # 月ごとの売上データを作成 data = [] for month in range(1, 13): # 施策開始（6月）以降は売上が増加 if month <= 5: 売上 = 350 + np.random.randn() * 10 フェーズ = '課題期' elif month <= 8: 売上 = 350 + (month - 5) * 20 + np.random.randn() * 10 フェーズ = '移行期' else: 売上 = 350 + (month - 5) * 20 + np.random.randn() * 10 フェーズ = '成功期' data.append({ '月': month, '売上': 売上, 'フェーズ': フェーズ }) df = pd.DataFrame(data) # アニメーション付き棒グラフ # animation_frame: アニメーションの基準（月ごと） fig = px.bar( df, x='月', y='売上', animation_frame='月', # 月ごとにアニメーション color='フェーズ', # フェーズで色分け color_discrete_map={ '課題期': '#E74C3C', '移行期': '#F39C12', '成功期': '#2ECC71' }, title='📊 月次売上の推移（アニメーション）', labels={'売上': '売上（万円）'}, range_y=[0, 500] # Y軸の範囲を固定 ) # アニメーション速度を調整 # frame['duration']: 各フレームの表示時間（ミリ秒） # transition['duration']: フレーム間の遷移時間（ミリ秒） fig.layout.updatemenus[0].buttons[0].args[1]['frame']['duration'] = 800 fig.layout.updatemenus[0].buttons[0].args[1]['transition']['duration'] = 500 fig.update_layout(height=500) fig.show()

import plotly.express as px import pandas as pd import numpy as np # 月ごとのデータを作成 data = [] for month in range(1, 13): # 課題期: 新規顧客減少、売上停滞 if month <= 5: 売上 = 350 + np.random.randn() * 10 新規顧客 = 40 - (month * 2) + np.random.randn() * 2 フェーズ = '課題期' # 施策後: 新規顧客回復、売上増加 else: 売上 = 350 + (month - 5) * 20 + np.random.randn() * 10 新規顧客 = 30 + (month - 5) * 3 + np.random.randn() * 2 フェーズ = '成功期' if month > 8 else ‘移行期’ data.append({ ‘月’: month, ‘売上’: 売上, ‘新規顧客’: 新規顧客, ‘フェーズ’: フェーズ }) df = pd.DataFrame(data) # アニメーション付き散布図 fig = px.scatter( df, x=’新規顧客’, y=’売上’, animation_frame=’月’, # 月ごとにアニメーション size=[100] * len(df), # 点のサイズ color=’フェーズ’, color_discrete_map={ ‘課題期’: ‘#E74C3C’, ‘移行期’: ‘#F39C12’, ‘成功期’: ‘#2ECC71′ }, title=’🎬 新規顧客と売上の関係（月次アニメーション）’, labels={ ‘売上’: ‘売上（万円）’, ‘新規顧客’: ‘新規顧客数（社）’ } ) # 軸の範囲を固定（アニメーション中に軸が動かないように） fig.update_layout( height=600, xaxis=dict(range=[15, 50]), yaxis=dict(range=[300, 500]) ) fig.show()

import plotly.graph_objects as go from plotly.subplots import make_subplots import numpy as np # 総合ストーリーダッシュボード # 3行2列のレイアウト fig = make_subplots( rows=3, cols=2, row_heights=[0.2, 0.4, 0.4], # 各行の高さ比率 subplot_titles=[ ”, ”, # 1行目はタイトルKPIなのでサブタイトル不要 ‘📉 課題: 売上停滞’, ‘🚀 解決策: 施策別効果’, ‘✓ 結果: 目標達成!’, ‘📈 次の目標’ ], specs=[ # 1行目: KPIカード（2列結合） [{‘type’: ‘indicator’, ‘colspan’: 2}, None], # 2行目: 折れ線グラフ、棒グラフ [{‘type’: ‘scatter’}, {‘type’: ‘bar’}], # 3行目: ゲージ、折れ線グラフ [{‘type’: ‘indicator’}, {‘type’: ‘scatter’}] ], vertical_spacing=0.12 ) # ========== 1行目: タイトルKPI ========== fig.add_trace(go.Indicator( mode=’number+delta’, value=450, delta={ ‘reference’: 350, ‘relative’: True, ‘increasing’: {‘color’: ‘green’} }, number={‘suffix’: ‘万円’, ‘font’: {‘size’: 56}}, title={‘text’: ‘📈 売上V字回復ストーリー’, ‘font’: {‘size’: 22}} ), row=1, col=1) # ========== 2行目左: 売上推移（課題→成功） ========== 月 = list(range(1, 13)) 売上 = [350, 340, 345, 355, 350, 370, 390, 410, 430, 450, 460, 470] fig.add_trace(go.Scatter( x=月, y=売上, mode=’lines+markers’, line=dict(color=’steelblue’, width=3), marker=dict(size=8), name=’売上推移’ ), row=2, col=1) # 目標ライン fig.add_hline(y=400, line_dash=’dash’, line_color=’green’, row=2, col=1) # ========== 2行目右: 施策別効果 ========== fig.add_trace(go.Bar( x=[‘新商品’, ‘SNS広告’, ‘キャンペーン’], y=[50, 30, 20], marker=dict(color=[‘#3498DB’, ‘#E74C3C’, ‘#F39C12’]), text=[‘+50万’, ‘+30万’, ‘+20万’], textposition=’outside’, name=’施策効果’ ), row=2, col=2) # ========== 3行目左: 目標達成ゲージ ========== fig.add_trace(go.Indicator( mode=’number+gauge’, value=112, number={‘suffix’: ‘%’, ‘font’: {‘size’: 42}}, title={‘text’: ‘目標達成率’, ‘font’: {‘size’: 14}}, gauge={ ‘axis’: {‘range’: [0, 150]}, ‘bar’: {‘color’: ‘green’}, ‘threshold’: { ‘value’: 100, ‘line’: {‘width’: 3, ‘color’: ‘red’} } } ), row=3, col=1) # ========== 3行目右: 次期目標 ========== 次期月 = list(range(1, 7)) 次期目標 = [450, 470, 490, 510, 530, 550] fig.add_trace(go.Scatter( x=次期月, y=次期目標, mode=’lines+markers’, line=dict(color=’purple’, width=3, dash=’dot’), marker=dict(size=10), name=’次期目標’ ), row=3, col=2) # レイアウト設定 fig.update_layout( height=900, showlegend=False, font=dict(size=12) ) # 軸ラベルを追加 fig.update_xaxes(title_text=’月’, row=2, col=1) fig.update_yaxes(title_text=’売上（万円）’, row=2, col=1) fig.update_xaxes(title_text=’施策’, row=2, col=2) fig.update_yaxes(title_text=’効果（万円）’, row=2, col=2) fig.update_xaxes(title_text=’月’, row=3, col=2) fig.update_yaxes(title_text=’目標（万円）’, row=3, col=2) fig.show()