SwiftUICharts
v2.10.3
Swiftuiのチャート /プロットライブラリ。 MacOS、iOS、WatchOS、TVOSで動作し、アクセシビリティとローカリゼーション機能が組み込まれています。
デモプロジェクト
ドキュメント
APIにより多くのSwiftui感触を持つバージョン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 ) Swiftパッケージマネージャー
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 )
}
}特定の要素内には、ナレーションのチャートを説明するための追加のタグがあります。
アクセシビリティのローカリゼーションを参照してください
すべてのラベルはローカリゼーションをサポートしています。ただし、ナレーションをサポートするためにいくつかの隠されたラベルがあります。アクセシビリティのローカリゼーションを参照してください
デモプロジェクトのローカリゼーションデモを参照してください。
データポイントに最も近い領域にユーザーが触れたときのデータポイントの説明ボイスオーバー<chart title>, <data point value>, <data point description>表示されます。
" %@ <local_description_of_a_data_point> " = " %@, <Description of a data point> " ; poiMarkerの前に読んでください。ナレーションには<poi marker>, <marker legend title>, <marker value> 。
" P-O-I-Marker " = " P O I Marker " ;
" Average " = " Average " ; poiMarkerの説明。ナレーションに<POI-Marker>, <marker legend title>, <marker value>表示されます。
" <local_marker_legend_title> %@ " = " local_marker_legend_title, %@ " ; axisLabelの前に読みます。ナレーションには<axisLabel>, <marker value>表示されます。
"X-Axis-Label" = "X Axis Label";
"Y-Axis-Label" = "Y Axis Label";
legendの前に読んでください。ボイスオーバーには<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 " ;
