# 基本的なKPIカードの作成 import plotly.graph_objects as go # KPIデータ 売上 = 450 # 今月の売上（万円） 前月 = 400 # 前月の売上（万円） # KPIカードを作成 fig = go.Figure(go.Indicator( mode=’number+delta’, # 数値と変化率を表示 value=売上, # メインの数値 delta={ ‘reference’: 前月, # 比較対象（前月） ‘relative’: True, # 変化率を%で表示 ‘valueformat’: ‘.1f’, # 小数点1桁 ‘suffix’: ‘%’ # 単位に%を追加 }, number={ ‘suffix’: ‘万円’, # 単位 ‘font’: { ‘size’: 64, # フォントサイズ（大きく！） ‘weight’: ‘bold’ # 太字 } }, title={ ‘text’: ‘月間売上’, # タイトル ‘font’: {‘size’: 18} } )) # レイアウト設定 fig.update_layout( height=250, paper_bgcolor=’#F8F9FA’ # 薄いグレーの背景 ) fig.show()

# 複数のKPIカードを横に並べる import plotly.graph_objects as go from plotly.subplots import make_subplots # KPIデータ（3つのKPI） kpis = [ {‘名前’: ‘売上’, ‘値’: 450, ‘前期’: 400, ‘単位’: ‘万円’}, {‘名前’: ‘新規顧客’, ‘値’: 38, ‘前期’: 30, ‘単位’: ‘社’}, {‘名前’: ‘満足度’, ‘値’: 4.5, ‘前期’: 4.2, ‘単位’: ‘点’} ] # 3列のサブプロットを作成 fig = make_subplots( rows=1, cols=3, specs=[[{‘type’: ‘indicator’}] * 3], # 3つともIndicator型 subplot_titles=[kpi[‘名前’] for kpi in kpis] ) # 各KPIカードを追加 for i, kpi in enumerate(kpis, start=1): fig.add_trace(go.Indicator( mode=’number+delta’, value=kpi[‘値’], delta={ ‘reference’: kpi[‘前期’], ‘relative’: True, ‘valueformat’: ‘.1f’, ‘suffix’: ‘%’, ‘increasing’: {‘color’: ‘green’}, # 増加=緑 ‘decreasing’: {‘color’: ‘red’} # 減少=赤 }, number={ ‘suffix’: kpi[‘単位’], ‘font’: {‘size’: 48, ‘weight’: ‘bold’} } ), row=1, col=i) # レイアウト設定 fig.update_layout( height=250, showlegend=False, paper_bgcolor=’white’ ) fig.show()

# 矢印付きKPIカードを作成する関数 import plotly.graph_objects as go def create_kpi_card(タイトル, 値, 前期値, 単位=”): “”” 矢印付きKPIカードを作成する Parameters: ———– タイトル : str – KPIの名前 値 : float – 現在の値 前期値 : float – 比較対象（前月、前年など） 単位 : str – 単位（万円、%など） Returns: ——– fig : Figure – PlotlyのFigureオブジェクト “”” fig = go.Figure(go.Indicator( mode=’number+delta’, value=値, delta={ ‘reference’: 前期値, ‘relative’: True, # 変化率で表示 ‘valueformat’: ‘.1f’, # 小数点1桁 ‘suffix’: ‘%’, ‘increasing’: { ‘color’: ‘green’, # 増加時は緑 ‘symbol’: ‘▲’ # 上向き三角 }, ‘decreasing’: { ‘color’: ‘red’, # 減少時は赤 ‘symbol’: ‘▼’ # 下向き三角 } }, number={ ‘suffix’: 単位, ‘font’: {‘size’: 64, ‘weight’: ‘bold’} }, title={ ‘text’: タイトル, ‘font’: {‘size’: 18} } )) fig.update_layout( height=250, paper_bgcolor=’#F8F9FA’, margin=dict(t=50, b=20, l=20, r=20) ) return fig # 使用例：売上が増加した場合 fig1 = create_kpi_card(‘月間売上’, 450, 400, ‘万円’) fig1.show() # 使用例：満足度が低下した場合 fig2 = create_kpi_card(‘顧客満足度’, 3.8, 4.0, ‘点’) fig2.show()

# 色分けKPIカード（目標達成率で色を変える） import plotly.graph_objects as go def kpi_card_with_color(タイトル, 値, 目標, 単位=”): “”” 目標達成率に応じて色分けされたKPIカードを作成 Parameters: ———– タイトル : str – KPIの名前 値 : float – 現在の値 目標 : float – 目標値 単位 : str – 単位 “”” # 達成率を計算 達成率 = (値 / 目標) * 100 # 達成率に応じて色とステータスを決定 if 達成率 >= 100: 背景色 = ‘#D5F4E6’ # 薄い緑 文字色 = ‘#2ECC71’ # 緑 ステータス = ‘✓ 目標達成’ elif 達成率 >= 80: 背景色 = ‘#FCF3CF’ # 薄い黄 文字色 = ‘#F39C12’ # 黄 ステータス = ‘⚠ 要注意’ else: 背景色 = ‘#FADBD8’ # 薄い赤 文字色 = ‘#E74C3C’ # 赤 ステータス = ‘✗ 未達成’ # KPIカードを作成 fig = go.Figure(go.Indicator( mode=’number+gauge’, value=値, number={ ‘suffix’: 単位, ‘font’: { ‘size’: 56, ‘color’: 文字色, ‘weight’: ‘bold’ } }, title={ ‘text’: f'{タイトル}
{ステータス}‘, ‘font’: {‘size’: 16} }, gauge={ ‘axis’: {‘range’: [0, 目標 * 1.2]}, ‘bar’: {‘color’: 文字色}, ‘threshold’: { ‘line’: {‘color’: ‘black’, ‘width’: 2}, ‘thickness’: 0.75, ‘value’: 目標 } } )) fig.update_layout( height=300, paper_bgcolor=背景色, margin=dict(t=80, b=20, l=20, r=20) ) return fig # 使用例：目標達成 fig1 = kpi_card_with_color(‘月間売上’, 450, 400, ‘万円’) fig1.show() # 使用例：要注意 fig2 = kpi_card_with_color(‘新規顧客’, 35, 40, ‘社’) fig2.show() # 使用例：未達成 fig3 = kpi_card_with_color(‘成約率’, 6, 10, ‘%’) fig3.show()

# スパークライン付きKPIカード import plotly.graph_objects as go from plotly.subplots import make_subplots def kpi_card_with_sparkline(タイトル, 現在値, 履歴データ, 単位=”): “”” スパークライン付きKPIカードを作成 Parameters: ———– タイトル : str – KPIの名前 現在値 : float – 現在の値 履歴データ : list – 過去のデータ（リスト形式） 単位 : str – 単位 “”” # 前期の値（履歴データの最後から2番目） 前期値 = 履歴データ[-2] if len(履歴データ) > 1 else 現在値 # 2行のサブプロットを作成（上:KPI、下:スパークライン） fig = make_subplots( rows=2, cols=1, row_heights=[0.7, 0.3], # 上70%、下30% specs=[ [{‘type’: ‘indicator’}], [{‘type’: ‘scatter’}] ], vertical_spacing=0.05 # 行間のスペース ) # 上部: KPI数値 fig.add_trace(go.Indicator( mode=’number+delta’, value=現在値, delta={ ‘reference’: 前期値, ‘relative’: True, ‘valueformat’: ‘.1f’, ‘suffix’: ‘%’ }, number={ ‘suffix’: 単位, ‘font’: {‘size’: 48, ‘weight’: ‘bold’} }, title={ ‘text’: タイトル, ‘font’: {‘size’: 16} } ), row=1, col=1) # 下部: スパークライン fig.add_trace(go.Scatter( x=list(range(len(履歴データ))), y=履歴データ, mode=’lines’, line=dict(color=’#3498DB’, width=2), fill=’tozeroy’, # 下を塗りつぶす fillcolor=’rgba(52, 152, 219, 0.2)’, # 薄い青 showlegend=False, hovertemplate=’%{y}’ + 単位 + ‘‘ ), row=2, col=1) # 軸を非表示（スパークラインはシンプルに） fig.update_xaxes(showticklabels=False, showgrid=False, row=2, col=1) fig.update_yaxes(showticklabels=False, showgrid=False, row=2, col=1) fig.update_layout( height=300, paper_bgcolor=’#F8F9FA’, margin=dict(t=50, b=20, l=20, r=20) ) return fig # 使用例 過去6ヶ月売上 = [320, 350, 380, 400, 420, 450] fig = kpi_card_with_sparkline(‘月間売上’, 450, 過去6ヶ月売上, ‘万円’) fig.show()

# 営業ダッシュボード（4つのKPIカード） import plotly.graph_objects as go from plotly.subplots import make_subplots # 営業KPIデータ 営業データ = { ‘月間売上’: {‘値’: 450, ‘目標’: 400, ‘前月’: 400, ‘単位’: ‘万円’}, ‘新規顧客’: {‘値’: 38, ‘目標’: 30, ‘前月’: 24, ‘単位’: ‘社’}, ‘商談数’: {‘値’: 52, ‘目標’: 50, ‘前月’: 48, ‘単位’: ‘件’}, ‘成約率’: {‘値’: 12.5, ‘目標’: 10.0, ‘前月’: 11.2, ‘単位’: ‘%’} } # 4列のサブプロットを作成 fig = make_subplots( rows=1, cols=4, specs=[[{‘type’: ‘indicator’}] * 4], subplot_titles=list(営業データ.keys()) ) # 各KPIを追加 for i, (名前, data) in enumerate(営業データ.items(), start=1): # 達成率で色を決定 達成率 = (data[‘値’] / data[‘目標’]) * 100 if 達成率 >= 100: 色 = ‘#2ECC71’ # 緑 elif 達成率 >= 80: 色 = ‘#F39C12’ # 黄 else: 色 = ‘#E74C3C’ # 赤 fig.add_trace(go.Indicator( mode=’number+delta+gauge’, value=data[‘値’], delta={ ‘reference’: data[‘前月’], ‘relative’: True, ‘valueformat’: ‘.1f’, ‘suffix’: ‘%’, ‘increasing’: {‘color’: ‘green’}, ‘decreasing’: {‘color’: ‘red’} }, number={ ‘suffix’: data[‘単位’], ‘font’: {‘size’: 36, ‘weight’: ‘bold’} }, gauge={ ‘axis’: {‘range’: [0, data[‘目標’] * 1.2]}, ‘bar’: {‘color’: 色}, ‘threshold’: { ‘line’: {‘color’: ‘black’, ‘width’: 2}, ‘value’: data[‘目標’] } } ), row=1, col=i) fig.update_layout( height=300, showlegend=False, title_text=’📊 営業KPIダッシュボード’, title_font_size=20 ) fig.show()

# ECサイトKPIダッシュボード（スパークライン付き） import plotly.graph_objects as go from plotly.subplots import make_subplots # ECサイトKPIデータ ec_data = { ‘訪問者数’: { ‘値’: 15000, ‘履歴’: [12000, 12500, 13000, 13800, 14200, 15000], ‘単位’: ‘人’ }, ‘CVR’: { ‘値’: 2.9, ‘履歴’: [2.4, 2.5, 2.6, 2.7, 2.8, 2.9], ‘単位’: ‘%’ }, ‘平均単価’: { ‘値’: 5294, ‘履歴’: [4800, 4900, 5000, 5100, 5200, 5294], ‘単位’: ‘円’ }, ‘売上’: { ‘値’: 230, ‘履歴’: [150, 160, 180, 200, 210, 230], ‘単位’: ‘万円’ } } # 4列×2行のグリッド（上:KPI、下:スパークライン） fig = make_subplots( rows=2, cols=4, row_heights=[0.65, 0.35], specs=[ [{‘type’: ‘indicator’}] * 4, [{‘type’: ‘scatter’}] * 4 ], subplot_titles=list(ec_data.keys()), vertical_spacing=0.12 ) # 各KPIとスパークラインを追加 for i, (名前, data) in enumerate(ec_data.items(), start=1): 前期 = data[‘履歴’][-2] # KPI数値（上段） fig.add_trace(go.Indicator( mode=’number+delta’, value=data[‘値’], delta={ ‘reference’: 前期, ‘relative’: True, ‘valueformat’: ‘.1f’, ‘suffix’: ‘%’ }, number={ ‘suffix’: data[‘単位’], ‘font’: {‘size’: 32, ‘weight’: ‘bold’} } ), row=1, col=i) # スパークライン（下段） fig.add_trace(go.Scatter( x=list(range(len(data[‘履歴’]))), y=data[‘履歴’], mode=’lines+markers’, line=dict(color=’#3498DB’, width=2), marker=dict(size=5), fill=’tozeroy’, fillcolor=’rgba(52, 152, 219, 0.2)’, showlegend=False ), row=2, col=i) # 軸を非表示 fig.update_xaxes(showticklabels=False, showgrid=False, row=2, col=i) fig.update_yaxes(showticklabels=False, showgrid=False, row=2, col=i) fig.update_layout( height=350, title_text=’🛒 ECサイトKPIダッシュボード’, title_font_size=20, showlegend=False ) fig.show()