Diagram

Complete

Flödesscheman och organisationsscheman ritade som SVG. Rutor placeras automatiskt i nivåer utifrån sina kopplingar, eller på de X och Y som du anger. Med Editable drar användaren rutor eller flyttar dem med piltangenterna. Varje koppling finns också som text för skärmläsare.

Exempel

Parametrar

Parameter	Typ	Beskrivning
`Class`	`string`	Extra CSS-klasser som läggs till på rotelementet.
`Direction`	`DiagramDirection`	TopDown eller LeftRight.
`Edges`	`IEnumerable<DiagramEdge>`	Objekt av typen DiagramEdge(from, to, text) som länkar nod-id:n.
`Editable`	`bool`	Låter användaren flytta rutor.
`Height`	`Double`	Största höjd för rutnätets brödtext, till exempel 24rem (standard 28rem med VirtualScroll).
`Label`	`string`	Synlig etikettext (diagram: tillgängligt namn; IconButton: tillgängligt namn och verktygstips).
`LevelSpacing`	`Double`	Avstånd mellan nivåer.
`Nodes`	`IEnumerable<DiagramNode>`	Objekt av typen DiagramNode(id, text, shape, x, y, accent). Former: Process, Decision, Data, Terminal.
`NodeSpacing`	`Double`	Avstånd mellan rutor på samma nivå.
`NodeWidth`	`Double`	Bredden på varje ruta.
`ShowDataLabels`	`bool`	Skriver värdet på varje markering (staplar, linjepunkter, cirkelsektorer).
`ShowExport`	`bool`	Lägger till knappar som sparar diagrammet som PNG- eller SVG-bild.
`ShowLegend`	`bool`	Visar den klickbara förklaringen.
`Style`	`string`	Inbäddad stil som läggs till på rotelementet.
`ValueFormat`	`string`	Talformat för axeln och verktygstips, t.ex. N0 eller P1.
`Width`	`Double`	Skeleton: vilken CSS-längd som helst. Charts: ritbredd i SVG-enheter (diagrammet anpassas fortfarande efter sin behållare).

Händelser

Händelse	Typ	Beskrivning
`OnNodeMoved`	`EventCallback<DiagramNodeMove>`	Utlöses med id och ny position för en flyttad ruta.

Paket

Diagram ingår i RayCraft Complete. Paket: RayCraft.Blazor.Complete. Den hämtas från RayCrafts privata flöde och kräver en aktiv licens. Se Kom igång.

Skicka synpunkterVersion 1.0.3