isocline-plot

等斜线结果的可观察图可视化层。每个海图族 有两种形式：

• *Marks(series, result, opts?) → { marks: Plot.Markish[], plotOptions }
  • 可组合标记加上部分情节选项，用于构建自己的 Plot.plot({...plotOptions, marks})。
• *Plot(...) →渲染 HTMLElement (一个 Plot.plot 图与 应用了isocline主题)，准备追加到DOM。

这个包只有一个对等依赖， @observablehq/plot ^0.6, 运行时不依赖于 isocline -它只导入结果类型， 因此，它会呈现任何与契约形状匹配的对象（包括模拟数据）。 当 series.t （epoch-millis）存在，x轴是时间轴；否则 索引被使用和标记 "index"。

安装

npm install isocline-plot @observablehq/plot

快速启动

import * as PP from "isocline-plot";
import { loadIsocline, genSeries } from "isocline";

const iso = await loadIsocline();
const { y, t } = genSeries({ n: 720, period: 24 });
const fc = iso.forecast({ y, t }, { horizon: 48 });

document.body.appendChild(PP.forecastPlot({ y, t }, fc, {
  showBand: true,        // PI band (default true)
  showComponents: false, // projected trend/seasonal lines when present
  paths: false,          // spaghetti of bootstrap sample paths
  height: 320,
  yLabel: "value",
}));

图表的家庭

预测- - - - - - forecastPlot / forecastMarks

历史（青色），点预测（紫色虚线），PI波段（紫色，15%） 不透明度)，分割点的规则，终点点；可选的预计 趋势/季节成分线和多达60个绘制的bootstrap样本路径。

PP.forecastPlot(series, forecast, {
  paths: true,          // default false
  showComponents: true, // default false
  showBand: true,       // default true
  height: 320,          // default 320
  width: 800,           // optional (fluid when omitted)
  xLabel: "time",       // default "time"/"index" by input kind
  yLabel: "value",      // default "value"
  title: "48h forecast",
});

异常- - - - - - anomalyPlot / anomalyMarks

系列线加上标记点：尖峰为红色上三角形，低谷为蓝色 下三角形，琥珀色虚线期望线，以及带有索引的工具提示， 观察、预期和评分。

PP.anomalyPlot(series, anomalyResult, {
  showExpected: true, // default true
  height: 320,
  yLabel: "value",
});
PP.anomalySplit(anomalyResult); // { spikes: number, dips: number } for legends

分解, decomposePlot

每行三个垂直堆叠的行（趋势，季节，剩余） 独立尺度；季节性行标题包括 seasonalStrength。

PP.decomposePlot(series, decomposeResult, {
  height: 150, // per row, default 150
  width: 800,
  xLabel: "time", // label on the bottom row only
});

季节性- seasonalityPlot

ACF（95%置信区间的棒棒糖）和周期图（功率vs周期） Log x)并排，最佳时期在两个面板上突出显示。

PP.seasonalityPlot(seasonalityResult, { height: 260, width: 400 }); // width is per panel
PP.seasonalityCandidates(seasonalityResult); // candidate chips data

Changepoints - changepointPlot / changepointMarks

分段表示的串联线、琥珀阶线，各有垂直虚线 更改点，并显示工具提示 #index, μ before → after。

PP.changepointPlot(series, changepointResult, { height: 320, yLabel: "value" });

val - backtestPlot + backtestWinner

A模型×度量热图(Plot.cell)超过rmse / mae / smape / coverage； 等级-颜色（紫色→青色，最好的模型在最上面一行），在 每一个细胞。

const el = PP.backtestPlot(backtestResult, { height: 220 });
document.body.appendChild(el);
PP.backtestWinner(backtestResult); // model name with lowest RMSE, e.g. "stl_ets"

成分

这个 *Marks 形式返回 { marks, plotOptions }。 plotOptions 开始 从 isoclineTheme （边距，单色字体，静音刻度颜色，网格默认值） 并包括轴尺度；先把它展开，然后覆盖所有内容：

import * as Plot from "@observablehq/plot";
import * as PP from "isocline-plot";

const { marks, plotOptions } = PP.forecastMarks(series, fc, { yLabel: "kW" });
const fig = Plot.plot({
  ...plotOptions,       // theme + axes
  y: { ...plotOptions.y, domain: [0, 100] }, // your overrides
  marks,
});
document.body.appendChild(fig);

主题和格式

• isoclineTheme ——共享 Partial<Plot.PlotOptions>: dark-transparent 背景（页面提供面板），静音刻度，y轴上的网格， 单色字体10.5px。
• C -颜色标记： cyan #22d3ee， violet #a78bfa， amber #fbbf24， red #f87171， blue #60a5fa， green #34d399， ink #e6edf3， muted #8b98a9， grid rgba(255,255,255,.07)，加面板 颜色。
• fmt(x) -在所有图中使用的3位有效数字格式化程序 （"1.23"， "12.3"， "1,234"，指数外 [1e-3, 1e6)）.
• MONO -单色字体堆栈； applyIsoclineCss() 幂等注入 的小样式表（网格/轴颜色） *Plot 表格找你。
• plot(spec) -呈现的薄包装器 Plot.plot(spec) 与 isocline-plot 类。

设计说明中

decomposePlot 和 seasonalityPlot 渲染 多个独立的地块 一个容器 而不是单一的情节。这是故意的： 绘图面跨行共享刻度，这将粉碎接近零的值 残差行相对较大的趋势范围。独立的每行y尺度（和） ACF/周期图面板的独立x刻度)保留每个组件 可读。折衷之处是行是单独的svg，并且稍微 流体布局上的不同像素宽度。

两个函数都是 *Plot只有(不 *Marks 形式)，因为他们的多情节 结构不能表示为单个标记列表。