折线图 · Sixtyfold Components

框架快速入门

用六种方式渲染同一个折线图

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

chart.ts@sixtyfold/line

import { LineChart } from "@sixtyfold/line";

const data = {
  x: new Float64Array([0, 1, 2, 3]),
  y: new Float64Array([3, 7, 4, 9]),
  length: 4,
};

const canvas = document.querySelector<HTMLCanvasElement>("#chart")!;
const chart = new LineChart(canvas, {
  renderMode: "auto",
  axis: { bottom: { format: "time" } },
  series: [{ name: "Signal", color: "#4ecca3" }],
});

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


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

@sixtyfold/line在一个有序的 X 列上呈现多条序列。各序列可独立使用线、阶梯、区间、散点、条或堆叠面积几何，同时共享坐标轴、交互和提示信息。

确切的配置与方法签名位于生成的 Line options、LineChart methods 与 line data types 参考。

序列几何

类型	输入	预期用途
`line`	`Float64Array`	具有直线或已配置插值的连续观测。
`step-before`、`step-after`、`step-mid`	`Float64Array`	适用于时间区间的值。 `step` 别名 `step-after`。
`range`	`{ low, high, y? }`	不确定性、最小/最大值、分位数或其他包络。`band` 是别名。
`scatter`	`Float64Array`	独立点。`points` 是别名。
`bar`	`Float64Array`	从可配置基线呈现的数值。`column` 是别名。
`stacked-area`	`Float64Array`	按顺序累加为累计几何形状的贡献。

SeriesOptions 包含通用的名称、颜色、宽度、单位、填充和标记字段。几何特定选项位于 band、point、bar 和 stack，以免不相关的设置产生歧义。

范围数据

chart.setMultiSeriesData({
  x,
  series: [
    { low: temperatureMin, high: temperatureMax },
    temperatureMean,
  ],
  length: x.length,
  seriesCount: 2,
});

当真实聚合不是 (low + high) / 2 时，请使用显式的均值序列。若仅需包络线传达意图信息，可通过将序列宽度设为零来抑制范围中心描边，并使用 band.borderWidth: 0 禁用边界。

细节层级（LOD）

LOD 指 细节层级。它允许图表为远大于屏幕的数据集绘制屏幕尺寸的表示，然后在缩放时显示更细的细节。默认的 adaptive 策略保留有序端点、极值和真实的 NaN 间隙。大多数应用应保持默认值。

自适应网格在动画和不相关的重绘期间保持稳定。只有在持续缩放超出当前细节层级足够远时才会改变。

const chart = new LineChart(canvas, {
  lod: {
    mode: "adaptive",
    density: 0.75,
    rebaseRatio: 1.25,
    quantizationStep: 0.25,
  },
});

选项	默认	可接受范围	含义
`density`	`0.75`	`0.25–2`	每个 CSS 像素的目标显示列数。更多列保留本地细节但需要更多工作量。
`rebaseRatio`	`1.25`	`1.05–2`	粘性网格发生变化前允许的最大投影宽度漂移。
`quantizationStep`	`0.25`	`0.05–1`	每个二进制倍音阶内的可用间隔。更小的步长使表示变化更为细腻。

将 rebaseRatio 与 quantizationStep 一起调优。为更平滑的变化，从接近 1 + quantizationStep 的值开始，例如使用 1.10–1.12 配合 0.10。对视觉敏感的多遍范围带可考虑 0.05 与 1.06–1.08；请在目标浏览器和设备像素比上评估其开销。

在不重建图表或其层级结构的情况下修补策略：

chart.setLODOptions({ density: 0.75, rebaseRatio: 1.12, quantizationStep: 0.1 });

mode: "pyramid" 在预构建的全局最小/最大级别之间进行选择。堆叠面积图始终采用此路径，因为独立地减少每个输入会改变累计几何形状。

可见性与外观

chart.setSeriesVisible(2, false);
chart.setVisibleSeries([0, 1]);
chart.updateSeriesAppearance(0, { color: "#ffe47a", width: 2 });

chart.setSeriesVisibilityCallback((event) => {
  console.log(event.source, event.visibility);
});

可见性回调用于识别源自初始化、API 或交互式图例的更改。legend.allowHideAll 控制内置图例是否可以隐藏最终可见的序列。

流式传输

在 initialize() 之后，创建一个具有正整数维度的固定容量流：

chart.initStreaming(2, 1_000_000);
chart.addVector(timestamp, [phaseL1, phaseL2]);

addVector 要求提供有限时间戳和每个配置序列对应的一个值。它在入队前复制标量值，因此调用者可以立即重用该数组。请保持时间戳递增；对于缺失的 Y 值应使用 NaN，而不是用于时间戳。

对于已存在的 Float64Array 列，请使用 addVectors(timestamps, valuesBySeries)。每个配置的序列需提供一列，且列长度应与时间戳匹配，时间戳须为有限值。验证在已入队的标量样本被刷新或缓冲区被转移之前完成。因此验证失败将保持队列不变且调用者缓冲区仍被附着。

有效的标量追加和批量追加会保留其调用顺序。环形缓冲在回绕后仍保持按时间顺序展示，并且在追加继续进行时可完成细节层级（LOD）构建。再次调用 initStreaming 会丢弃来自旧流的已入队样本。重置流或替换数据也会取消旧数据集的挂起视口动画。

动画替换

setData 和 setMultiSeriesData 在启用动画时从左到右显示新的序列。preservePreviousFrame: true 在新的显示边界之前保留先前的绘图。仅在前一次显示完成后使用它，并在用完整数据集替换预览时立即恢复视口。