SwiftUICharts
v2.10.3
Bagan / Perpustakaan Plotting untuk SwiftUi. Bekerja pada macOS, iOS, watchOs, dan TVOS dan memiliki fitur aksesibilitas dan lokalisasi yang dibangun.
Proyek demo
Dokumentasi
Bekerja pada versi 3 dengan nuansa swiftUi yang lebih ke API.
Bagan baris
Bagan garis yang diisi
Bagan Multi Line
Bagan garis jarak
Bagan batang
Bagan batang jarak jauh
Bagan Bar yang dikelompokkan
Bagan batang bertumpuk
Diagram lingkaran
Bagan donat
Menggunakan model data LineChartData .
LineChart ( chartData : LineChartData ) 
Menggunakan model data LineChartData .
FilledLineChart ( chartData : LineChartData ) 
Menggunakan Model Data MultiLineChartData .
MultiLineChart ( chartData : MultiLineChartData ) 
Penggunaan Model Data RangedLineChart .
RangedLineChart ( chartData : RangedLineChartData )
Menggunakan model data BarChartData .
BarChart ( chartData : BarChartData ) 
Penggunaan Model Data RangedBarChartData .
RangedBarChart ( chartData : RangedBarChartData ) 
Menggunakan model data GroupedBarChartData .
GroupedBarChart ( chartData : GroupedBarChartData ) 
Menggunakan Model Data StackedBarChartData .
StackedBarChart ( chartData : StackedBarChartData )
Menggunakan model data PieChartData .
PieChart ( chartData : PieChartData ) 
Menggunakan model data DoughnutChartData .
DoughnutChart ( chartData : DoughnutChartData ) Manajer Paket Swift
File > Swift Packages > Add Package Dependency...
import SwiftUICharts Jika Anda memiliki masalah dengan tampilan yang tidak diperbarui dengan benar, tambahkan .id() ke tampilan Anda.
LineChart ( chartData : LineChartData )
. id ( LineChartData . id ) Overlay Sentuh
Kotak info
Kotak Info Mengambang
Kotak header
Legenda
Garis rata -rata
Y Sumbu Titik Minat
X Grid Axis
Y Grid Axis
X Label Axis
Label Label Sumbu Y.
Garis tren linier
Penanda titik
Urutan pengubah tampilan adalah beberapa yang penting karena pengubah adalah berbagai jenis tumpukan yang membungkus pandangan sebelumnya.
Mendeteksi input baik dari sentuhan pointer. Temukan titik data terdekat dan menampilkan informasi yang relevan di mana ditentukan.
Lokasi kotak info diatur dalam ChartStyle -> infoBoxPlacement .
. touchOverlay ( chartData : CTChartData , specifier : String , unit : TouchUnit )Pengaturan dalam Data Bagan -> Gaya Bagan
Menampilkan informasi dari overlay sentuh jika InfoBoxPlacement diatur ke .infoBox .
Lokasi kotak info diatur dalam ChartStyle -> infoBoxPlacement .
. infoBox ( chartData : CTChartData ) Menampilkan informasi dari overlay sentuh jika InfoBoxPlacement diatur ke .floating .
Lokasi kotak info diatur dalam ChartStyle -> infoBoxPlacement .
. floatingInfoBox ( chartData : CTChartData ) Menampilkan metadata tentang grafik, ditetapkan dalam Chart Data -> ChartMetadata
Menampilkan informasi dari overlay sentuh jika InfoBoxPlacement diatur ke .header .
Lokasi kotak info diatur dalam ChartStyle -> infoBoxPlacement .
. headerBox ( chartData : CTChartData ) Menampilkan legenda.
. legends ( )Menjabarkan penanda di masing -masing titik data.
Menunjukkan garis penanda pada rata -rata semua titik data.
. averageLine ( chartData : CTLineBarChartDataProtocol ,
markerName : " Average " ,
labelPosition : . yAxis ( specifier : " %.0f " ) ,
lineColour : . primary ,
strokeStyle : StrokeStyle ( lineWidth : 3 , dash : [ 5 , 10 ] ) )Titik menarik yang dapat dikonfigurasi
. 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 ] ) )Menambahkan garis vertikal di sepanjang sumbu x.
. xAxisGrid ( chartData : CTLineBarChartDataProtocol ) Pengaturan dalam ChartData -> ChartStyle .
Menambahkan garis horizontal di sepanjang sumbu Y.
. yAxisGrid ( chartData : CTLineBarChartDataProtocol ) Pengaturan dalam ChartData -> ChartStyle .
Label untuk sumbu x.
. xAxisLabels ( chartData : CTLineBarChartDataProtocol ) Pengaturan dalam ChartData -> ChartStyle .
Label yang dihasilkan secara otomatis untuk sumbu y
. yAxisLabels ( chartData : CTLineBarChartDataProtocol , specifier : " %.0f " ) Pengaturan dalam ChartData -> ChartStyle .
Yaxislabeltype:
case numeric // Auto generated, numeric labels.
case custom // Custom labels array Kustom diatur dari ChartData -> yAxisLabels
Garis melintasi bagan untuk menunjukkan tren data.
. linearTrendLine ( chartData : CTLineBarChartDataProtocol ,
firstValue : Double ,
lastValue : Double ,
lineColour : ColourStyle ,
strokeStyle : StrokeStyle )Menjabarkan penanda di masing -masing titik data.
. pointMarkers ( chartData : CTLineChartDataProtocol ) Pengaturan dalam Data Set -> PointStyle .
Menambahkan garis independen di atas Fillenlinechart.
. filledTopLine ( chartData : LineChartData ,
lineColour : ColourStyle ,
strokeStyle : StrokeStyle )Memungkinkan untuk garis keras di atas titik data dengan isian semi buram.
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 )
}
}Di dalam elemen tertentu ada tag tambahan untuk membantu menggambarkan bagan untuk sulih suara.
Lihat lokalisasi aksesibilitas
Semua label mendukung lokalisasi. Namun, ada beberapa label tersembunyi yang ada untuk mendukung sulih suara. Lihat lokalisasi aksesibilitas
Lihat demo lokalisasi dalam proyek demo.
Voice over description dari datapoint ketika pengguna menyentuh area yang paling dekat dengan titik data. Sulih suara akan mengatakan <chart title>, <data point value>, <data point description> .
" %@ <local_description_of_a_data_point> " = " %@, <Description of a data point> " ; Bacalah sebelum poiMarker . The VoiceOver akan mengatakan <poi marker>, <marker legend title>, <marker value> .
" P-O-I-Marker " = " P O I Marker " ;
" Average " = " Average " ; Suara atas deskripsi poiMarker . Sulih suara akan mengatakan <POI-Marker>, <marker legend title>, <marker value> .
" <local_marker_legend_title> %@ " = " local_marker_legend_title, %@ " ; Bacalah sebelum axisLabel . Sulih suara akan mengatakan <axisLabel>, <marker value> .
"X-Axis-Label" = "X Axis Label";
"Y-Axis-Label" = "Y Axis Label";
Bacalah sebelum legend . The VoiceOver akan mengatakan <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 " ;
