API Cây tỏa tròn

Một sơ đồ cụm/dendrogram tỏa tròn: các nhóm tỏa ra từ một điểm trung tâm, lá nằm ở CÙNG bán kính như mọi lá khác - xem demo Cây tỏa tròn.

Import

import "@michi-vz/wc/radial-tree-chart";
// <michi-vz-radial-tree-chart> giờ đã được định nghĩa

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

const chart = mountRadialTreeChart(el, props);

import { RadialTreeChart } from "@michi-vz/react/radial-tree-chart";

import { RadialTreeChart } from "@michi-vz/vue/radial-tree-chart";

import { radialTreeChart } from "@michi-vz/svelte/radial-tree-chart";

import { bindChart, applyRadialTreeChartProps } from "@michi-vz/angular/radial-tree-chart";
// needs CUSTOM_ELEMENTS_SCHEMA on the component that hosts <michi-vz-radial-tree-chart>

Props

Prop	Type	Default	Description
`timeline`	`boolean \| TimelinePeriodConfig`	-	Opt-in "play through years": snapshots one period at a time over the period tags in the data, with a headless controller (`chart.timeline()`) plus the built-in play button + scrubber. Values tween between periods unless `interpolate: false`. 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`*	`RadialTreeNode[]`	-	Forest of nodes (each a leaf or a group with children), laid out as a radial dendrogram.
`centerLabel`	`string`	-	Optional word-wrapped title drawn inside the small centre circle (legacy `titleCenter`).
`title`	`string`	-	Optional chart title rendered above the plot
`radiusRange`	`[number, number]`	`DEFAULT_RADIUS_RANGE`	[min, max] circle radius in px (default [2, 32], the legacy `circleRange`).
`labelDensityThresholds`	`{ rotateAbove?: number; hideAbove?: number }`	-	Adaptive label density thresholds, compared against the total LEAF count. `rotateAbove` (default 20): past this many leaves, every label is abbreviated and rotated radially instead of kept horizontal. `hideAbove` (default 100): past this many leaves, all labels are hidden.
`isLoading`	`boolean`	-	Show the loading overlay and skip the no-data check (legacy michi-vz parity).
`isNodata`	`boolean \| ((dataSet: RadialTreeNode[] \| null \| undefined) => boolean)`	-	No-data override: boolean, or a predicate on dataSet; default = empty dataSet.
`noDataLabel`	`string`	-	Text for the vanilla default no-data overlay (ignored when suppressed).
`suppressDefaultOverlay`	`boolean`	-	A framework wrapper sets this to render its OWN loading/no-data node instead.
`tooltipFormatter`	`(d: RadialTreeNode) => string`	-	Returns custom tooltip HTML for a hovered node (sanitized before it is inserted)
`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`	`900`	Chart width in pixels
`height`	`number`	`520`	Chart height in pixels
`margin`	`Margin`	`{ top: 36, right: 10, bottom: 10, left: 10 }`	Inner margins (top/right/bottom/left, in px); default 8 (36 top with a title)
`colors`	`string[]`	-	Categorical palette for rings 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 (active styling); others keep their base opacity
`disabledItems`	`string[]`	-	Labels to hide entirely (ring + track removed; remaining rings keep their radii order)
`renderer`	`"svg" \| "canvas" \| "webgpu"`	`"svg"`	Render as inline SVG (default) or to a canvas / WebGPU layer; getContext() is identical either way
`locale`	`string`	-	BCP-47 locale used for number formatting
`skipColorMappingDispatch`	`boolean`	`false`	External-CSS mode: unmapped labels resolve to transparent and onColorMappingGenerated is not emitted, so arc colours come from your CSS via the data-label-safe contract
`enableTransitions`	`boolean`	`true`	Animate opacity/arc changes with CSS transitions (SVG renderer; 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 (out-of-range values, duplicate labels, ...)

Sự kiện

Web component phát ra các CustomEvent nổi bọt (bubbling) sau (engine cũng cung cấp tương tự qua các callback on* trong bảng trên):

Sự kiện	Chi tiết	Xảy ra khi
`michi-vz:highlight`	`string[]`	phần được tô sáng khi 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 dữ liệu đầu vào (nhóm rỗng, giá trị âm/không hữu hạn, nhãn trùng lặp, lồng sâu hơn 2 cấp)

getContext()

mountRadialTreeChart(el, props).getContext() trả về RadialTreeChartContext không phụ thuộc renderer: stats.leafCount / groupCount / grandTotal / min (lá nhỏ nhất) / max (lá lớn nhất) / maxDepth, một mảng nodes[] (một dòng cho mỗi nút - nhóm hoặc lá - với label, code, color, depth, isLeaf, value, path), một summary tất định bằng ngôn ngữ tự nhiên, và một a11yTable. Xem Ngữ cảnh LLM.

Nguồn

Props được định kiểu là RadialTreeChartProps trong @michi-vz/core.

API Cây tỏa tròn ​

Import ​

Props ​

Sự kiện ​

getContext() ​

Nguồn ​