SwiftUICharts
v2.10.3
Une bibliothèque de graphiques / complots pour Swiftui. Fonctionne sur MacOS, iOS, WatchOS et TVOS et a des fonctionnalités d'accessibilité et de localisation intégrées.
Projet de démonstration
Documentation
Travailler sur une version 3 avec une sensation plus swiftui à l'API.
Graphique de ligne
Tableau de ligne rempli
Graphique multi-lignes
Graphique à ligne à distance
Graphique à barres
Graphique à barres à distance
Graphique à barre groupé
Graphique à barre empilé
Graphique à tarte
Graphique de beignet
Utilise le modèle de données LineChartData .
LineChart ( chartData : LineChartData ) 
Utilise le modèle de données LineChartData .
FilledLineChart ( chartData : LineChartData ) 
Utilise le modèle de données MultiLineChartData .
MultiLineChart ( chartData : MultiLineChartData ) 
Utilise le modèle de données RangedLineChart .
RangedLineChart ( chartData : RangedLineChartData )
Utilise le modèle de données BarChartData .
BarChart ( chartData : BarChartData ) 
Utilise le modèle de données RangedBarChartData .
RangedBarChart ( chartData : RangedBarChartData ) 
Utilise le modèle de données GroupedBarChartData .
GroupedBarChart ( chartData : GroupedBarChartData ) 
Utilise le modèle de données StackedBarChartData .
StackedBarChart ( chartData : StackedBarChartData )
Utilise le modèle de données PieChartData .
PieChart ( chartData : PieChartData ) 
Utilise le modèle de données DoughnutChartData .
DoughnutChart ( chartData : DoughnutChartData ) Swift Package Manager
File > Swift Packages > Add Package Dependency...
import SwiftUICharts Si vous avez des problèmes avec les vues qui ne mettent pas à jour correctement, ajoutez .id() à votre vue.
LineChart ( chartData : LineChartData )
. id ( LineChartData . id ) Superposition
Zone d'information
Boîte d'informations flottantes
Talent
Légendes
Ligne moyenne
Point d'intérêt de l'axe
Grille d'axe x
Grille d'axe y
Étiquettes de l'axe x
Étiquettes de l'axe Y
Ligne de tendance linéaire
Marqueurs de points
L'ordre des modificateurs de vue est un peu important car les modificateurs sont différents types de piles qui s'enroulent autour des vues précédentes.
Détecte l'entrée soit de Touch of Pointer. Recherche le point de données le plus proche et affiche les informations pertinentes où spécifié.
L'emplacement de la boîte d'information est défini dans ChartStyle -> infoBoxPlacement .
. touchOverlay ( chartData : CTChartData , specifier : String , unit : TouchUnit )Configuration dans les données du graphique -> Style de graphique
Affiche les informations de la superposition Touch si InfoBoxPlacement est défini sur .infoBox .
L'emplacement de la boîte d'information est défini dans ChartStyle -> infoBoxPlacement .
. infoBox ( chartData : CTChartData ) Affiche les informations de la superposition Touch si InfoBoxPlacement est défini sur .floating
L'emplacement de la boîte d'information est défini dans ChartStyle -> infoBoxPlacement .
. floatingInfoBox ( chartData : CTChartData ) Affiche les métadonnées sur le graphique, réglé dans Chart Data -> ChartMetadata
Affiche les informations de la superposition Touch si InfoBoxPlacement est défini sur .header .
L'emplacement de la boîte d'information est défini dans ChartStyle -> infoBoxPlacement .
. headerBox ( chartData : CTChartData ) Affiche les légendes.
. legends ( )Présente des marqueurs sur chacun des points de données.
Affiche une ligne de marqueur à la moyenne de tous les points de données.
. averageLine ( chartData : CTLineBarChartDataProtocol ,
markerName : " Average " ,
labelPosition : . yAxis ( specifier : " %.0f " ) ,
lineColour : . primary ,
strokeStyle : StrokeStyle ( lineWidth : 3 , dash : [ 5 , 10 ] ) )Point d'intérêt 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 ] ) )Ajoute des lignes verticales le long de l'axe x.
. xAxisGrid ( chartData : CTLineBarChartDataProtocol ) Configuration dans ChartData -> ChartStyle .
Ajoute des lignes horizontales le long de l'axe y.
. yAxisGrid ( chartData : CTLineBarChartDataProtocol ) Configuration dans ChartData -> ChartStyle .
Étiquettes pour l'axe x.
. xAxisLabels ( chartData : CTLineBarChartDataProtocol ) Configuration dans ChartData -> ChartStyle .
Étiquettes générées automatiquement pour l'axe Y
. yAxisLabels ( chartData : CTLineBarChartDataProtocol , specifier : " %.0f " ) Configuration dans ChartData -> ChartStyle .
YaxisLabelType:
case numeric // Auto generated, numeric labels.
case custom // Custom labels array Custom est défini à partir de ChartData -> yAxisLabels
Une ligne à travers le graphique pour montrer la tendance des données.
. linearTrendLine ( chartData : CTLineBarChartDataProtocol ,
firstValue : Double ,
lastValue : Double ,
lineColour : ColourStyle ,
strokeStyle : StrokeStyle )Présente des marqueurs sur chacun des points de données.
. pointMarkers ( chartData : CTLineChartDataProtocol ) Configuration dans Data Set -> PointStyle .
Ajoute une ligne indépendante au-dessus de FOLMLINECHART.
. filledTopLine ( chartData : LineChartData ,
lineColour : ColourStyle ,
strokeStyle : StrokeStyle )Permet une ligne dure sur le point de données avec un remplissage semi-opaque.
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 )
}
}À l'intérieur de certains éléments se trouvent des balises supplémentaires pour aider à décrire le graphique de la voix off.
Voir la localisation de l'accessibilité
Toutes les étiquettes soutiennent la localisation. Il existe cependant des étiquettes cachées qui sont là pour soutenir la voix off. Voir la localisation de l'accessibilité
Voir la démo de localisation dans le projet de démonstration.
Vocation de la description d'un point de données lorsque l'utilisateur touche la zone la plus proche du point de données. La voix off dira <chart title>, <data point value>, <data point description> .
" %@ <local_description_of_a_data_point> " = " %@, <Description of a data point> " ; Lisez devant un poiMarker . La voix off dira <poi marker>, <marker legend title>, <marker value> .
" P-O-I-Marker " = " P O I Marker " ;
" Average " = " Average " ; Vocation de la description d'un poiMarker . La voix off dira <POI-Marker>, <marker legend title>, <marker value> .
" <local_marker_legend_title> %@ " = " local_marker_legend_title, %@ " ; Lisez avant un axisLabel . La voix off dira <axisLabel>, <marker value> .
"X-Axis-Label" = "X Axis Label";
"Y-Axis-Label" = "Y Axis Label";
Lisez avant une legend . La voix off dira <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 " ;
