Inicio>Relacionado con la programación>Otro código fuente
Descargar

Swiftuicharts

Una biblioteca de gráficos / trazado para Swiftui. Trabaja en macOS, iOS, WatchOS y TVOS y tiene funciones de accesibilidad y localización integradas.

Proyecto de demostración

Documentación

Trabajando en una versión 3 con una sensación más swiftui para la API.

Tipos de gráficos

  • Gráfico de línea

  • Gráfico de línea lleno

  • Gráfico múltiple

  • Gráfico de línea a distancia

  • Gráfico de barras

  • Gráfico de barra a distancia

  • Gráfico de barras agrupado

  • Gráfico de barra apilada

  • Gráfico

  • Gráfico de donas

Gráficos de línea

Gráfico de línea

Ejemplo de gráfico de línea

Utiliza el modelo de datos LineChartData . 

 LineChart ( chartData : LineChartData )

Gráfico de línea lleno

Ejemplo de cuadro de línea lleno

Utiliza el modelo de datos LineChartData . 

 FilledLineChart ( chartData : LineChartData )

Gráfico múltiple

Ejemplo de gráfico de múltiples líneas

Utiliza el modelo de datos MultiLineChartData . 

 MultiLineChart ( chartData : MultiLineChartData )

Gráfico de línea a distancia

Ejemplo de gráfico de línea a distancia

Utiliza el modelo de datos RangedLineChart . 

 RangedLineChart ( chartData : RangedLineChartData )

Gráficos de barras

Gráfico de barras

Ejemplo de gráfico de barras

Utiliza el modelo de datos BarChartData . 

 BarChart ( chartData : BarChartData )

Gráfico de barras de alcance

Ejemplo de gráfico de barra de rango

Utiliza el modelo de datos RangedBarChartData . 

 RangedBarChart ( chartData : RangedBarChartData )

Gráfico de barras agrupado

Ejemplo de gráfico de barras agrupadas

Utiliza el modelo de datos GroupedBarChartData . 

 GroupedBarChart ( chartData : GroupedBarChartData )

Gráfico de barra apilada

Ejemplo de gráfico de barras apiladas

Utiliza el modelo de datos StackedBarChartData . 

 StackedBarChart ( chartData : StackedBarChartData )

Gráficos circulares

Gráfico

Ejemplo de gráfico circular

Utiliza el modelo de datos PieChartData . 

 PieChart ( chartData : PieChartData )

Gráfico de donas

Ejemplo de gráfico de donas

Utiliza el modelo de datos DoughnutChartData . 

 DoughnutChart ( chartData : DoughnutChartData )

Documentación

Instalación

Administrador de paquetes Swift 

 File > Swift Packages > Add Package Dependency...

import SwiftUICharts

Si tiene problemas con las vistas que no se actualizan correctamente, agregue .id() a su vista. 

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

Ver modificadores

  • Toque la superposición

  • Caja de información

  • Caja de información flotante

  • Caja

  • Leyendas

  • Línea promedio

  • Y Punto de interés del eje

  • Cuadrícula de eje x

  • Rejilla del eje y

  • Etiquetas de eje x

  • Etiquetas de eje y

  • Línea de tendencia lineal

  • Marcadores de puntos

El orden de los modificadores de la vista es algo importante como los modificadores son varios tipos de pilas que envuelven las vistas anteriores.

Todos los tipos de gráficos

Toque la superposición

Detecta la entrada desde el toque del puntero. Encuentra el punto de datos más cercano y muestra la información relevante donde se especifica.

La ubicación del cuadro de información se establece en ChartStyle -> infoBoxPlacement . 

 . touchOverlay ( chartData : CTChartData , specifier : String , unit : TouchUnit )
  • ChartData: modelo de datos de gráfico.
  • Especificador: precisión decimal para etiquetas.
  • Unidad: Unidad para poner antes o después del valor.

Configuración dentro de los datos del gráfico -> Estilo del gráfico

Caja de información

Muestra la información de la superposición táctil si InfoBoxPlacement está configurada en .infoBox .

La ubicación del cuadro de información se establece en ChartStyle -> infoBoxPlacement . 

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

Caja de información flotante

Muestra la información de la superposición táctil si InfoBoxPlacement está configurada en .floating .

La ubicación del cuadro de información se establece en ChartStyle -> infoBoxPlacement . 

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

Caja

Muestra los metadatos sobre el gráfico, establecido en Chart Data -> ChartMetadata

Muestra la información de la superposición táctil si InfoBoxPlacement se establece en .header .

La ubicación del cuadro de información se establece en ChartStyle -> infoBoxPlacement . 

 . headerBox ( chartData : CTChartData )

Leyendas

Muestra leyendas. 

 . legends ( )

Presenta marcadores sobre cada uno de los puntos de datos.

Gráficos de línea y barra

Línea promedio

Muestra una línea de marcador en el promedio de todos los puntos de datos. 

 . averageLine ( chartData : CTLineBarChartDataProtocol ,
             markerName : " Average " ,
             labelPosition : . yAxis ( specifier : " %.0f " ) ,
             lineColour : . primary ,
             strokeStyle : StrokeStyle ( lineWidth : 3 , dash : [ 5 , 10 ] ) )
  • ChartData: modelo de datos de gráfico.
  • MARCHERNAME: Título del marcador, para la leyenda.
  • LabelPosition: opción para mostrar el valor de los marcadores en línea con el marcador.
  • Labelcolour: color del texto.
  • LapeBackground: color del fondo.
  • Linecolour: color de línea.
  • Strokestyle: estilo de accidente cerebrovascular.

Y Punto de interés del eje

Punto de interés configurable 

 . 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 datos de gráfico.
  • MARCHERNAME: Título del marcador, para la leyenda.
  • Markervalue: valor para marcar
  • LabelPosition: opción para mostrar el valor de los marcadores en línea con el marcador.
  • Labelcolour: color del texto.
  • LapeBackground: color del fondo.
  • Linecolour: color de línea.
  • Strokestyle: estilo de accidente cerebrovascular.
  • Devuelve: una nueva vista que contiene el gráfico con una línea de marcador con un valor especificado.

Cuadrícula de eje x

Agrega líneas verticales a lo largo del eje x. 

 . xAxisGrid ( chartData : CTLineBarChartDataProtocol )

Configuración dentro de ChartData -> ChartStyle .

Rejilla del eje y

Agrega líneas horizontales a lo largo del eje Y. 

 . yAxisGrid ( chartData : CTLineBarChartDataProtocol )

Configuración dentro de ChartData -> ChartStyle .

Etiquetas de eje x

Etiquetas para el eje x. 

 . xAxisLabels ( chartData : CTLineBarChartDataProtocol )

Configuración dentro de ChartData -> ChartStyle .

Etiquetas de eje y

Etiquetas generadas automáticamente para el eje y 

 . yAxisLabels ( chartData : CTLineBarChartDataProtocol , specifier : " %.0f " )
  • Especificador: especificador de precisión decimal.

Configuración dentro de ChartData -> ChartStyle .

yaxislabeltype: 

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

La costumbre se establece en ChartData -> yAxisLabels

Línea de tendencia lineal

Una línea a través del gráfico para mostrar la tendencia en los datos. 

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

Gráficos de línea

Marcadores de puntos

Presenta marcadores sobre cada uno de los puntos de datos. 

 . pointMarkers ( chartData : CTLineChartDataProtocol )

Configuración dentro Data Set -> PointStyle .

Línea superior llena

Agrega una línea independiente sobre LlenfleLinEchart. 

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

Permite una línea dura sobre el punto de datos con un relleno semi opaco.

Ejemplos

Gráfico de línea 

 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 )
        
    }
}

Accesibilidad

Dentro de ciertos elementos hay etiquetas adicionales para ayudar a describir el gráfico para la voz en off.

Ver Localización de accesibilidad

Localización

Todas las etiquetas apoyan la localización. Sin embargo, hay algunas etiquetas ocultas que están allí para apoyar la voz en off. Ver Localización de accesibilidad

Localización de la accesibilidad

Vea la demostración de localización en el proyecto de demostración.

Descripción sobre la descripción de un punto de datos cuando el usuario toca el área más cercana al punto de datos. La voz en off dirá <chart title>, <data point value>, <data point description> . 

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

Lea antes de un poiMarker . La voz en off dirá <poi marker>, <marker legend title>, <marker value> . 

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

Voz sobre descripción de un poiMarker . La voz en off dirá <POI-Marker>, <marker legend title>, <marker value> . 

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

Lea antes de un axisLabel . La voz en off dirá <axisLabel>, <marker value> . 

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

Lea antes de una legend . La voz en off 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
Información adicional
Aplicaciones relacionadas
Recomendado para ti
Información relacionada Todo