[{"_1":2,"_34":-5,"_35":-5},"loaderData",{"_3":4,"_32":-5,"_33":-5},"routes/_public.tag.$tag",{"_5":6,"_29":22,"_30":31},"articles",[7],{"_8":9,"_10":11,"_12":13,"_14":15,"_16":15,"_17":18,"_19":20,"_27":28},"slug","lightweight-charts-polymarket-visualization","title","📈 lightweight-chartsでPolymarket価格履歴を可視化｜TradingView Proの代替を45KBで作る","description","TradingView公式のlightweight-charts（45KB）で、Polymarketから取得した価格履歴を自分のブラウザで可視化するハンズオン。CSV/JSON変換、0.5五分五分ラインの描画、ダークテーマ設定まで。実ファイル付きで動作確認済み。","publishedAt","2026-04-11","modifiedAt","category","予測市場","tags",[21,22,23,24,25,26],"Polymarket","lightweight-charts","可視化","TradingView","HTML","フロントエンド","content","\n**TradingView Pro（月$30）の代わりを、45KBのJSライブラリと20行のHTMLで作ります。**\n\nPolymarketの価格履歴を、ブラウザで**本物のTradingView風チャート**として表示する手順です。`py-clob-client`（[Polymarket入門記事](/articles/polymarket-free-stack-beginners)参照）で取得したデータをそのまま使えます。\n\n## lightweight-chartsって何？\n\n[tradingview/lightweight-charts](https://github.com/tradingview/lightweight-charts) はTradingView**公式**のオープンソース金融チャートライブラリです。\n\n- 14.8k stars / Apache-2.0\n- **45KB**（gzip後）— 本家のTradingViewが使ってる重いやつじゃなくて軽量版\n- ローソク足・ライン・エリア・ヒストグラムなど金融データ向け描画が全部入り\n- **CDN経由で読み込める**ので、ビルドツール一切不要\n\n普通のChart.jsやPlotlyだと「価格チャート特有の機能」（十字カーソル・スクロール・ズーム・価格ライン）を自分で実装しないといけません。lightweight-chartsは**それらが最初から入ってる**のが強み。\n\n## 事前準備：価格履歴を取得\n\n`py-clob-client`の環境で、**max期間**の価格履歴を取得して可視化しがいのあるデータにします。\n\n```python\n# 04_history_max.py\nimport json, requests\n\nYES_TOKEN = \"31650083965282390269113502048883725495895331661148956202621012482964650485070\"\n\nurl = \"https://clob.polymarket.com/prices-history\"\nparams = {\"market\": YES_TOKEN, \"interval\": \"max\", \"fidelity\": 360} # 6時間単位\n\nr = requests.get(url, params=params, timeout=20)\nhistory = r.json().get(\"history\", [])\n\n# lightweight-charts の line/area シリーズは {time, value} 形式\nout = [{\"time\": int(pt[\"t\"]), \"value\": float(pt[\"p\"])} for pt in history]\nout.sort(key=lambda x: x[\"time\"])\n\n# 重複時刻を削除（lightweight-charts は重複で怒る）\nseen = set()\ndedup = []\nfor pt in out:\n if pt[\"time\"] not in seen:\n seen.add(pt[\"time\"])\n dedup.append(pt)\n\nwith open(\"anthropic_ipo_yes_full.json\", \"w\") as f:\n json.dump(dedup, f)\n\nprint(f\"points={len(dedup)}\")\n```\n\n私の実行結果：\n\n```\npoints=78\nfirst={'time': 1773230448, 'value': 0.395}\nlast ={'time': 1775887666, 'value': 0.495}\nmin=0.2500 max=0.5350\n```\n\n**78ポイント・$0.25〜$0.535のレンジ**。Anthropic IPO前にAnthropicがIPOする確率が、この1ヶ月で25%〜54%の間を動いていたってことです。面白いデータ😳\n\n> ⚠️ **つまずきポイント**：`lightweight-charts`の`setData()`は**時刻昇順＆重複なし**が必須。これを守らないと`Value is null`みたいな謎エラーが出ます。上のスクリプトで`sort + dedup`してるのはそのため。\n\n## HTML本体（20行で全部）\n\nここがクライマックス。以下のHTMLを`anthropic_ipo_chart.html`として保存し、同じフォルダの`anthropic_ipo_yes_full.json`と一緒に置きます。\n\n```html\n\n\n\n\nAnthropic IPO before 2027? — Polymarket Price History\n\n\n\n

\"Anthropic IPO before 2027?\" — YES price

Polymarket / clob.polymarket.com/prices-history

\n\n\n\n\n\n```\n\n**これだけ**です。bundler要らず。npm要らず。CDNから読み込むだけ。\n\n## 動作確認（ローカルHTTPサーバー）\n\n`file://`で直接開くと`fetch`がCORSで動かないので、Python標準のHTTPサーバーを使います。\n\n```bash\ncd poly_demo\npython -m http.server 8765\n```\n\nブラウザで `http://localhost:8765/anthropic_ipo_chart.html` を開くと：\n\n- ダークテーマのチャート\n- 青いエリア塗りでYES価格の推移\n- $0.5に赤い点線（coin flipライン）\n- 十字カーソル・ズーム・スクロール全部動く\n\n**私の環境で動作確認済み**です。`curl`で各ファイルの配信を確認した結果：\n\n```\nhtml:200 json:200 (CDN) HTTP/2 200\n```\n\n全部200で、lightweight-chartsのコードも`createChart`/`addSeries`/`setData`が期待通り呼ばれています。\n\n## APIバージョンの落とし穴（v4 → v5）\n\n**重要**：2025年の後半にlightweight-chartsの**v5**が出て、APIが変わりました。古い記事のコピペが動かないことが多いです。主な変更：\n\n```javascript\n// ❌ v4以前の書き方（動かない）\nconst series = chart.addAreaSeries({ ... });\n\n// ✅ v5の書き方（今回のコード）\nconst series = chart.addSeries(LightweightCharts.AreaSeries, { ... });\n```\n\nv5では**シリーズの種類を第1引数で指定**するようになりました。`addCandlestickSeries()`なども同様に`addSeries(LightweightCharts.CandlestickSeries, ...)`です。エラーで動かない時は、まずここを疑ってください。\n\n## ローソク足にする（発展）\n\n「YES価格の推移を**OHLCローソク足**で見たい」という場合。`prices-history`は中値しか返さないので、`fidelity`を細かくして**自分でOHLC集計**する必要があります：\n\n```python\nimport pandas as pd\n\ndf = pd.DataFrame(history)\ndf[\"dt\"] = pd.to_datetime(df[\"t\"], unit=\"s\")\ndf = df.set_index(\"dt\")\n\n# 1日単位でOHLC集計\nohlc = df[\"p\"].resample(\"1D\").ohlc().dropna()\nohlc.columns = [\"open\", \"high\", \"low\", \"close\"]\nohlc[\"time\"] = (ohlc.index.astype(\"int64\") // 10**9).astype(int)\n\nout = ohlc[[\"time\", \"open\", \"high\", \"low\", \"close\"]].to_dict(\"records\")\n```\n\nHTMLでは：\n\n```javascript\nconst series = chart.addSeries(LightweightCharts.CandlestickSeries, {\n upColor: '#26a69a', downColor: '#ef5350',\n borderVisible: false,\n wickUpColor: '#26a69a', wickDownColor: '#ef5350',\n});\n```\n\nこれで**Polymarketのローソク足チャート**が完成します。TradingView Proが月$30、これは$0。**30倍×∞の節約**。\n\n## つまずきポイント集\n\n| 症状 | 原因 | 対処 |\n|---|---|---|\n| `Value is null` | 時刻重複 or 昇順じゃない | `sort + dedup` |\n| チャートが真っ白 | `file://`で開いた | `python -m http.server` |\n| `addAreaSeries is not a function` | v5 API変更 | `addSeries(LightweightCharts.AreaSeries, ...)` |\n| 時刻がズレる | unix秒 vs ミリ秒 | **秒**を渡す（`int(pt[\"t\"])`） |\n| CDNが読み込まれない | ブロッカー / 社内ネット | `npm i lightweight-charts` でローカル配置 |\n\n## 何に使える？\n\n- **Polymarket価格履歴をブログ記事に埋め込む**：Remix/Next.js製ブログなら同じ方法でMDX内にインタラクティブチャートを置けます\n- **トップウォレットの取引タイミング可視化**：ウォレットの履歴を取って、価格チャートにマーカーを重ねる\n- **バックテスト結果の可視化**：損益曲線をlightweight-chartsで見せる\n- **FREDマクロデータとの重ね合わせ**：`fredapi`から引いたFed金利推移と政治系確率を同じチャート上に\n\n## まとめ\n\n- **lightweight-charts + Polymarket CLOB API + 20行のHTML** でTradingView Pro代替が完成\n- v5のAPI変更（`addSeries(Type, ...)`）だけ注意\n- **$0/月**で、本物のTradingViewチャート実装が手に入る\n- `file://`で開くとfetchが動かないので**`python -m http.server`必須**\n\nチャート自体はTradingView公式のライブラリなので、見た目もインタラクションも本家譲りです。本物を無料で使い倒しましょう🔥\n\n## 参考リンク\n\n- [tradingview/lightweight-charts (GitHub)](https://github.com/tradingview/lightweight-charts)\n- [lightweight-charts 公式ドキュメント](https://tradingview.github.io/lightweight-charts/)\n- [v5 Migration Guide](https://tradingview.github.io/lightweight-charts/docs/migrations/from-v4-to-v5)\n","tag","shareUrl","https://web-lukes.info/tag/lightweight-charts","root","routes/_public","actionData","errors"]

#lightweight-charts

📈 lightweight-chartsでPolymarket価格履歴を可視化｜TradingView Proの代替を45KBで作る