ビジュアライゼーション スキル

テクノロジー スタック

• pyecharts: Apache EChartsのPythonラッパー
• Apache ECharts: JavaScriptチャートライブラリ
• 出力: 埋め込みJSを含む自己完結型HTML

チャートタイプ リファレンス

棒グラフ

from pyecharts.charts import Bar
from pyecharts import options as opts

chart = Bar()
chart.add_xaxis(labels)
chart.add_yaxis("Series Name", values)
chart.set_global_opts(
    title_opts=opts.TitleOpts(title="Chart Title"),
    tooltip_opts=opts.TooltipOpts(trigger="axis"),
    xaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(rotate=45)),
)

折れ線グラフ

from pyecharts.charts import Line

chart = Line()
chart.add_xaxis(dates)
chart.add_yaxis("Actual", values, is_smooth=True)
chart.add_yaxis("7-Day MA", moving_avg_7, is_smooth=True, linestyle_opts=opts.LineStyleOpts(type_="dashed"))

円グラフ

from pyecharts.charts import Pie

chart = Pie()
chart.add("", list(zip(labels, values)))
chart.set_global_opts(legend_opts=opts.LegendOpts(orient="vertical", pos_left="left"))

ヒートマップ

from pyecharts.charts import HeatMap

chart = HeatMap()
chart.add_xaxis(x_labels)
chart.add_yaxis("", y_labels, value=[[x, y, val], ...])
chart.set_global_opts(
    visualmap_opts=opts.VisualMapOpts(min_=0, max_=max_val),
)

散布図(異常検知用)

from pyecharts.charts import Scatter

chart = Scatter()
chart.add_xaxis(dates)
chart.add_yaxis("Cost", costs, symbol_size=10)
# 異なる色/サイズで異常マーカーを追加

重要: ブラウザ互換性

JavaScript用にリストに変換してください:

# 正しい
chart.add_xaxis(df['column'].tolist())
chart.add_yaxis("Label", df['values'].tolist())

# 誤り - レンダリング問題を引き起こす
chart.add_xaxis(df['column'].values)  # numpy配列
chart.add_xaxis(df['column'])  # pandas Series

テーマオプション

pyechartsで利用可能なテーマ:

• macarons (デフォルト) - カラフル、プロフェッショナル
• shine - 明るい色
• roma - 落ち着いた、エレガント
• vintage - レトロな雰囲気
• dark - ダーク背景
• light - ライト、ミニマル

使用方法:

from pyecharts.globals import ThemeType
chart = Bar(init_opts=opts.InitOpts(theme=ThemeType.MACARONS))

HTMLレポート構造

def generate_html_report(self, output_path: str, top_n: int = 10) -> str:
    # すべてのチャートを作成
    charts = [
        self.create_cost_by_service_chart(top_n),
        self.create_cost_by_account_chart(),
        # ... その他のチャート
    ]

    # ページに統合
    page = Page(layout=Page.SimplePageLayout)
    for chart in charts:
        page.add(chart)

    # ファイルにレンダリング
    page.render(output_path)
    return output_path

数値のフォーマット

# ツールチップの通貨フォーマット
tooltip_opts=opts.TooltipOpts(
    trigger="axis",
    formatter="{b}: ${c:,.2f}"
)

# 軸ラベルのフォーマット
yaxis_opts=opts.AxisOpts(
    axislabel_opts=opts.LabelOpts(formatter="${value:,.0f}")
)

よくある問題と解決策

チャートが空の場合

1. ブラウザのコンソールでJSエラーを確認する
2. すべてのデータで .tolist() を確認する
3. ハード リフレッシュを実施(Ctrl+Shift+R)
4. HTMLソース内にデータが存在することを確認する

チャートが小さすぎる場合

init_opts=opts.InitOpts(width="100%", height="400px")

ラベルが重なっている場合

xaxis_opts=opts.AxisOpts(
    axislabel_opts=opts.LabelOpts(rotate=45, interval=0)
)

凡例が長すぎる場合

legend_opts=opts.LegendOpts(
    type_="scroll",
    orient="horizontal",
    pos_bottom="0%"
)

ビジュアライゼーションのテスト

# チャート作成をテスト
uv run pytest tests/test_visualizer.py -v

# サンプルレポートを再生成
uv run pytest tests/test_examples.py -v -s

# ブラウザで表示
open examples/example_report.html