股票图表 · Sixtyfold Components

框架快速入门

用六种方式渲染同一个股票图

选择命令式 TypeScript API 或轻量框架适配器。每个标签页都使用相同的类型化数据和图表选项。

chart.ts@sixtyfold/stock

import { StockChart, type TimeRange } from "@sixtyfold/stock";

const data = {
  timestamp: new Float64Array([0, 60_000, 120_000, 180_000]),
  open: new Float64Array([100, 102, 101, 104]),
  high: new Float64Array([103, 104, 105, 107]),
  low: new Float64Array([99, 100, 100, 103]),
  close: new Float64Array([102, 101, 104, 106]),
  volume: new Float64Array([420, 510, 470, 630]),
  length: 4,
};

const canvas = document.querySelector<HTMLCanvasElement>("#chart")!;
const chart = new StockChart(canvas, {
  renderMode: "auto",
  timeScale: "market",
  showVolume: true,
  priceUnit: { prefix: "$", decimals: 2 },
});

await chart.initialize();
chart.setData(data);

// The application owns the controls: choose any labels and ranges, or none.
const controls = document.querySelector("#stock-ranges")!;
for (const range of ["1D", "1M", "ALL"] as const satisfies readonly TimeRange[]) {
  const button = document.createElement("button");
  button.type = "button";
  button.textContent = range;
  button.addEventListener("click", () => chart.setTimeRange(range));
  controls.append(button);
}


window.addEventListener("pagehide", () => chart.destroy(), { once: true });

@sixtyfold/stock 呈现按顺序的开、高、低、收与成交量（OHLCV）列并附带特定市场的分析层。其细节层级（LOD）流程会在缩放时自动将多个可见蜡烛合并为有效的 OHLCV 周期，然后在放大时恢复为更细的蜡烛。

确切的配置和方法签名见生成的 Stock options、StockChart methods、和 OHLCV data types 参考。

StockChart 直接公开生命周期、视口、外观、覆盖层、渲染器和批处理方法。在市场时间模式下，其视口方法在保持压缩的观测会话坐标的同时使公开值仍为真实时间戳。

蜡烛与成交量

选择 filled、hollow 或 ohlc 蜡烛几何。candleColors 控制多头与空头实体和影线。成交量具有独立的颜色、不透明度和窗格高度比例。

渲染器边界为 OHLCV 工具提示和十字线回调显示精度提供限制。当应用需要明确的货币、单位、小数或紧凑格式时请提供 priceUnit 和 volumeUnit。

宿主拥有的时间区间

StockChart 不会创建或设置时间区间按钮的样式。宿主应用负责其控件的标签、数量、顺序、布局和无障碍——或者可以根本不渲染控件。

当按钮映射到导出的便捷预设之一时调用 setTimeRange()：1D、5D、1M、3M、6M、YTD、1Y、5Y 或 ALL。超出已加载历史的预设将被钳制到可用数据。

const controls = document.querySelector<HTMLElement>("[data-stock-ranges]")!;
const ranges = [
  ["Day", "1D"],
  ["Six months", "6M"],
  ["Everything", "ALL"],
] as const;

for (const [label, range] of ranges) {
  const button = document.createElement("button");
  button.type = "button";
  button.textContent = label;
  button.dataset.range = range;
  button.addEventListener("click", () => chart.setTimeRange(range));
  controls.append(button);
}

canvas.addEventListener("sixtyfold:time-range-change", (event) => {
  const detail = (event as CustomEvent).detail;
  for (const button of controls.querySelectorAll("button")) {
    button.setAttribute(
      "aria-pressed",
      String(button.dataset.range === detail.range),
    );
  }
});

对于非命名预设的区间，通过普通视口 API 发送真实时间戳：

const twoWeeks = 14 * 24 * 60 * 60_000;
let latestDataTimestamp = 0;

const chart = new StockChart(canvas, {
  onVisibleRangeChange({ dataBounds }) {
    latestDataTimestamp = dataBounds.xMax;
  },
});

customButton.addEventListener("click", () => {
  chart.setViewport({
    xMin: latestDataTimestamp - twoWeeks,
    xMax: latestDataTimestamp,
  });
});

在 market 时间尺度模式中，公开视口值仍为真实时间戳；图表在内部将其转换为压缩的观测会话坐标。构造函数回调提供 onTimeRangeChange、onCrosshairMove 和 onVisibleRangeChange。命名空间的 DOM 事件常量也为相同的状态更改导出。

指标

内置指标从原始蜡烛计算并在用于渲染和十字线值时按活动聚合进行采样。

chart.setIndicators([
  { type: "sma", id: "sma-20", period: 20, color: "#ffd166" },
  { type: "ema", id: "ema-50", period: 50, color: "#64d8ff" },
  { type: "bollinger", id: "bb-20", period: 20, deviation: 2 },
  { type: "vwap", id: "vwap-day", reset: "day" },
]);

纯函数可从 @sixtyfold/stock/analytics 获取：calculateSMA、calculateEMA、calculateBollingerBands、calculateVWAP 和 computeStockIndicator。非有限的源值会中断滚动窗口，而不是被静默插值。

市场图层

chart.setVolumeProfile({ rows: 48, placement: "right", valueAreaPercent: 70 });
chart.setPriceLines([
  { id: "entry", price: 182.4, label: "Entry", showAxisLabel: true },
]);
chart.setMarkers([
  { id: "earnings", timestamp, position: "above", shape: "diamond", label: "E" },
]);

成交量剖面是一个估算的按价格划分的成交量直方图，而非逐笔成交的订单流重构。它将可见价格刻度分成若干行，并将每根 OHLCV 蜡烛的成交量在该蜡烛报告的最低到最高区间内均匀分布。较宽的水平条表示某一价格附近的估算成交量更大。多头和空头部分依据蜡烛方向，控制点标记估算成交量最大的行，价值区通过相邻行扩展直到包含所配置的可见成交量百分比。

剖面遵循可见的时间和价格范围。较长的区间使用最细的已完成蜡烛聚合，以使计算保持在或低于 4,096 个源蜡烛；放大后的区间使用原始蜡烛。此举限制了交互成本，但两种路径均为基于蜡烛的近似，因为 OHLCV 数据并不报告单笔交易在每个蜡烛范围内的具体发生位置。请勿将此层描述为精确的逐价成交、足迹或订单流数据。

价格线是以数据为锚点的水平线。标记按时间戳排序并裁剪到可见范围；请使用稀疏事件而非每根蜡烛一个标记。

流式传输

chart.initStreaming(250_000);
chart.addCandle(timestamp, open, high, low, close, volume);

对于列式数据流，请使用 addCandles 或 addCandleBatches。initialTimeRange 可与作为初始转移批次的渲染器同一渲染周期应用，从而避免在预期视口出现前渲染整个范围的帧。

流式聚合层次在屏幕外重建并以原子方式替换活动层次。在替换就绪之前，先前的层次保持可见。

加载 CSV

loadOHLCVFromCSV 为直接在浏览器处理的数据集提供支持，并可选地带有进度回调。对于非常大的 Parquet 或专有数据源，请在 UI 线程外解码并直接传输六列已验证的类型化列。