Чарт | Сложенный полярный чарт
| :----: | :----: | :----: |
| |
|
|
Пузырьковый чарт | Чарт среднего значения области
| :----: | :----: | :----: |
| |
| |
Смешанный линейный чарт с колонками
| :----: | | :----:|
| | | |
**Чарт рассеяния | Чарт боксплота | Зеркальный чарт колонок** |
---|---|---|
![]() |
![]() |
![]() |
pod 'AAInfographics', :git => 'https://github.com/AAChartModel/AAChartKit-Swift.git'
pod install
или pod update
.AAInfographics
.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!)
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]),
])
//Объект чарта вызывает экземпляр объекта AAChartModel и рисует финальную графику
aaChartView?.aa_drawChartWithChartModel(aaChartModel!)
``` **Только обновить данные диаграммы (этот метод рекомендуется вызывать для динамического обновления данных ряда)**
```swift
// Только обновить данные диаграммы ряда
aaChartView?.aa_onlyRefreshTheChartDataWithChartModelSeries(chartModelSeriesArray)
Обновить диаграмму, кроме данных диаграммы (этот метод рекомендуется использовать для последующих обновлений после завершения первого рисования графики. Если вы хотите обновить только данные диаграммы, следует использовать функцию aa_onlyRefreshTheChartDataWithChartModelSeries
)
// Обновить диаграмму после того, как всё содержимое AAChartModel будет обновлено
aaChartView?.aa_refreshChartWholeContentWithChartModel(aaChartModel!)
- Примечание: следующая картинка ДЕМО представляет собой динамическую картинку GIF размером около 6 М. Если вы не видите динамическое предварительное изображение, это означает, что ресурсы изображения были загружены не полностью. В таком случае, пожалуйста, проявите терпение и дождитесь завершения загрузки содержимого. Возможно, вам потребуется перезагрузить эту страницу.*
Вы можете отслеживать сообщения о событиях касания пользователя, реализуя функцию делегата для экземпляра объекта 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)
)
Вы можете получить диаграмму со стилем настраиваемой всплывающей подсказки, как показано ниже👇
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")
Вы можете получить диаграмму со стилем настраиваемой всплывающей подсказки, как показано ниже👇
Диаграмма с сегментацией диапазона значений bands 🎀
Диаграмма с сегментацией диапазона значений lines 🧶
Диаграмма с сегментацией диапазона значений zones 🧱
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"
}
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] |
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 )