60FOLDCOMPONENTS

实时示例组

文档示例如何将选项映射到可观察的行为。

每个文档示例将一个交互式图表与同步的只读可复制的 TypeScript 配对。示例使用经过策划的数据集，以便文档在移动设备上保持响应；工程工作台演示最大的数据量。

细节层级（LOD）校准

下面的交互组在保持其策划数据集稳定的同时，为自适应细节层级策略公开 density、rebaseRatio 和 quantizationStep。预览通过 setLODOptions 更新；其相邻的 TypeScript 为只读、已同步且可复制。

运行时外观

这些示例会采用本网站当前选择的主题。稳定的 default API ID 选择 Midnight。请参阅主题，了解当前的浅色和深色预设以及选择器配置。有关准确的选项和成员，请查看 Line API 和 Stock API；折线图、股票图、渲染、流式处理和 SSR 指南提供按任务组织的示例。

示例生命周期契约

当路由或语言环境更改时，预览会销毁其图表。它使用经过策划的主线程数据集，因此在移动设备上仍然响应；匿名工程工作台是进行数百万点 Worker 演示的场所。

交互式参考

细节层级（LOD）

0.75
1.12
0.10

使用左右方向键平移，使用加号和减号缩放，使用 Home 键重置。

正在准备图表…
import { LineChart } from "@sixtyfold/line";
import { getThemePreset } from "@sixtyfold/themes";

const preset = getThemePreset("default");
const chart = new LineChart(canvas, {
  ...preset.line.appearance,
  renderMode: "main",
  lod: {
    mode: "adaptive",
    density: 0.75,
    rebaseRatio: 1.12,
    quantizationStep: 0.10,
  },
});

await chart.initialize();
chart.setMultiSeriesData(data);
chart.updateAppearance(preset.line.appearance);
preset.line.series.forEach((series, index) => {
  chart.updateSeriesAppearance(index, series);
});