Скачать SwiftUICharts - Скачать исходный код SwiftUICharts

Swiftuicharts

Диаграммы / библиотека заговора для Swiftui. Работает на MacOS, iOS, WatchOS и TVOS и имеет встроенные функции доступности и локализации.

Демонстрационный проект

Документация

Работая над версией 3 с более быстрым чувством API.

Типы диаграмм

Линейная диаграмма
Заполненная линейная диаграмма
Многочисленная диаграмма
Линейная диаграмма дальнейшей линии
Барная карта
Барная карта
Сгруппированная барная карта
Сложная барная карта
Круговая диаграмма
Диаграмма пончиков

Линейные диаграммы

Линейная диаграмма

Пример линейной диаграммы

Использует модель данных 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 Package Manager

 File > Swift Packages > Add Package Dependency...

import SwiftUICharts

Если у вас есть проблемы с представлениями неправильно обновляются, добавьте .id() к вашему представлению.

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

Просмотреть модификаторы

Прикосновение наложения
Информация
Плавающая информационная коробка
Заголочная коробка
Легенды
Средняя линия
Y точка интересов
X Ось сетка
Y ось сетка
X Ос. Метки
Y Ось на этикетке
Линейная линия тренда
Точечные маркеры

Порядок модификаторов представления - это то, что важно, поскольку модификаторы - это различные типы стеков, которые обертывают предыдущие представления.

Все типы графиков

Прикосновение наложения

Обнаружает вход либо от прикосновения указателя. Находит ближайшую точку данных и отображает соответствующую информацию, где указана.

Расположение информационного окна установлено в ChartStyle -> infoBoxPlacement .

 . touchOverlay ( chartData : CTChartData , specifier : String , unit : TouchUnit )

chartdata: модель данных диаграммы.
Спецификатор: десятичная точность для ярлыков.
ЕДИНИЦА: ЕДИНИЦА, чтобы поставить до или после значения.

Настройка в данных диаграммы -> Стиль диаграммы

Информация

Отображает информацию из наложения Touch, если InfoBoxPlacement установлена на .infoBox .

Расположение информационного окна установлено в ChartStyle -> infoBoxPlacement .

 . infoBox ( chartData : CTChartData )

chartdata: модель данных диаграммы.

Плавающая информационная коробка

Отображает информацию из наложения Touch, если InfoBoxPlacement установлена на .floating

Расположение информационного окна установлено в ChartStyle -> infoBoxPlacement .

 . floatingInfoBox ( chartData : CTChartData )

chartdata: модель данных диаграммы.

Заголочная коробка

Отображает метаданные о диаграмме, установленные в Chart Data -> ChartMetadata

Отображает информацию из наложения Touch, если 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 ] ) )

chartdata: модель данных диаграммы.
Markername: название маркера, для легенды.
Метка: Опция для отображения значения маркеров встроен в соответствии с маркером.
Labelcolour: цвет текста.
Лейблбанген: цвет фона.
LineColour: цвет линии.
Strokestyle: стиль инсульта.

Y точка интересов

Настраиваемая точка интереса

 . 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: модель данных диаграммы.
Markername: название маркера, для легенды.
Markervalue: ценность Mark
Метка: Опция для отображения значения маркеров встроен в соответствии с маркером.
Labelcolour: цвет текста.
Лейблбанген: цвет фона.
LineColour: цвет линии.
Strokestyle: стиль инсульта.
Возврат: новый вид, содержащий диаграмму с маркерой, в указанном значении.

X Ось сетка

Добавляет вертикальные линии вдоль оси x.

 . xAxisGrid ( chartData : CTLineBarChartDataProtocol )

Установка в ChartData -> ChartStyle .

Y ось сетка

Добавляет горизонтальные линии вдоль оси Y.

 . yAxisGrid ( chartData : CTLineBarChartDataProtocol )

Установка в ChartData -> ChartStyle .

X Ос. Метки

Метки для оси x.

 . xAxisLabels ( chartData : CTLineBarChartDataProtocol )

Установка в ChartData -> ChartStyle .

Y Ось на этикетке

Автоматически сгенерированные этикетки для оси 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 " ;

Расширять