60FOLDCOMPONENTS

折线图

按大规模渲染线、阶梯、区间、点、条形和堆叠面积。

框架快速入门

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

选择命令式 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 参考中。

序列几何

类型输入预期用途
lineFloat64Array具有直线或可配置插值的连续观测。
step-before、step-after、step-midFloat64Array在区间上适用的数值。step 别名为 step-after。
range{ low, high, y? }不确定性、min/max、百分位或其它包络。band 为别名。
scatterFloat64Array独立点。points 为别名。
barFloat64Array从可配置基线渲染的数值。column 为别名。
stacked-areaFloat64Array按顺序累加为累计几何的贡献。

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,
  },
});
选项默认可接受范围含义
density0.750.25–2每个 CSS 像素的目标呈现列数。更多列可保留局部细节但代价是更多计算。
rebaseRatio1.251.05–2在粘性网格更改前允许的最大投影宽度漂移。
quantizationStep0.250.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" 从预构建的全局 min/max 层级中选择。堆叠面积始终使用此路径，因为独立减少每个输入会改变累计几何。

可见性和外观

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 控制内置图例是否可以隐藏最终可见序列。

流式传输

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

对现有的类型化列使用 addVectors。环形缓冲区在回绕后保持时间顺序的显示。

动画替换

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