Página Inicial>Relacionado com a programação>Outro código-fonte
Baixar

Swiftuicharts

Uma biblioteca de gráficos / plotagem para SwiftUi. Funciona no MacOS, iOS, WatchOS e TVOS e possui recursos de acessibilidade e localização incorporados.

Projeto de demonstração

Documentação

Trabalhando em uma versão 3 com uma sensação mais swifttu na API.

Tipos de gráficos

  • Gráfico de linha

  • Gráfico de linha preenchida

  • Gráfico de várias linhas

  • Gráfico de linha de longo alcance

  • Gráfico de barras

  • Gráfico de barras à distância

  • Gráfico de barras agrupadas

  • Gráfico de barras empilhadas

  • Gráfico de pizza

  • Gráfico de donut

Gráficos de linha

Gráfico de linha

Exemplo de gráfico de linha

Usa o modelo de dados LineChartData . 

 LineChart ( chartData : LineChartData )

Gráfico de linha preenchida

Exemplo de gráfico de linha preenchida

Usa o modelo de dados LineChartData . 

 FilledLineChart ( chartData : LineChartData )

Gráfico de várias linhas

Exemplo de gráfico de várias linhas

Usa o modelo de dados MultiLineChartData . 

 MultiLineChart ( chartData : MultiLineChartData )

Gráfico de linha de longo alcance

Exemplo de gráfico de linha de longo alcance

Usa o modelo de dados RangedLineChart . 

 RangedLineChart ( chartData : RangedLineChartData )

Gráficos de barras

Gráfico de barras

Exemplo de gráfico de barras

Usa o modelo de dados BarChartData . 

 BarChart ( chartData : BarChartData )

Gráfico de barras de alcance

Exemplo de gráfico de barras de alcance

Usa o modelo de dados RangedBarChartData . 

 RangedBarChart ( chartData : RangedBarChartData )

Gráfico de barras agrupadas

Exemplo de gráfico de barras agrupadas

Usa o modelo de dados GroupedBarChartData . 

 GroupedBarChart ( chartData : GroupedBarChartData )

Gráfico de barras empilhadas

Exemplo de gráfico de barras empilhadas

Usa o modelo de dados do StackedBarChartData . 

 StackedBarChart ( chartData : StackedBarChartData )

Gráficos de pizza

Gráfico de pizza

Exemplo de gráfico de pizza

Usa o modelo de dados PieChartData . 

 PieChart ( chartData : PieChartData )

Gráfico de donut

Exemplo de gráfico de donut

Usa o modelo de dados DoughnutChartData . 

 DoughnutChart ( chartData : DoughnutChartData )

Documentação

Instalação

Gerente de pacotes Swift 

 File > Swift Packages > Add Package Dependency...

import SwiftUICharts

Se você tiver problemas com as visualizações não atualizando corretamente, adicione .id() à sua visualização. 

 LineChart ( chartData : LineChartData )
    . id ( LineChartData . id )

Ver modificadores

  • Sobreposição de toque

  • Caixa de informações

  • Caixa de informações flutuantes

  • Caixa de cabeçalho

  • Lendas

  • Linha média

  • Y Ponto de interesse do eixo

  • X grade de eixo

  • Y Grade de eixo

  • X rótulos do eixo

  • Y Exis Rótulos

  • Linha de tendência linear

  • Marcadores pontuais

A ordem dos modificadores de visualização é algo importante, pois os modificadores são vários tipos de pilhas que envolvem as visualizações anteriores.

Todos os tipos de gráficos

Sobreposição de toque

Detecta a entrada do toque do ponteiro. Encontra o ponto de dados mais próximo e exibe as informações relevantes, quando especificado.

A localização da caixa de informações está definida no ChartStyle -> infoBoxPlacement . 

 . touchOverlay ( chartData : CTChartData , specifier : String , unit : TouchUnit )
  • ChartData: modelo de dados do gráfico.
  • Especificador: precisão decimal para rótulos.
  • Unidade: unidade a ser colocada antes ou depois do valor.

Configuração dentro dos dados do gráfico -> estilo de gráfico

Caixa de informações

Exibe as informações da sobreposição de toque se InfoBoxPlacement for definido como .infoBox .

A localização da caixa de informações está definida no ChartStyle -> infoBoxPlacement . 

 . infoBox ( chartData : CTChartData )
  • ChartData: modelo de dados do gráfico.

Caixa de informações flutuantes

Exibe as informações da sobreposição de toque se InfoBoxPlacement estiver definido como .floating

A localização da caixa de informações está definida no ChartStyle -> infoBoxPlacement . 

 . floatingInfoBox ( chartData : CTChartData )
  • ChartData: modelo de dados do gráfico.

Caixa de cabeçalho

Exibe os metadados sobre o gráfico, definido nos Chart Data -> ChartMetadata

Exibe as informações da sobreposição de toque se InfoBoxPlacement for definido como .header .

A localização da caixa de informações está definida no ChartStyle -> infoBoxPlacement . 

 . headerBox ( chartData : CTChartData )

Lendas

Exibe lendas. 

 . legends ( )

Estabelece marcadores em cada um dos pontos de dados.

Gráficos de linha e barras

Linha média

Mostra uma linha de marcador na média de todos os pontos de dados. 

 . averageLine ( chartData : CTLineBarChartDataProtocol ,
             markerName : " Average " ,
             labelPosition : . yAxis ( specifier : " %.0f " ) ,
             lineColour : . primary ,
             strokeStyle : StrokeStyle ( lineWidth : 3 , dash : [ 5 , 10 ] ) )
  • ChartData: modelo de dados do gráfico.
  • Markername: Título do Marker, para a lenda.
  • LabelPosition: Opção para exibir o valor dos marcadores em linha com o marcador.
  • LabelColour: cor do texto.
  • Labelbackground: cor do fundo.
  • LineColour: cor da linha.
  • Strokestyle: estilo de derrame.

Y Ponto de interesse do eixo

Ponto de interesse configurável 

 . yAxisPOI ( chartData : CTLineBarChartDataProtocol ,
          markerName : " Marker " ,
          markerValue : 123 ,
          labelPosition : . center ( specifier : " %.0f " ) ,
          labelColour : Color . black ,
          labelBackground : Color . orange ,
          lineColour : Color . orange ,
          strokeStyle : StrokeStyle ( lineWidth : 3 , dash : [ 5 , 10 ] ) )
  • ChartData: modelo de dados do gráfico.
  • Markername: Título do Marker, para a lenda.
  • MarkValue: valor para marcar
  • LabelPosition: Opção para exibir o valor dos marcadores em linha com o marcador.
  • LabelColour: cor do texto.
  • Labelbackground: cor do fundo.
  • LineColour: cor da linha.
  • Strokestyle: estilo de derrame.
  • Retornos: uma nova visualização que contém o gráfico com uma linha de marcador em um valor especificado.

X grade de eixo

Adiciona linhas verticais ao longo do eixo x. 

 . xAxisGrid ( chartData : CTLineBarChartDataProtocol )

Configuração no ChartData -> ChartStyle .

Y Grade de eixo

Adiciona linhas horizontais ao longo do eixo y. 

 . yAxisGrid ( chartData : CTLineBarChartDataProtocol )

Configuração no ChartData -> ChartStyle .

X rótulos do eixo

Rótulos para o eixo x. 

 . xAxisLabels ( chartData : CTLineBarChartDataProtocol )

Configuração no ChartData -> ChartStyle .

Y Exis Rótulos

Etiquetas geradas automaticamente para o eixo y 

 . yAxisLabels ( chartData : CTLineBarChartDataProtocol , specifier : " %.0f " )
  • Especificador: especificador de precisão decimal.

Configuração no ChartData -> ChartStyle .

yaxislabeltype: 

case numeric // Auto generated, numeric labels.
case custom // Custom labels array

O costume é definido de ChartData -> yAxisLabels

Linha de tendência linear

Uma linha no gráfico para mostrar a tendência nos dados. 

 . linearTrendLine ( chartData : CTLineBarChartDataProtocol ,
                 firstValue : Double ,
                 lastValue : Double ,
                 lineColour : ColourStyle ,
                 strokeStyle : StrokeStyle )

Gráficos de linha

Marcadores pontuais

Estabelece marcadores em cada um dos pontos de dados. 

 . pointMarkers ( chartData : CTLineChartDataProtocol )

Configuração no Data Set -> PointStyle .

Linha superior preenchida

Adiciona uma linha independente em cima do FilledlineChart. 

 . filledTopLine ( chartData : LineChartData ,
               lineColour : ColourStyle ,
               strokeStyle : StrokeStyle )

Permite uma linha dura sobre o ponto de dados com um preenchimento semi -opaco.

Exemplos

Gráfico de linha 

 struct LineChartDemoView : View {
    
    let data : LineChartData = weekOfData ( )
    
    var body : some View {
        VStack {
            LineChart ( chartData : data )
                . pointMarkers ( chartData : data )
                . touchOverlay ( chartData : data , specifier : " %.0f " )
                . yAxisPOI ( chartData : data ,
                          markerName : " Step Count Aim " ,
                          markerValue : 15_000 ,
                          labelPosition : . center ( specifier : " %.0f " ) ,
                          labelColour : Color . black ,
                          labelBackground : Color ( red : 1.0 , green : 0.75 , blue : 0.25 ) ,
                          lineColour : Color ( red : 1.0 , green : 0.75 , blue : 0.25 ) ,
                          strokeStyle : StrokeStyle ( lineWidth : 3 , dash : [ 5 , 10 ] ) )
                . yAxisPOI ( chartData : data ,
                          markerName : " Minimum Recommended " ,
                          markerValue : 10_000 ,
                          labelPosition : . center ( specifier : " %.0f " ) ,
                          labelColour : Color . white ,
                          labelBackground : Color ( red : 0.25 , green : 0.75 , blue : 1.0 ) ,
                          lineColour : Color ( red : 0.25 , green : 0.75 , blue : 1.0 ) ,
                          strokeStyle : StrokeStyle ( lineWidth : 3 , dash : [ 5 , 10 ] ) )
                . averageLine ( chartData : data ,
                             strokeStyle : StrokeStyle ( lineWidth : 3 , dash : [ 5 , 10 ] ) )
                . xAxisGrid ( chartData : data )
                . yAxisGrid ( chartData : data )
                . xAxisLabels ( chartData : data )
                . yAxisLabels ( chartData : data )
                . infoBox ( chartData : data )
                . headerBox ( chartData : data )
                . legends ( chartData : data , columns : [ GridItem ( . flexible ( ) ) , GridItem ( . flexible ( ) ) ] )
                . id ( data . id )
                . frame ( minWidth : 150 , maxWidth : 900 , minHeight : 150 , idealHeight : 250 , maxHeight : 400 , alignment : . center )
        }
        . navigationTitle ( " Week of Data " )
    }
    
    static func weekOfData ( ) -> LineChartData {
        let data = LineDataSet ( dataPoints : [
            LineChartDataPoint ( value : 12000 , xAxisLabel : " M " , description : " Monday " ) ,
            LineChartDataPoint ( value : 10000 , xAxisLabel : " T " , description : " Tuesday " ) ,
            LineChartDataPoint ( value : 8000 ,  xAxisLabel : " W " , description : " Wednesday " ) ,
            LineChartDataPoint ( value : 17500 , xAxisLabel : " T " , description : " Thursday " ) ,
            LineChartDataPoint ( value : 16000 , xAxisLabel : " F " , description : " Friday " ) ,
            LineChartDataPoint ( value : 11000 , xAxisLabel : " S " , description : " Saturday " ) ,
            LineChartDataPoint ( value : 9000 ,  xAxisLabel : " S " , description : " Sunday " )
        ] ,
        legendTitle : " Steps " ,
        pointStyle : PointStyle ( ) ,
        style : LineStyle ( lineColour : ColourStyle ( colour : . red ) , lineType : . curvedLine ) )
        
        let metadata   = ChartMetadata ( title : " Step Count " , subtitle : " Over a Week " )
        
        let gridStyle  = GridStyle ( numberOfLines : 7 ,
                                   lineColour   : Color ( . lightGray ) . opacity ( 0.5 ) ,
                                   lineWidth    : 1 ,
                                   dash         : [ 8 ] ,
                                   dashPhase    : 0 )
        
        let chartStyle = LineChartStyle ( infoBoxPlacement    : . infoBox ( isStatic : false ) ,
                                        infoBoxBorderColour : Color . primary ,
                                        infoBoxBorderStyle  : StrokeStyle ( lineWidth : 1 ) ,
                                        
                                        markerType          : . vertical ( attachment : . line ( dot : . style ( DotStyle ( ) ) ) ) ,
                                        
                                        xAxisGridStyle      : gridStyle ,
                                        xAxisLabelPosition  : . bottom ,
                                        xAxisLabelColour    : Color . primary ,
                                        xAxisLabelsFrom     : . dataPoint ( rotation : . degrees ( 0 ) ) ,
                                        
                                        yAxisGridStyle      : gridStyle ,
                                        yAxisLabelPosition  : . leading ,
                                        yAxisLabelColour    : Color . primary ,
                                        yAxisNumberOfLabels : 7 ,
                                        
                                        baseline            : . minimumWithMaximum ( of : 5000 ) ,
                                        topLine             : . maximum ( of : 20000 ) ,
                                        
                                        globalAnimation     : . easeOut ( duration : 1 ) )
        
        return LineChartData ( dataSets       : data ,
                             metadata       : metadata ,
                             chartStyle     : chartStyle )
        
    }
}

Acessibilidade

Dentro de certos elementos, há tags adicionais para ajudar a descrever o gráfico para narração.

Veja a localização da acessibilidade

Localização

Todos os rótulos suportam localização. No entanto, existem alguns rótulos ocultos que estão lá para apoiar a narração. Veja a localização da acessibilidade

Localização da acessibilidade

Veja a demonstração de localização no projeto de demonstração.

Voice Over Descrição de um ponto de dados quando o usuário toca a área mais próxima do ponto de dados. A narração dirá <chart title>, <data point value>, <data point description> . 

 " %@ <local_description_of_a_data_point> " = " %@, <Description of a data point> " ;

Leia antes de um poiMarker . A narração dirá <poi marker>, <marker legend title>, <marker value> . 

 " P-O-I-Marker " = " P O I Marker " ;
" Average " = " Average " ;

Voice sobre descrição de um poiMarker . A narração dirá <POI-Marker>, <marker legend title>, <marker value> . 

 " <local_marker_legend_title> %@ " = " local_marker_legend_title, %@ " ;

Leia antes de um axisLabel . A narração dirá <axisLabel>, <marker value> . 

 "X-Axis-Label" = "X Axis Label";
"Y-Axis-Label" = "Y Axis Label";

Leia antes de uma legend . A narração dirá <chart type legend>, <legend title> . 

 " Line-Chart-Legend " = " Line Chart Legend " ;
" P-O-I-Marker-Legend " = " P O I Marker Legend " ;
" Bar-Chart-Legend " = " Bar Chart Legend " ;
" P-O-I-Marker-Legend " = " P O I Marker Legend " ;
" Pie-Chart-Legend " = " Pie Chart Legend " ;
" P-O-I-Marker-Legend " = " P O I Marker Legend " ;
Expandir
Informações adicionais
Aplicativos Relacionados
Recomendado para você
Informações Relacionadas Todos