简介
该 React 组件封装 TradingView Charting Library，并一次性加入 iC Candle 的 形态扫描器、结果 iframe、形态追踪 与 新闻/事件 集成。
以 ESM 与 CommonJS 发布；组件样式在运行时打包并注入（无需单独导入 CSS）。
| 界面 | 作用 |
|---|---|
| 扫描器弹窗 | 覆盖在图表上的可拖动浮层。用 TradingView 的 Date Range 工具选择 K 线窗口，然后执行扫描或订阅形态提醒。 |
| 结果 iframe | 并排面板，托管 iC Candle 嵌入应用（embed-iccandle-app.iccandle.ai）— 搜索结果、相似事件、登录与计费。 |
| 图表同步 | 双向 postMessage 桥接：形态选择、图表回放、新闻标记、登录令牌、加载状态。 |
安装
npm install @iccandle/reactjs-widget
# 或
pnpm add @iccandle/reactjs-widget
前提条件
| 要求 | 说明 |
|---|---|
| React 18+ | react 与 react-dom 为 peer 依赖 — 请在应用中安装。 |
| TradingView Charting Library | 在自有许可证下从 TradingView 获取，托管静态资源（例如 public 下的 /charting_library/），并自行初始化图表。本包不包含图表库。 |
| 认证令牌 | API 调用（K 线缓存、形态追踪）使用 localStorage 键 iccandle_token 的 Bearer 认证。嵌入式结果应用在登录后通过 sign-in-success postMessage 写入该令牌。 |
快速开始
import { useEffect, useRef, useState } from "react";
import type {
ChartingLibraryWidgetOptions,
IChartingLibraryWidget,
ResolutionString,
} from "charting_library/charting_library";
import { widget } from "charting_library/charting_library";
import {
WidgetIccandle,
withPlayChart,
getCustomIndicators,
} from "@iccandle/reactjs-widget";
const LIBRARY_PATH = "/charting_library/";
function App() {
const containerRef = useRef<HTMLDivElement>(null);
const [chartWidget, setChartWidget] = useState<IChartingLibraryWidget | null>(
null,
);
return (
<div style={{ height: "100vh", width: "100%" }}>
<WidgetIccandle chartWidget={chartWidget} theme="light" language="zh">
{(chartRefs) => (
<ChartHost
containerRef={containerRef}
chartRefs={chartRefs}
onReady={setChartWidget}
/>
)}
</WidgetIccandle>
</div>
);
}
function ChartHost({
containerRef,
chartRefs,
onReady,
}: {
containerRef: React.RefObject<HTMLDivElement | null>;
chartRefs: import("@iccandle/reactjs-widget").WidgetIccandleChartRefs;
onReady: (w: IChartingLibraryWidget | null) => void;
}) {
useEffect(() => {
const el = containerRef.current;
if (!el) return;
const options: ChartingLibraryWidgetOptions = {
container: el,
library_path: LIBRARY_PATH,
symbol: "EURUSD",
interval: "60" as ResolutionString,
datafeed: withPlayChart(yourDatafeed), // 启用图表回放注入
locale: "zh",
autosize: true,
drawings_access: {
type: "black",
tools: [{ name: "Date Range" }],
},
custom_indicators_getter: () => getCustomIndicators("light"),
};
const tv = new widget(options);
onReady(tv);
return () => {
try {
tv.remove();
} catch {
/* no-op */
}
onReady(null);
};
}, [containerRef, chartRefs, onReady]);
return <div ref={containerRef} style={{ height: "100%", width: "100%" }} />;
}
需要 chartRefs（用于生成 K 线指标 / 回放）时，请使用 render prop 形式的 children。若不需要这些 refs，也可直接传入普通 React 节点。
典型流程
- 用户在图表上绘制 Date Range（或激活扫描器）。
- 扫描器缓存所选 K 线，并用搜索参数打开结果 iframe。
- 嵌入应用返回匹配结果；选择形态后会在图表上重绘区间。回放 / 新闻流程通过自定义指标注入预测 K 线。