API Biểu đồ hình quạt

Vẽ dự báo và độ bất định của nó trong cùng một biểu đồ: dữ liệu lịch sử, một đường trung vị nét đứt, và các dải tin cậy (confidence band) mở rộng dần theo thời gian dự báo - xem demo Biểu đồ hình quạt.

Nhập

Web ComponentVanilla JSInsights helper

import "@michi-vz/wc/fan-chart";
// <michi-vz-fan-chart> is now defined

import { mountFanChart } from "@michi-vz/core";

const chart = mountFanChart(el, props);

import { forecastFan } from "@michi-vz/insights/forecast";

const item = forecastFan(history, { horizon: 4, levels: [0.5, 0.8], level: 0.95 }, "Revenue");
const chart = mountFanChart(el, { dataSet: [item], xAxisDataType: "date_annual" });

Thuộc tính

Prop	Type	Default	Description
`timeline`	`boolean \| TimelinePeriodConfig`	-	Opt-in "play through years" (cumulative): the marks draw UP TO the active period and extend as the timeline steps; `interpolate` sweeps smoothly between years, `false` jump-cuts. Headless controller via `chart.timeline()` plus the built-in play button + scrubber. Off by default; wins over `progressiveDraw` when both are set.
`progressiveDraw`	`boolean \| ProgressiveDrawConfig`	-	Opt-in reveal animation: wipes the marks in left to right on mount (a clip reveal; axes and titles stay put). `true` uses defaults (1200 ms, easeInOutCubic); a config tunes durationMs, easing, autoplay, and replayOnUpdate (`tipLabel` is LineChart-only and ignored here). Off by default; respects prefers-reduced-motion (renders fully drawn instantly) and `replay()` re-runs it.
`dataSet`*	`FanDataItem[]`	-	Array of forecast series, each a median line plus its nested confidence bands
`title`	`string`	-	Optional chart title rendered above the plot
`yAxisDomain`	`[number, number]`	-	Fixed [min, max] for the y-axis; when omitted the domain auto-fits the line plus the widest band extents
`xAxisDataType`	`"date_annual" \| "date_monthly" \| "number"`	`"number"`	How x values are parsed and formatted: yearly dates, monthly dates, or plain numbers
`xAxisFormat`	`(d: number \| string) => string`	-	Formats an x tick value into its display label
`yAxisFormat`	`(d: number \| string) => string`	-	Formats a y tick value into its display label
`ticks`	`number`	`5`	Approximate number of axis ticks to generate
`tickValues`	`Array<number \| Date>`	-	Explicit tick values, overriding the generated ones
`curve`	`"curveBumpX" \| "curveLinear" \| "curveMonotoneX"`	-	Line interpolation: curveLinear, curveMonotoneX, or curveBumpX
`fillOpacity`	`number`	`0.18`	band fill opacity for the widest band (narrower bands scale up from here).
`forecastZone`	`boolean`	-	shade the forecast region (from the last solid point to the end). Default true.
`showDataPoints`	`boolean`	`false`	Draw a marker at each median data point (default false)
`tooltipFormatter`	`(item: FanDataItem, lastPoint: DataPoint \| null) => string`	-	Custom HTML for the tooltip (DOMPurify-sanitized; may include `<a href>` links).
`onHighlightItem`	`(labels: string[]) => void`	-	Called when the hovered/highlighted label(s) change

Common props - shared by every chart (14)

Prop	Type	Default	Description
`width`	`number`	`1000`	Chart width in pixels
`height`	`number`	`500`	Chart height in pixels
`margin`	`Margin`	`{ top: 50, right: 50, bottom: 50, left: 60 }`	Inner margins (top/right/bottom/left, in px) reserved for axes, titles, and labels
`colors`	`string[]`	-	Categorical palette for series/labels without an explicit colour or colorsMapping entry
`colorsMapping`	`Record<string, string>`	-	Explicit label -> colour map; takes precedence over the palette and per-item colours
`highlightItems`	`string[]`	-	Labels to emphasise; all other marks dim
`disabledItems`	`string[]`	-	Labels to hide and exclude from scales/stacks
`renderer`	`"svg" \| "canvas" \| "webgpu"`	`"svg"`	Render as inline SVG (default) or to a canvas (faster for large datasets); getContext() is identical either way
`locale`	`string`	-	BCP-47 locale used for number and date formatting
`skipColorMappingDispatch`	`boolean`	`false`	External-CSS mode: unmapped labels resolve to transparent and onColorMappingGenerated is not emitted, so mark colours come from your CSS via the data-label-safe contract
`enableTransitions`	`boolean`	`true`	Animate updates with CSS transitions (default true)
`onColorMappingGenerated`	`(mapping: Record<string, string>) => void`	-	Called with the resolved label -> colour map after the chart assigns colours
`onChartDataProcessed`	`(context: ChartContext) => void`	-	Called with the renderer-agnostic ChartContext whenever the data is (re)processed
`onDataWarning`	`(warnings: DataWarning[]) => void`	-	Called with any non-fatal data warnings (duplicate labels, non-finite values, non-monotonic dates, ...)

Sự kiện

Web component phát ra (dispatch) các CustomEvent nổi bọt (bubbling) sau đây (engine cũng phơi bày các sự kiện tương tự thông qua các callback on* trong bảng ở trên):

Sự kiện	Chi tiết	Kích hoạt khi
`michi-vz:highlight`	`string[]`	trạng thái nổi bật lúc di chuột thay đổi
`michi-vz:colormapping`	`Record<string, string>`	một ánh xạ màu được tạo ra
`michi-vz:dataprocessed`	`ChartContext`	dữ liệu được xử lý (lại)
`michi-vz:datawarning`	`DataWarning[]`	phát hiện cảnh báo đầu vào

getContext()

mountFanChart(el, props).getContext() trả về FanChartContext độc lập với renderer (số lượng điểm lịch sử/dự báo theo từng chuỗi, các mức dải (band levels), độ bất định cuối cùng, cùng với một bản tóm tắt bằng ngôn ngữ tự nhiên có tính xác định và một bảng hỗ trợ khả năng tiếp cận a11y). Xem ngữ cảnh LLM.

Nguồn

Các thuộc tính (props) được định kiểu là FanChartProps trong @michi-vz/core.

API Biểu đồ hình quạt ​

Nhập ​

Thuộc tính ​

Sự kiện ​

getContext() ​

Nguồn ​