1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/iOS_wanglu-AAChartKit-Swift

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
README.md 25 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
gitlife-traslator Отправлено 02.12.2024 10:49 9759987

Чарт | Сложенный полярный чарт | :----: | :----: | :----: | | image1 | image1 | image1|

Пузырьковый чарт | Чарт среднего значения области | :----: | :----: | :----: | | image1 | image1 | |

Смешанный линейный чарт с колонками | :----: | | :----:| | | | image1 |

**Чарт рассеяния Чарт боксплота Зеркальный чарт колонок**
image1 image1 image1

Установка

CocoaPods (рекомендуется)

  1. Добавьте следующий контент в ваш проект Podfile:
pod 'AAInfographics', :git => 'https://github.com/AAChartModel/AAChartKit-Swift.git'
  1. Запустите pod install или pod update.
  2. Импортируйте AAInfographics.

Вручную (старый способ)

  1. Скачайте весь проект демо AAInfographicsDemo.
  2. Перетащите папку AAInfographics в свой проект.

Использование

  1. Создайте экземпляр объекта чарта: AAChartView:
        CGFloat chartViewWidth  = self.view.frame.size.width
        CGFloat chartViewHeight = self.view.frame.size.height
        aaChartView = AAChartView()
        aaChartView?.frame = CGRect(x:0,y:0,width:chartViewWidth,height:chartViewHeight)
        // устанавливаем высоту содержимого aaChartView
        // aaChartView?.contentHeight = self.view.frame.size.height
        self.view.addSubview(aaChartView!)
  1. Настройте свойства модели чарта: AAChartModel:
        aaChartModel = AAChartModel()
            .chartType(.column)//Может быть любой из типов чартов, перечисленных в `AAChartType`.
            .animationType(.bounce)
            .title("TITLE")//Заголовок чарта
            .subtitle("subtitle")//Субтитр чарта
            .dataLabelEnabled(false) //Включить или отключить метки данных. По умолчанию — false
            .tooltipValueSuffix("USD")//суффикс значения чарта в подсказке
            .categories(["Jan", "Feb", "Mar", "Apr", "May", "Jun",
                         "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"])
            .colorsTheme(["#fe117c","#ffc069","#06caf4","#7dffc0"])
            .series([
                AASeriesElement()
                    .name("Tokyo")
                    .data([7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]),
                AASeriesElement()
                    .name("New York")
                    .data([0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]),
                AASeriesElement()
                    .name("Berlin")
                    .data([0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]),
                AASeriesElement()
                    .name("London")
                    .data([3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]),
                    ])
  1. Нарисуйте чарт (этот метод вызывается только после создания экземпляра объекта AAChartView):
        //Объект чарта вызывает экземпляр объекта AAChartModel и рисует финальную графику
        aaChartView?.aa_drawChartWithChartModel(aaChartModel!)
``` **Только обновить данные диаграммы (этот метод рекомендуется вызывать для динамического обновления данных ряда)**

```swift
// Только обновить данные диаграммы ряда
aaChartView?.aa_onlyRefreshTheChartDataWithChartModelSeries(chartModelSeriesArray)

Обновить диаграмму, кроме данных диаграммы (этот метод рекомендуется использовать для последующих обновлений после завершения первого рисования графики. Если вы хотите обновить только данные диаграммы, следует использовать функцию aa_onlyRefreshTheChartDataWithChartModelSeries)

// Обновить диаграмму после того, как всё содержимое AAChartModel будет обновлено
aaChartView?.aa_refreshChartWholeContentWithChartModel(aaChartModel!)

Образцы инфографики

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

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

  • Столбчатая диаграмма

Столбчатая диаграмма

  • Гистограмма

Гистограмма

  • Специальная область диаграммы один

Специальная область диаграммы один

  • Специальная область диаграммы два

Специальная область диаграммы два

  • Специальная область диаграммы три

Специальная область диаграммы три

  • Полярная диаграмма

Полярная диаграмма

  • Радарная диаграмма

Радарная диаграмма

  • Круговая диаграмма

Круговая диаграмма

  • Пузырьковая диаграмма

Пузырьковая диаграмма

  • Диаграмма рассеяния

Диаграмма рассеяния

  • Диаграмма с областями

Диаграмма с областями

  • Ступенчатая диаграмма с областями

Ступенчатая диаграмма с областями

  • Смешанная диаграмма

Смешанная диаграмма

Дополнительные графики

  • Примечание: следующая картинка ДЕМО представляет собой динамическую картинку GIF размером около 6 М. Если вы не видите динамическое предварительное изображение, это означает, что ресурсы изображения были загружены не полностью. В таком случае, пожалуйста, проявите терпение и дождитесь завершения загрузки содержимого. Возможно, вам потребуется перезагрузить эту страницу.*

AAChartKit-Live

Специальные инструкции

Поддержка событий касания пользователя и перемещения по экрану

Вы можете отслеживать сообщения о событиях касания пользователя, реализуя функцию делегата для экземпляра объекта AAChartView.

 // Установить события делегата AAChartView
 aaChartView!.delegate = self as AAChartViewDelegate
 // установить поддержку событий касания пользователя AAChartModel
 aaChartModel = aaChartModel!.touchEventEnabled(true)

 // реализовать функцию делегата событий касания пользователя для AAChartView
extension CommonChartVC: AAChartViewDelegate {
   open func aaChartView(_ aaChartView: AAChartView, moveOverEventMessage: AAMoveOverEventMessageModel) {
       print("🔥selected point series element name: \(moveOverEventMessage.name ?? "")")
   }
}

Полученные сообщения о событиях касания содержат следующее содержание:

public class AAMoveOverEventMessageModel: NSObject {
``` ### Поддержка пользовательского стиля диаграммы AATooltip через функцию JavaScript

Как мы все знаем, AAInfographics поддерживает использование HTML-строк. В большинстве случаев HTML-строки headerFormat, pointFormat и footerFormat достаточно для настройки содержимого строки всплывающей подсказки диаграммы. Однако иногда потребности приложения настолько специфичны, что их сложно удовлетворить. В этом случае вы можете настроить стиль всплывающей подсказки с помощью функции JavaScript.

Например:

* Настройка свойств объекта экземпляра AATooltip следующим образом:
```js
         aaOptions.tooltip?
            .useHTML(true)
            .formatter("""
function () {
        return ' 🌕 🌖 🌗 🌘 🌑 🌒 🌓 🌔 <br/> '
        + ' Support JavaScript Function Just Right Now !!! <br/> '
        + ' The Gold Price For <b>2020 '
        +  this.x
        + ' </b> Is <b> '
        +  this.y
        + ' </b> Dollars ';
        }
""")
            .valueDecimals(2)//установка точности до нескольких знаков после запятой//установка точности до нескольких знаков после запятой
            .backgroundColor("#000000")
            .borderColor("#000000")
            .style(AAStyle()
                .color("#FFD700")
                .fontSize(12)
        )

Вы можете получить диаграмму со стилем настраиваемой всплывающей подсказки, как показано ниже👇

  • Настройка свойств объекта экземпляра AATooltip следующим образом:
        aaOptions.tooltip?
            .useHTML(true)
            .formatter(#"""
function () {
        let colorsArr = ["mediumspringgreen", "deepskyblue", "red", "sandybrown"];
        let wholeContentString ='<span style=\"' + 'color:lightGray; font-size:13px\"' + '>◉ Time: ' + this.x + ' year</span><br/>';
        for (let i = 0;i < 4;i++) {
            let thisPoint = this.points[i];
            let yValue = thisPoint.y;
            if (yValue != 0) {
                let spanStyleStartStr = '<span style=\"' + 'color:'+ colorsArr[i] + '; font-size:13px\"' + '>◉ ';
                let spanStyleEndStr = '</span> <br/>';
                wholeContentString += spanStyleStartStr + thisPoint.series.name + ': ' + thisPoint.y + '℃' + spanStyleEndStr;
            }
        }
        return wholeContentString;
    }
"""#)
            .backgroundColor("#050505")
            .borderColor("#050505")

Вы можете получить диаграмму со стилем настраиваемой всплывающей подсказки, как показано ниже👇 colorfulTooltipChart

Поддержка сегментации диапазона значений

  • Диаграмма с сегментацией диапазона значений bands 🎀 plotBandsChart

  • Диаграмма с сегментацией диапазона значений lines 🧶 plotLinesChart

  • Диаграмма с сегментацией диапазона значений zones 🧱 seriesZonesChart

Поддерживаемые типы диаграмм на данный момент

enum AAChartType: String {
    case column  = "column"  //column chart
    case bar  = "bar"  //bar chart 
    case area  = "area"  //area chart 
    case areaspline  = "areaspline"  //areaspline chart
    case line  = "line"  //line chart
    case spline  = "spline"  //spline chart
    case scatter  = "scatter"  //scatter chart 
    case pie  = "pie"  //pie chart
    case bubble  = "bubble"  //bubble chart  
    case pyramid  = "pyramid"  //pyramid chart
    case funnel  = "funnel"  //funnel chart
    case columnrange  = "columnrange"  //column range chart
    case arearange  = "arearange"  //area range chart
    case areasplinerange  = "areasplinerange" //area spline range chart
    case boxplot  =

``` **Boxplot** //boxplot chart

    **case waterfall** = "waterfall" //waterfall chart
    **case polygon** = "polygon" //polygon chart
}

### Supported zoom guesture types for now
```swift
enum AAChartZoomType: String {
    case none = "none"
    case x = "x"
    case y = "y"
    case xy = "xy"
}

Supported animation type for now

public enum AAChartAnimationType: String {
    case easeInQuad = "easeInQuad"
    case easeOutQuad = "easeOutQuad"
    case easeInOutQuad = "easeInOutQuad"
    case easeInCubic = "easeInCubic"
    case easeOutCubic = "easeOutCubic"
    case easeInOutCubic = "easeInOutCubic"
    case easeInQuart = "easeInQuart"
    case easeOutQuart = "easeOutQuart"
    case easeInOutQuart = "easeInOutQuart"
    case easeInQuint = "easeInQuint"
    case easeOutQuint = "easeOutQuint"
    case easeInOutQuint = "easeInOutQuint"
    case easeInSine = "easeInSine"
    case easeOutSine = "easeOutSine"
    case easeInOutSine = "easeInOutSine"
    case easeInExpo = "easeInExpo"
    case easeOutExpo = "easeOutExpo"
    case easeInOutExpo = "easeInOutExpo"
    case easeInCirc = "easeInCirc"
    case easeOutCirc = "easeOutCirc"
    case easeInOutCirc = "easeInOutCirc"
    case easeOutBounce = "easeOutBounce"
    case easeInBack = "easeInBack"
    case easeOutBack = "easeOutBack"
    case easeInOutBack = "easeInOutBack"
    case elastic = "elastic"
    case swingFromTo = "swingFromTo"
    case swingFrom = "swingFrom"
    case swingTo = "swingTo"
    case bounce = "bounce"
    case bouncePast = "bouncePast"
    case easeFromTo = "easeFromTo"
    case easeFrom = "easeFrom"
    case easeTo = "easeTo"
}

Here are the ten concrete animation types of AAInfographics

Back Bounce Circ Cubic Elastic
![][1] ![][2] ![][3] ![][4] ![][5]
Expo Quad Quart Quint Sine
:---: :---: :---: :---: :---:
![][6] ![][7] ![][8] ![][9] ![][10]

About AAChartModel

  • AAChartModel:chart basic properties instruction

Property name Property type Description Value Range
title String The chart title Any valid string
subtitle String The chart subtitle Any valid string
chartType AAChartType The default series type for the chart. Can be any of the chart types listed under AAChartType. .column, .bar, .area, .areaSpline, .line, .spline, .pie, .bubble, .scatter, .pyramid, .funnel, .areaRange, .columnRange
stacking AAChartStackingType Whether to stack the values of each series on top of each other. Possible values are null to disable, "normal" to stack by value or "percent". When stacking is enabled, data must be sorted in ascending X order .none, .normal, .percent
symbol AAChartSymbolType A predefined shape or symbol for the marker. When null, the symbol is pulled from options.symbols. Other possible values are "circle", "square", "diamond", "triangle" and "triangle-down" .circle, .square, .diamond, .triangle, .triangleDown
public var subtitleFontWeight: AAChartFontWeightType? // Вес шрифта подзаголовка диаграммы

// Цвет шрифта меток осей X и Y диаграммы public var axesTextColor: String?

// Тип диаграммы по умолчанию. Может быть любым из типов диаграмм, перечисленных в AAChartType. По умолчанию — линия public var chartType: AAChartType?

// Складывать ли значения каждой серии друг на друга. Возможные значения: null для отключения, «normal» для стекирования по значению или «percent». Когда стекирование включено, данные должны быть отсортированы в порядке возрастания X public var stacking: AAChartStackingType?

// Предопределённая форма или символ маркера. Когда значение равно null, символ берётся из options.symbols. Другие возможные значения: «circle», «square», «diamond», «triangle» и «triangle-down» public var markerSymbol: AAChartSymbolType?

// Стиль символа маркера public var markerSymbolStyle: AAChartSymbolStyleType?

// Определяет, в каких измерениях пользователь может масштабировать изображение, перетаскивая мышь. Может быть одним из x, y или xy public var zoomType: AAChartZoomType?

// Инвертировать ли оси так, чтобы ось X была вертикальной, а ось Y — горизонтальной. Если значение true, ось X по умолчанию инвертируется. Если в диаграмме есть серия столбцов, она будет инвертирована автоматически. Инверсия диаграммы не имеет эффекта, если в ней нет декартовых серий или если это полярная диаграмма. По умолчанию — false public var inverted: Bool?

// Переворачивать ли ось так, чтобы наибольшее число было ближе к началу координат. Если диаграмма инвертирована, ось X переворачивается по умолчанию. По умолчанию — false public var xAxisReversed: Bool?

// Переворачивать ли ось так, чтобы наибольшее число было ближе к началу координат. Если диаграмма инвертирована, ось Y переворачивается по умолчанию. По умолчанию — false public var yAxisReversed: Bool?

// Включить или отключить перекрестие public var crosshairs: Bool?

// Включение или отключение градиента цвета public var gradientColorEnable: Bool?

// Когда значение true, декартовы диаграммы, такие как line, spline, area и column, преобразуются в полярную систему координат. Требуется AAHighchartsMore.js. По умолчанию — false public var polar: Bool?

// Отступ слева public var marginLeft: Float?

// Отступ справа public var marginRight: Float?

// Нижний отступ public var marginBottom: Float?

// Включить или отключить метки данных. По умолчанию — false public var dataLabelsEnabled: Bool?

// Цвет шрифта меток данных public var dataLabelsFontColor: String?

// Размер шрифта меток данных public var dataLabelsFontSize: Float?

// Вес шрифта меток данных public var dataLabelsFontWeight: AAChartFontWeightType?

// Включить или отключить метки оси. По умолчанию — true public var xAxisLabelsEnabled: Bool?

// Категории public var categories: Array?

// Ширина линий сетки, проходящих через деления оси. По умолчанию — 0 public var xAxisGridLineWidth: Float?

// Видимость оси X public var xAxisVisible: Bool?

// Интервал между делениями оси X public var xAxisTickInterval: Int?

// Видимость оси Y public var yAxisVisible: Bool?

// Включить или отключить метки оси Y. По умолчанию — true public var yAxisLabelsEnabled: Bool?

// Текст заголовка оси Y public var yAxisTitle: String?

// Толщина линии оси Y public var yAxisLineWidth: Float?

// Ширина линий сетки, проходящих через деления оси Y. По умолчанию — 1 public var yAxisGridLineWidth: Float?

// Минимальное значение оси Y public var yAxisMin: Float?

// Максимальное значение оси Y public в yAxisMax: Float?

// Разрешить ли десятичные знаки для значений оси Y или нет public var yAxisAllowDecimals: Bool?

// Включать ли всплывающую подсказку public var tooltipEnabled: Bool?

// Суффикс значения во всплывающей подсказке public var tooltipValueSuffix: String?

// Включить ли перекрестие во всплывающей подсказке public var tooltipCrosshairs: Bool?

// Цветовая тема. Массив, содержащий цвета по умолчанию для серий диаграммы. Когда все цвета использованы, новые цвета берутся с начала снова. По умолчанию: ["#bb250c","#f67210","#fde680","#257679","#f1c6c5"] public var colorsTheme: Array?

// Серии public var series: Array?

// Включить или отключить легенду. По умолчанию — true [4]: https://raw.githubusercontent.com/adad184/MMTweenAnimation/master/Images/4.gif [5]: https://raw.githubusercontent.com/adad184/MMTweenAnimation/master/Images/5.gif [6]: https://raw.githubusercontent.com/adad184/MMTweenAnimation/master/Images/6.gif [7]: https://raw.githubusercontent.com/adad184/MMTweenAnimation/master/Images/7.gif [8]: https://raw.githubusercontent.com/adad184/MMTweenAnimation/master/Images/8.gif [9]: https://raw.githubusercontent.com/adad184/MMTweenAnimation/master/Images/9.gif [10]: https://raw.githubusercontent.com/adad184/MMTweenAnimation/master/Images/10.gif

Опубликовать ( 0 )

Вы можете оставить комментарий после Вход в систему

1
https://api.gitlife.ru/oschina-mirror/iOS_wanglu-AAChartKit-Swift.git
git@api.gitlife.ru:oschina-mirror/iOS_wanglu-AAChartKit-Swift.git
oschina-mirror
iOS_wanglu-AAChartKit-Swift
iOS_wanglu-AAChartKit-Swift
master