SwiftUICharts
v2.10.3
Swiftui의 차트 / 플로팅 라이브러리. MacOS, iOS, WatchOS 및 TVOS에서 작업하며 접근성 및 현지화 기능이 내장되어 있습니다.
데모 프로젝트
선적 서류 비치
API에 대한 더 많은 스위프트 느낌으로 버전 3에서 작업합니다.
라인 차트
채워진 라인 차트
멀티 라인 차트
원거리 라인 차트
막대 차트
원거리 막대 차트
그룹화 된 막대 차트
쌓인 막대 차트
파이 차트
도넛 차트
LineChartData 데이터 모델을 사용합니다.
LineChart ( chartData : LineChartData ) 
LineChartData 데이터 모델을 사용합니다.
FilledLineChart ( chartData : LineChartData ) 
MultiLineChartData 데이터 모델을 사용합니다.
MultiLineChart ( chartData : MultiLineChartData ) 
RangedLineChart 데이터 모델을 사용합니다.
RangedLineChart ( chartData : RangedLineChartData )
BarChartData 데이터 모델을 사용합니다.
BarChart ( chartData : BarChartData ) 
RangedBarChartData 데이터 모델을 사용합니다.
RangedBarChart ( chartData : RangedBarChartData ) 
GroupedBarChartData 데이터 모델을 사용합니다.
GroupedBarChart ( chartData : GroupedBarChartData ) 
StackedBarChartData 데이터 모델을 사용합니다.
StackedBarChart ( chartData : StackedBarChartData )
PieChartData 데이터 모델을 사용합니다.
PieChart ( chartData : PieChartData ) 
DoughnutChartData 데이터 모델을 사용합니다.
DoughnutChart ( chartData : DoughnutChartData ) 스위프트 패키지 관리자
File > Swift Packages > Add Package Dependency...
import SwiftUICharts 뷰가 올바르게 업데이트되지 않으면 .id() 뷰에 추가하십시오.
LineChart ( chartData : LineChartData )
. id ( LineChartData . id ) 오버레이를 터치하십시오
정보 상자
떠 다니는 정보 상자
헤더 상자
전설
평균 라인
y 축 관심 지점
X 축 그리드
Y 축 그리드
X 축 레이블
Y 축 라벨
선형 추세 라인
포인트 마커
View Modifiers의 순서는 수정자가 이전 뷰를 감싸는 다양한 유형의 스택이기 때문에 중요한 것입니다.
포인터 터치에서 입력을 감지합니다. 가장 가까운 데이터 포인트를 찾고 지정된 관련 정보를 표시합니다.
정보 상자의 위치는 ChartStyle -> infoBoxPlacement 로 설정됩니다.
. touchOverlay ( chartData : CTChartData , specifier : String , unit : TouchUnit )차트 데이터 내에서 설정 -> 차트 스타일
InfoBoxPlacement 가 .infoBox 로 설정된 경우 터치 오버레이에서 정보를 표시합니다.
정보 상자의 위치는 ChartStyle -> infoBoxPlacement 로 설정됩니다.
. infoBox ( chartData : CTChartData ) InfoBoxPlacement .floating 으로 설정된 경우 터치 오버레이에서 정보를 표시합니다.
정보 상자의 위치는 ChartStyle -> infoBoxPlacement 로 설정됩니다.
. floatingInfoBox ( chartData : CTChartData ) Chart Data -> ChartMetadata
InfoBoxPlacement .header 로 설정된 경우 터치 오버레이에서 정보를 표시합니다.
정보 상자의 위치는 ChartStyle -> infoBoxPlacement 로 설정됩니다.
. headerBox ( chartData : CTChartData ) 전설을 표시합니다.
. legends ( )각 데이터 포인트에 마커를 배치합니다.
모든 데이터 포인트의 평균에서 마커 라인을 보여줍니다.
. averageLine ( chartData : CTLineBarChartDataProtocol ,
markerName : " Average " ,
labelPosition : . yAxis ( specifier : " %.0f " ) ,
lineColour : . primary ,
strokeStyle : StrokeStyle ( lineWidth : 3 , dash : [ 5 , 10 ] ) )구성 가능한 관심 지점
. 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 ] ) )X 축을 따라 수직선을 추가합니다.
. xAxisGrid ( chartData : CTLineBarChartDataProtocol ) ChartData -> ChartStyle 내에서 설정.
Y 축을 따라 수평선을 추가합니다.
. yAxisGrid ( chartData : CTLineBarChartDataProtocol ) ChartData -> ChartStyle 내에서 설정.
x 축에 대한 레이블.
. xAxisLabels ( chartData : CTLineBarChartDataProtocol ) ChartData -> ChartStyle 내에서 설정.
Y 축을위한 자동으로 생성 된 레이블
. yAxisLabels ( chartData : CTLineBarChartDataProtocol , specifier : " %.0f " ) ChartData -> ChartStyle 내에서 설정.
yaxislabeltype :
case numeric // Auto generated, numeric labels.
case custom // Custom labels array 사용자 정의는 ChartData -> yAxisLabels 에서 설정됩니다
데이터의 추세를 보여주는 차트를 가로 지르는 라인.
. linearTrendLine ( chartData : CTLineBarChartDataProtocol ,
firstValue : Double ,
lastValue : Double ,
lineColour : ColourStyle ,
strokeStyle : StrokeStyle )각 데이터 포인트에 마커를 배치합니다.
. pointMarkers ( chartData : CTLineChartDataProtocol ) Data Set -> PointStyle .
FilllineChart 위에 독립 라인을 추가합니다.
. filledTopLine ( chartData : LineChartData ,
lineColour : ColourStyle ,
strokeStyle : StrokeStyle )반 불투명 한 채우기로 데이터 포인트 위에 하드 라인을 허용합니다.
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 )
}
}특정 요소 내부에는 음성 차트를 설명하는 데 도움이되는 추가 태그가 있습니다.
접근성의 현지화를 참조하십시오
모든 레이블은 현지화를 지원합니다. 그러나 음성을 지원하기 위해 숨겨진 일부 레이블이 있습니다. 접근성의 현지화를 참조하십시오
데모 프로젝트의 현지화 데모를 참조하십시오.
사용자가 데이터 포인트에 가장 가까운 영역에 닿을 때 데이터 포인트의 음성 설명. VoiceOver는 <chart title>, <data point value>, <data point description> 이라고합니다.
" %@ <local_description_of_a_data_point> " = " %@, <Description of a data point> " ; poiMarker 전에 읽으십시오. VoiceOver는 <poi marker>, <marker legend title>, <marker value> 라고합니다.
" P-O-I-Marker " = " P O I Marker " ;
" Average " = " Average " ; poiMarker 의 음성 설명. VoiceOver는 <POI-Marker>, <marker legend title>, <marker value> 이라고합니다.
" <local_marker_legend_title> %@ " = " local_marker_legend_title, %@ " ; axisLabel 앞에 읽으십시오. VoiceOver는 <axisLabel>, <marker value> 이라고합니다.
"X-Axis-Label" = "X Axis Label";
"Y-Axis-Label" = "Y Axis Label";
legend 전에 읽으십시오. VoiceOver는 <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 " ;
