Angular Gráfico Radial
O Ignite UI for Angular Radial Chart pega dados e os renderiza como uma coleção de pontos de dados envolvidos em um círculo (em vez de se esticar ao longo de uma linha horizontal). O Radial Chart também está mapeando uma lista de categorias do mínimo ao máximo da extensão do gráfico e suporta os mecanismos de agrupamento de categorias.
Angular Radial Area Chart
O Angular Gráfico de Área Radial tem a forma de um polígono preenchido que é limitado por uma coleção de linhas retas que conectam pontos de dados. Esse tipo de gráfico usa o mesmo conceito de plotagem de dados que o Gráfico de Área, mas envolve os pontos de dados em torno de um eixo circular em vez de esticá-los horizontalmente. Você pode criar esse tipo de gráfico no IgxDataChartComponent
controle vinculando seus dados IgxRadialAreaSeriesComponent
, conforme mostrado no exemplo abaixo.
Angular Radial Column Chart
O Gráfico de Colunas Radiais é visualizado usando uma coleção de retângulos que se estendem do centro do gráfico em direção aos locais dos pontos de dados. Isso utiliza os mesmos conceitos de plotagem de dados que o Gráfico de Colunas, mas envolve os pontos de dados em torno de um círculo em vez de esticá-los horizontalmente. Você pode criar esse tipo de gráfico no IgxDataChartComponent
controle associando seus dados a um IgxRadialColumnSeriesComponent
, conforme mostrado no exemplo abaixo:
Angular Radial Line Chart
O Angular Gráfico de Linhas Radiais tem renderizações como uma coleção de linhas retas conectando pontos de dados. Esse tipo de gráfico usa o mesmo conceito de plotagem de dados que o Gráfico de Linhas, mas envolve os pontos de dados em torno de um eixo circular em vez de esticá-los horizontalmente. Você pode criar esse tipo de gráfico no IgxDataChartComponent
controle associando seus dados IgxRadialLineSeriesComponent
, conforme mostrado no exemplo abaixo:
Angular Radial Pie Chart
O Gráfico de Pizza Radial usa fatias de pizza que se estendem do centro do gráfico em direção aos locais dos pontos de dados. Esse tipo de gráfico usa conceitos de categorização de várias séries de pontos de dados e os envolve em torno de um eixo circular, em vez de esticar os pontos de dados ao longo de uma linha horizontal. Você pode criar esse tipo de gráfico no IgxDataChartComponent
controle associando seus dados a um IgxRadialPieSeriesComponent
, conforme mostrado no exemplo abaixo:
Angular Radial Chart Styling
Depois que nosso gráfico radial for criado, talvez queiramos fazer algumas personalizações de estilo adicionais, como uma alteração das cores da linha, tipos de marcadores ou cores de contorno desses marcadores. Este exemplo demonstra como personalizar o estilo no IgxDataChartComponent
controle.
Angular Radial Chart Settings
Além disso, os rótulos podem ser configurados para aparecer próximos ou largos no gráfico. Isso pode ser configurado com a LabelMode
propriedade para o IgxCategoryAngleAxisComponent
.
Additional Resources
Você pode encontrar mais informações sobre os tipos de gráficos relacionados nestes tópicos:
API References
A tabela a seguir lista os membros da API mencionados nas seções acima:
IgxDataChartComponent
IgxRadialAreaSeriesComponent
IgxRadialColumnSeriesComponent
IgxRadialLineSeriesComponent
IgxRadialPieSeriesComponent
ItemsSource
AngleAxisName
ValueAxisName
valueMemberPath
IgxCategoryAngleAxisComponent
IgxNumericRadiusAxisComponent