图表画廊 / 全部示例都在本页

两个库。一套渲染准则。

先浏览完整索引，再按发布的软件包聚焦画廊。图表与语法高亮仅在接近视口时启用；大规模合成负载会等待用户明确启动。

索引 / 所有示例一览

无需启动图表，先了解全部内容。

标题、负载和渲染类别都显示在紧凑目录中。可直接打开示例，或仅显示一个库。

@sixtyfold/line

Sixtyfold Line Charts

@sixtyfold/stock

Sixtyfold Stock Charts

@sixtyfold/line

Sixtyfold Line Charts

11实时示例

面向时间序列的线、阶梯、范围、正负柱形、堆叠面积、流式向量，以及数百万点保极值 LOD。

L01DATA@sixtyfold/line

一百万分钟馈线电流

忠于来源的两年电力档案从4,196点首帧逐步加载到四路电流以及所有明确缺口。

图表接近视口时初始化

1,052,640一分钟数据行

来源: FeederBW feeder_001
许可: CC BY 4.0

step linesParquetstaged hydrationgaps

来源记录许可文本

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createFeederCurrentData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const feederCurrent = createFeederCurrentData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "一百万分钟馈线电流" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "zh-CN",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "zh-CN",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "L1 视在电流", type: "step-after", unit: { suffix: " A" } },
    { name: "L2 视在电流", type: "step-after", unit: { suffix: " A" } },
    { name: "L3 视在电流", type: "step-after", unit: { suffix: " A" } },
    { name: "L/PEN 视在电流", type: "step-after", unit: { suffix: " A" } },
  ],
  minViewportRange: 30 * 60_000,
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(feederCurrent);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L02DATA@sixtyfold/line

覆盖200个地点的天气包络

将官方逐小时数据呈现为来源派生的最小–最大区间、网络算术平均值和选定馈线的温度。

图表接近视口时初始化

3,508,800源观测值

来源: FeederBW ICON-D2 weather
许可: CC BY 4.0

range bandmean200 locationshourly UTC

来源记录许可文本

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createWeatherData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const weather = createWeatherData();
const options = {
  renderMode: "auto",
  animated: true,
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "覆盖200个地点的天气包络" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "zh-CN",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "zh-CN",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "200个位置最小–最大值", type: "range", width: 0,
      band: { fill: 0.18, borderWidth: 0 } },
    { name: "200个位置平均值", type: "line" },
    { name: "馈线001气温", type: "line", width: 2 },
  ],
  lod: { mode: "adaptive", density: 0.25 },
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(weather);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L03SCALE@sixtyfold/line

两千万个混合序列值

六个浏览器生成的信号把线、两种阶梯对齐、区间、柱形和价格水平组合在一个由Worker驱动的Canvas2D视图中。

图表接近视口时初始化

20,000,000桌面端数值

来源: Deterministic in-browser generator
许可: Synthetic

≈3.33M × 6workermixed seriesadaptive LOD

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createGeneratedSignalsData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const generatedSignals = createGeneratedSignalsData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "两千万个混合序列值" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "zh-CN",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "zh-CN",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "信号A（核心）", type: "line" },
    { name: "信号B（柱形）", type: "bar" },
    { name: "信号C（阶梯）", type: "step-after" },
    { name: "信号D（范围带）", type: "range" },
    { name: "信号E（居中阶梯）", type: "step-mid" },
    { name: "信号F（价格）", type: "line" },
  ],
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(generatedSignals);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L04SCALE@sixtyfold/line

AI数据中心的六百万个遥测值

一条包含150万个时间点的合成故障轨迹，在同一运行时间轴上跟踪计算利用率、HBM压力、散热余量和限频率。

图表接近视口时初始化

6,000,000桌面端遥测值

来源: Deterministic synthetic AI accelerator telemetry
许可: Synthetic

1.5M × 4accelerator fleetincident analysisadaptive LOD

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createAcceleratorTelemetryData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const acceleratorTelemetry = createAcceleratorTelemetryData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "AI数据中心的六百万个遥测值" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "zh-CN",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "zh-CN",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "计算利用率", type: "line", width: 2,
      unit: { suffix: " %" } },
    { name: "HBM压力", type: "line", width: 1.6,
      unit: { suffix: " %" } },
    { name: "散热余量", type: "line", width: 1.4,
      unit: { suffix: " %" } },
    { name: "限频率", type: "step-after", width: 1.2,
      unit: { suffix: " %" } },
  ],
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(acceleratorTelemetry);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L05SCALE@sixtyfold/line

Transformer推理流水线中的八百万个值

两百万个合成五毫秒区间将服务延迟拆分为排队、预填充、KV缓存传输和令牌解码，使不断扩大的瓶颈从集群尺度到单个请求都清晰可见。

图表接近视口时初始化

8,000,000桌面端延迟值

来源: Deterministic synthetic transformer-serving trace
许可: Synthetic

2M × 4inference latencystacked pipelineworker rendering

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createTransformerInferenceData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const transformerInference = createTransformerInferenceData();
const options = {
  renderMode: "auto",
  animated: true,
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "Transformer推理流水线中的八百万个值" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "zh-CN",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "zh-CN",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "排队", type: "stacked-area",
      stack: { fill: 0.68 }, unit: { suffix: " ms", decimals: 1 } },
    { name: "预填充", type: "stacked-area",
      stack: { fill: 0.64 }, unit: { suffix: " ms", decimals: 1 } },
    { name: "KV缓存传输", type: "stacked-area",
      stack: { fill: 0.6 }, unit: { suffix: " ms", decimals: 1 } },
    { name: "令牌解码", type: "stacked-area",
      stack: { fill: 0.56 }, unit: { suffix: " ms", decimals: 1 } },
  ],
  lod: { mode: "pyramid", density: 0.75 },
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(transformerInference);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L06SCALE@sixtyfold/line

神经电极阵列的一千万个样本

八个30 kHz合成非临床通道在每个通道125万个时间点中保留成簇活动和双相尖峰；各轨迹纵向错开以便比较。

图表接近视口时初始化

10,000,000桌面端电极值

来源: Deterministic synthetic non-clinical neural-array recording
许可: Synthetic

1.25M × 830 kHz arraybiphasic spikesinteractive legend

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createNeuralArrayData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const neuralArray = createNeuralArrayData();
const options = {
  renderMode: "auto",
  animated: true,
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "神经电极阵列的一千万个样本" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "zh-CN",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "zh-CN",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "电极 1", type: "line", width: 1.5,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "电极 2", type: "line", width: 1.5,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "电极 3", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "电极 4", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "电极 5", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "电极 6", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "电极 7", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "电极 8", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
  ],
  lod: { mode: "adaptive", density: 1 },
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(neuralArray);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L07DRAW@sixtyfold/line

同一时间轴上的多条线

三个不同尺度的信号演示共享时间坐标、样条插值、交互式图例、十字线和提示框。

图表接近视口时初始化

120,000每个序列的样本

来源: Deterministic waveform fixture
许可: Synthetic

multi-linesplinetooltipslegend

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createWaveformsData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const waveforms = createWaveformsData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "同一时间轴上的多条线" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "zh-CN",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "zh-CN",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "主序列", type: "line", width: 1.8 },
    { name: "次序列", type: "line", width: 1.4 },
    { name: "参考", type: "line", width: 1 },
  ],
  interpolation: "spline",
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(waveforms);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L08DRAW@sixtyfold/line

双向残差与控制限

五万个带符号残差从零基线延伸，阶梯式上下限在同一时间轴上变化。

图表接近视口时初始化

50,000有符号残差

来源: Deterministic process-control fixture
许可: Synthetic

signed columnszero baselinecontrol limitsstep-mid

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createResidualsData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const residuals = createResidualsData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "双向残差与控制限" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "zh-CN",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "zh-CN",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "残差", type: "bar",
      bar: { baseline: 0, widthRatio: 0.82 } },
    { name: "上限", type: "step-mid", width: 1.4 },
    { name: "下限", type: "step-mid", width: 1.4 },
  ],
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(residuals);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L09DRAW@sixtyfold/line

四层累积堆叠面积

四个正值序列使用累积几何与共享金字塔，因此缩减不会改变堆叠组成。

图表接近视口时初始化

36,000每层样本

来源: Deterministic stacked-series fixture
许可: Synthetic

stacked areafour layerspyramid LODcumulative

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createStackedValuesData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const stackedValues = createStackedValuesData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "四层累积堆叠面积" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "zh-CN",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "zh-CN",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "层 A", type: "stacked-area", stack: { fill: 0.72 } },
    { name: "层 B", type: "stacked-area", stack: { fill: 0.66 } },
    { name: "层 C", type: "stacked-area", stack: { fill: 0.6 } },
    { name: "层 D", type: "stacked-area", stack: { fill: 0.54 } },
  ],
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(stackedValues);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L10DRAW@sixtyfold/line

分层与发光面积填充

两个线序列比较分层与发光填充，同时保留线条作为权威值。

图表接近视口时初始化

64,000每个序列的样本

来源: Deterministic area-fill fixture
许可: Synthetic

area fillgradientglowfill-to-zero

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createFilledSeriesData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const filledSeries = createFilledSeriesData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "分层与发光面积填充" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "zh-CN",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "zh-CN",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "分层填充", type: "line", width: 2,
      fill: 0.3, fillEffect: "layered", fillToZero: true },
    { name: "发光填充", type: "line", width: 1.2,
      fill: 0.16, fillEffect: "glow" },
  ],
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(filledSeries);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L11DRAW@sixtyfold/line

八序列交互式图例

语义化图例可以隐藏和恢复单条轨迹，无需复制或重塑已传输的数据集。

图表接近视口时初始化

8独立序列

来源: Deterministic multi-series fixture
许可: Synthetic

interactive legendvisibility APIeight seriescallbacks

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createEightSeriesData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const eightSeries = createEightSeriesData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  rangeSelector: { visible: true },

  labels: { top: { text: "八序列交互式图例" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "zh-CN",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "zh-CN",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: Array.from({ length: 8 }, (_, index) => ({
    name: ["序列 1","序列 2","序列 3","序列 4","序列 5","序列 6","序列 7","序列 8"][index],
    type: "line",
    width: index < 3 ? 1.8 : 1,
  })),
  legend: {
    visible: true,
    interactive: true,
    allowHideAll: false,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(eightSeries);
chart.setSeriesVisibilityCallback(({ visibility }) => {
  console.log("Visible series", visibility);
});

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

@sixtyfold/stock

Sixtyfold Stock Charts

05实时示例

专用 OHLCV 渲染，包含市场时间、成交量、原始蜡烛指标、可视范围分布、价格线与事件标记。

S01MARKET@sixtyfold/stock

精确BTC/USDT：从档案到实时

这项需明确启动的桌面负载会下载锁定的Binance一分钟K线Parquet档案，在主线程之外解码全部实测K线，再通过Sixtyfold共享的同源中继补齐数据，并轮询每个新收盘分钟。历史分钟数据不会被合成。

图表接近视口时初始化

2017 → live精确实测历史

来源: Exact Binance Spot monthly archive plus Sixtyfold live relay
使用依据: Binance developer API-use guidance

measured Parquet downloadobserved 1m candlesexact catch-upminute-boundary polling

来源记录 API 使用指南

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { StockChart } from "@sixtyfold/stock";

import {
  exactArchiveEnd,
  loadExactBtcArchive,
  prepareBinanceLiveFeed,
} from "./same-origin-market-relay";

const canvas = document.querySelector("canvas")!;

const options = {
  renderMode: "auto",
  animated: true,
  timeScale: "continuous",
  showVolume: true,
  labels: {
    top: { text: "精确BTC/USDT：从档案到实时" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "zh-CN",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "zh-CN",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "开盘",
    "high": "最高",
    "low": "最低",
    "close": "收盘",
    "change": "变化",
    "changePercent": "变化率",
    "volume": "成交量"
  },
  },
};

const chart = new StockChart(canvas, options);
await chart.initialize();

const feed = prepareBinanceLiveFeed({
  symbol: "BTCUSDT",
  afterTimestamp: exactArchiveEnd,
  relayMode: "archive-tail",
  streamEnabled: false,
  onCandles: ({ timestamp, open, high, low, close, volume }) =>
    chart.addCandles(timestamp, open, high, low, close, volume),
});
void Promise.all([
  loadExactBtcArchive(),
  feed.ready,
]).then(([archive, bootstrap]) => {
  chart.initStreaming(5_800_000);
  chart.addCandleBatches(
    [archive, bootstrap.columns],
    { initialTimeRange: "6M" },
  );
  feed.start();
});
window.addEventListener("pagehide", () => feed.close(), { once: true });

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

S02MARKET@sixtyfold/stock

带成交量的实心OHLCV

有序K线与独立成交量面板按有效OHLCV周期聚合，而不是使用折线图分桶。

图表接近视口时初始化

18,000生成的K线

来源: Deterministic OHLCV fixture
许可: Synthetic

filled candlesvolumeOHLCV LODhost-owned ranges

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { StockChart } from "@sixtyfold/stock";
import { createOhlcvData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const ohlcv = createOhlcvData();
const options = {
  renderMode: "auto",
  animated: true,
  timeScale: "market",
  showVolume: true,
  labels: {
    top: { text: "带成交量的实心OHLCV" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "zh-CN",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "zh-CN",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "开盘",
    "high": "最高",
    "low": "最低",
    "close": "收盘",
    "change": "变化",
    "changePercent": "变化率",
    "volume": "成交量"
  },
  },
  candleStyle: "filled",
};

const chart = new StockChart(canvas, options);
await chart.initialize();
chart.setData(ohlcv);
chart.setTimeRange("5D");

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

S03MARKET@sixtyfold/stock

基于原始K线的技术指标

SMA、EMA、布林带和每日重置VWAP先从原始K线计算，再按当前聚合级别采样。

图表接近视口时初始化

4指标类别

来源: Deterministic OHLCV fixture
许可: Synthetic

SMAEMABollingerVWAP

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { StockChart } from "@sixtyfold/stock";
import { createOhlcvData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const ohlcv = createOhlcvData();
const options = {
  renderMode: "auto",
  animated: true,
  timeScale: "market",
  showVolume: true,
  labels: {
    top: { text: "基于原始K线的技术指标" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "zh-CN",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "zh-CN",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "开盘",
    "high": "最高",
    "low": "最低",
    "close": "收盘",
    "change": "变化",
    "changePercent": "变化率",
    "volume": "成交量"
  },
  },
};

const chart = new StockChart(canvas, options);
await chart.initialize();
chart.setData(ohlcv);
chart.setIndicators([
  { type: "sma", id: "sma-20", label: "SMA 20", period: 20 },
  { type: "ema", id: "ema-50", label: "EMA 50", period: 50 },
  { type: "bollinger", id: "bb-20", label: "BB 20", period: 20, deviation: 2 },
  { type: "vwap", id: "vwap-day", label: "VWAP", reset: "day" },
]);
chart.setTimeRange("5D");

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

S04MARKET@sixtyfold/stock

可见区间估算成交量分布

由K线估算的价量分布会把OHLCV成交量分配到每根K线的最低–最高区间。它跟随可见范围，并通过限制来源聚合保护长区间性能；它不是逐价精确成交数据。

图表接近视口时初始化

48价格行

来源: Deterministic OHLCV fixture
许可: Synthetic

estimated volume profilevalue areavisible rangeOHLCV

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { StockChart } from "@sixtyfold/stock";
import { createOhlcvData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const ohlcv = createOhlcvData();
const options = {
  renderMode: "auto",
  animated: true,
  timeScale: "market",
  showVolume: true,
  labels: {
    top: { text: "可见区间估算成交量分布" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "zh-CN",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "zh-CN",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "开盘",
    "high": "最高",
    "low": "最低",
    "close": "收盘",
    "change": "变化",
    "changePercent": "变化率",
    "volume": "成交量"
  },
  },
};

const chart = new StockChart(canvas, options);
await chart.initialize();
chart.setData(ohlcv);
chart.setVolumeProfile({
  rows: 48,
  placement: "right",
  valueAreaPercent: 70,
});
chart.setTimeRange("5D");

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

S05MARKET@sixtyfold/stock

价格线与时间戳标记

锚定数据的价位和按时间戳排序的标记会保持裁剪、主题化，并与市场时间导航同步。

图表接近视口时初始化

O(n)标记筛选

来源: Deterministic OHLCV fixture
许可: Synthetic

price linesevent markersmarket timebinary culling

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { StockChart } from "@sixtyfold/stock";
import { createOhlcvData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const ohlcv = createOhlcvData();
const options = {
  renderMode: "auto",
  animated: true,
  timeScale: "market",
  showVolume: true,
  labels: {
    top: { text: "价格线与时间戳标记" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "zh-CN",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "zh-CN",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "开盘",
    "high": "最高",
    "low": "最低",
    "close": "收盘",
    "change": "变化",
    "changePercent": "变化率",
    "volume": "成交量"
  },
  },
};

const chart = new StockChart(canvas, options);
await chart.initialize();
chart.setData(ohlcv);
chart.setPriceLines([
  { id: "entry", price: 182.4, label: "入场", showAxisLabel: true },
  { id: "risk", price: 174.8, label: "风险", showAxisLabel: true },
]);
chart.setMarkers([
  { id: "release", timestamp: ohlcv.timestamp[Math.floor(ohlcv.length * 0.72)],
    position: "above",
    shape: "diamond", label: "发" },
]);
chart.setTimeRange("5D");

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

下一步 / 使用同一 API 构建

每个示例都使用公开接口。

没有私有渲染钩子、截图替代品或框架特有的数据重塑。接下来可阅读完整选项与集成参考。

打开文档