Cartão de Gráfico Radial
Barras radiais no painel de painéis - arcos arredondados sobre a faixa do gráfico, pairando escurecendo um tom como qualquer outro gráfico BoardUI, e um título de contagem-up que segue o anel pairado. Seis olhares de um adereço: anéis lisos, rotulados, ou grelhados, medidores de valor único fino e sólido, e um meio medidor empilhado.
Visitantes
925
+5.2%Instalação
O cartão gráfico radial faz parte da BoardUI Pro.
Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.
Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.
Variantes
rings (por omissão), rótulos, e grade Desenhe um anel por item. gauge e sólido mostrar um único valor contra max Com a percentagem no centro; empilhado dobra os itens em um meio medidor cujo centro mostra a parte do segmento primário e segue o pairado.
{/* Ring names set along each arc */}<RadialChartCard variant="labels" />
{/* No tracks - rings over a circular grid */}<RadialChartCard variant="grid" />
{/* Single value against a goal, percent in the centre */}<RadialChartCard variant="gauge" data={[{ label: "Visitors", value: 1260 }]} max={2000} delta={0.052} range="Last 7 days" />
{/* Thicker ring on a raised disc */}<RadialChartCard variant="solid" data={[{ label: "Visitors", value: 1260 }]} max={2000} delta={0.052} range="Last 7 days" />
{/* Half gauge of stacked segments with a legend */}<RadialChartCard variant="stacked" data={[ { label: "Desktop", value: 1260 }, { label: "Mobile", value: 570 }, ]} delta={0.052} range="Last 7 days"/>Com azulejos
tiles adiciona uma peça de stat por item sob o gráfico - swatch e nome sobre o valor, três por linha com a última linha esticada para largura completa - e permite que a carta cresça para caber. Hovering uma peça foca seu anel e vice-versa.
{/* Stat tiles under the rings: three per row, the last row full width (5 → 3 + 2) */}<RadialChartCard tiles />Dados
data é um apartamento { label, value, color? } lista. Adicione um item e ele se torna um anel ou segmento, cores ciclo da paleta de gráficos, a menos que você definir um, e max define o valor do círculo completo. A pílula do período é um dropdown quando você passa ranges - cada faixa carrega seus próprios dados (e opcionalmente delta / headline) e o gráfico re-anima na seleção; onRangeChange permite- lhe obter em vez disso. Sem suportes de dados, o cartão envia três intervalos de demonstração, que é o que as antevisões acima usam.
// One item per ring / segment. First item = innermost ring.const data = [ { label: "Other", value: 90 }, { label: "Edge", value: 173 }, { label: "Firefox", value: 187 }, { label: "Safari", value: 200 }, { label: "Chrome", value: 275, color: "var(--color-chart-6)" }, // override any colour];
<RadialChartCard title="Visitors" data={data} max={300} // full-circle value; defaults to 110% of the largest ring headline={925} // optional resting headline (defaults to the total) delta={0.052} range="Jan – Jun 2024" // static pill…/>
// …or a working period dropdown: each range overrides data / max / delta / headline.<RadialChartCard variant="gauge" ranges={[ { id: "7d", label: "Last 7 days", data: [{ label: "Visitors", value: 1260 }], max: 2000, delta: 0.052 }, { id: "30d", label: "Last 30 days", data: [{ label: "Visitors", value: 4820 }], max: 6000, delta: 0.081 }, { id: "90d", label: "Last 90 days", data: [{ label: "Visitors", value: 12400 }], max: 15000, delta: -0.024 }, ]}/>