# isocline-plot 中文文档

规范地址：https://npmcn.com/package/isocline-plot/

版本：0\.1\.0
npm 元数据更新时间：2026-11-03T19:44:23.529Z
中文译文更新时间：2026-11-04T01:08:57.852Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/isocline-plot
原文对照：https://npmcn.com/package/isocline-plot/?lang=original
项目主页：https://github.com/DanielMcSheehy/isocline#readme
源码仓库：https://github.com/DanielMcSheehy/isocline

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：52.5 kB，24 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：isocline ^0\.1\.0，@observablehq/plot ^0\.6\.17
- 首次发布：2026-11-03T19:41:45.683Z
- 最新版本发布：2026-11-03T19:44:23.394Z
- 已发布版本数：2（近 12 个月 2 个）

## 中文简介

等斜线结果的可观察图可视化层

## 安装

```sh
npm install isocline-plot
```

也可以使用：`pnpm add isocline-plot`、`yarn add isocline-plot`、`bun add isocline-plot`

## README

# 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"`。

## 安装

```sh
npm install isocline-plot @observablehq/plot
```

## 快速启动

```ts
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样本路径。

```ts
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",
});
```

| 选项 | 类型 | 默认的 | 描述 |
| --- | --- | --- | --- |
| `paths` | `boolean` | `false` | 绘制引导样例路径（意大利面条） |
| `showComponents` | `boolean` | `false` | 绘制预测趋势（琥珀色虚线）和季节性（绿色），当结果有它们时 |
| `showBand` | `boolean` | `true` | 绘制预测区间带 |
| `height` | `number` | `320` | 图高（px） |
| `width` | `number` | \- | 地块宽度（省略时为浮动） |
| `xLabel` | `string` | `"time"` / `"index"` | X轴标号 |
| `yLabel` | `string` | `"value"` | Y轴标号 |
| `title` | `string` | \- | 图说明(`<title>` 在SVG上) |

### 异常- - - - - - `anomalyPlot` / `anomalyMarks`

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

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

| 选项 | 类型 | 默认的 | 描述 |
| --- | --- | --- | --- |
| `showExpected` | `boolean` | `true` | 绘制期望值线 |
| `height` / `width` / `xLabel` / `yLabel` | `number` / `string` | 作为预测 | 布局和轴标签 |

### 分解, `decomposePlot`

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

```ts
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)并排，最佳时期在两个面板上突出显示。

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

### Changepoints - `changepointPlot` / `changepointMarks`

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

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

### val - `backtestPlot` + `backtestWinner`

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

```ts
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` （边距，单色字体，静音刻度颜色，网格默认值） 并包括轴尺度；先把它展开，然后覆盖所有内容：

```ts
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` 形式)，因为他们的多情节 结构不能表示为单个标记列表。

## 常见问题

### isocline-plot 是什么？

等斜线结果的可观察图可视化层

### 如何安装 isocline-plot？

在项目目录运行 npm install isocline-plot，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：isocline（^0\.1\.0）、@observablehq/plot（^0\.6\.17）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### isocline-plot 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### isocline-plot 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### isocline-plot 可以商用吗？

isocline-plot 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### isocline-plot 还在维护吗？

最新版本 0\.1\.0 发布于 2026/11/04（1 天前）；至今共发布 2 个版本，其中过去 12 个月发布了 2 个；首次发布于 2026/11/04。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。