Красивые и полнофункциональные диаграммы AmCharts в 1С на основе HTML и JavaScript, полностью offline, все виды, версия 3.2.0

Опубликовал pfihr в раздел Программирование - Работа с интерфейсом

Полноценная обработка, содержащая оффлайн версию JavaScript графиков AmCharts версии 3.2.0. С обработкой нажатия мыши.
Все виды графиков: Column, Bar, Line, Area, Step, Smoothed line, Candlestick, Pie/Donut, Radar/Polar, XY/Scatter/Bubble, Bullet, Funnel/Pyramid.

Полноценная обработка, содержащая оффлайн версию JavaScript графиков AmCharts версии 3.2.0.

Реализованы все объекты из http://www.amcharts.com/javascript-charts/.

Обрабатывается нажатие мыши на точку/ребро графика. Пример обработки нажатия смотрите на графике "глубина/день".

Работают все виды графиков: Column, Bar, Line, Area, Step, Smoothed line, Candlestick, Pie/Donut, Radar/Polar, XY/Scatter/Bubble, Bullet, Funnel/Pyramid. 

Использовать не просто, а очень просто. Мой ответ доминикане и tushich.

Пример использования (из текста обработки):

Функция ЗаполнитьHTML(тз,об,вар)
  // RADAR CHART
   амОснова = AmChartsПолучитьОснову("AmRadarChart",AmChartsВременныйКаталогКартинок());
   амОснова.Параметры["startDuration"] = 2;
   амОснова.Параметры["categoryField"] = "country";
 
   // VALUE AXIS
   амОбъект = AmChartsСоздатьОбъект("valueAxis","ValueAxis","");
   амОбъект.Параметры.position = "bottom";
   амОбъект.Параметры.axisAlpha = 0.15;
   амОбъект.Параметры.dashLength = 3;
   амОбъект.Параметры.axisTitleOffset = 20;
   амОбъект.Параметры.gridCount = 5;
   амОснова.Объекты.Добавить(амОбъект);
 
   // GRAPH
   амОбъект = AmChartsСоздатьОбъект("graph","AmGraph","");
   амОбъект.Параметры.valueField = "litres";
   амОбъект.Параметры.bullet = "round";
   амОбъект.Параметры.balloonText = "[[value]] litres of beer per year";
   амОснова.Объекты.Добавить(амОбъект);
   амОснова.ТелоФункции = AmChartsПолучитьТелоФункции(амОснова);
   амОснова.Данные = AmChartsДанные(тз);
   
  Возврат AmChartsПолучитьHTMLТекст(амОснова,об);
КонецФункции

Вот что получается:

Файлы

Наименование Файл Дата Размер Кол. Скачив.
amCharts3.2.0.epf
.epf 125,59Kb
11.11.13
125
.epf 11.11.13 125,59Kb 125 Скачать

См. также

Лучшие комментарии

22. pfihr 11.11.2013 07:58
Если Вы встретились с проблемами масштабирования курсором, исправьте в коде макета следующие функции:

b.prototype.listenTo = function(a, b, c) {
var d = a.events[b], e = !1, g = 0;
for (h = d.length;g < h;g++) {
d[g].handler == c && d[g].scope == this && (e = !0);
}
return e ? d.length : d.push({handler:c, scope:this});
}, b.prototype.addListener = function(a, b, c) {
var d = this.events[a], e = !1, g = 0;
for (h = d.length;g < h;g++) {
d[g].handler == b && d[g].scope == c && (e = !0);
}
return e ? d.length : d.push({handler:b, scope:c});
}
+ 1 [ sergcool83; ]
# Ответить
3. Tedman 05.11.2013 15:21
(2) Yashazz,
На сколько мне известна данная тематика (а я в данный момент чем-то вроде этого же занимаюсь), то:
Немного не понял, что потребуется для работы?


AmChartsПолучитьОснову - это что за зверь и где объявлен?

Как я понимаю, это структура с необходимыми настройками для вывода диаграмм. Объявлен где-то глубже, а вот где и как автор в статье описывать не стал.
Взлетит ли на УФ?

На них, родимых, судя по скринам, в основном, и летает.
+ 1 [ pfihr; ]
# Ответить

Комментарии

1. script 01.11.2013 23:46
Поддерживается ли Диаграмма Ганта ?
Ответили: (4) (14)
# Ответить
2. Yashazz 05.11.2013 12:49
Немного не понял, что потребуется для работы? AmChartsПолучитьОснову - это что за зверь и где объявлен?
Взлетит ли на УФ?
Ответили: (3) (12)
# Ответить
3. Tedman 05.11.2013 15:21
(2) Yashazz,
На сколько мне известна данная тематика (а я в данный момент чем-то вроде этого же занимаюсь), то:
Немного не понял, что потребуется для работы?


AmChartsПолучитьОснову - это что за зверь и где объявлен?

Как я понимаю, это структура с необходимыми настройками для вывода диаграмм. Объявлен где-то глубже, а вот где и как автор в статье описывать не стал.
Взлетит ли на УФ?

На них, родимых, судя по скринам, в основном, и летает.
+ 1 [ pfihr; ]
# Ответить
4. fuxic (файл скачал) 05.11.2013 16:59
(1) ради функционала-аналога диаграмм Ганта стал разбираться с амЧартом. В принципе механизм вполне заложен в библиотеке, но на примерах сайта построить сходу не получилось.

Буду рад если реализуете аналог Ганта на амчарте. Исправить floating bar на работу с датами и это уже заработает. Надо только будет шкалу и фильтры под конкретную задачу.
Ответили: (11)
# Ответить
5. fuxic (файл скачал) 05.11.2013 17:00
Не совсем понял то, что убрана ссылка на сайт библиотеки. Это вроде прямое нарушение бесплатной лицензии.
Ответили: (13)
# Ответить
6. AlexBugs 06.11.2013 07:45
А на 7.7. такое взлетит? А то очень хочется....
Ответили: (7)
# Ответить
7. ADirks (файл скачал) 06.11.2013 09:24
8. DAnry 06.11.2013 14:18
Действительно красиво.
# Ответить
9. randa (файл скачал) 06.11.2013 15:33
афигенно
# Ответить
10. kiruha (файл скачал) 06.11.2013 16:27
Наконец то нормальные диаграммы
# Ответить
11. pfihr 06.11.2013 23:58
(4) fuxic, попробую реализовать. Сначала надо потренироваться в консоли jsfiddle, затем это легко переносится в мою обработку.

Прикрепленные файлы:

PicsArt_1370527443351.png
# Ответить
12. pfihr 06.11.2013 23:59
(2) Yashazz, взлетит. Кроме того, взлетит и на вэб-клиенте, и на мобильных устройствах.
# Ответить
13. pfihr 06.11.2013 23:59
(5) fuxic, Вы всегда можете вернуть ее в сам чарт, а я оставил ее в заголовке формы.
# Ответить
14. pfihr 07.11.2013 00:00
(1) script, только в варианте floating serial chart. См. скриншоты.
# Ответить
15. sikuda (файл скачал) 07.11.2013 13:40
Наконец-то хоть движения есть в графиках. А то как-то одиноко.
За старания безусловный +,
Чистота лицензий это святое (на сайте http://www.amcharts.com):
Q: Can I use amCharts for free?
A: Yes, the only limitation of the free version is that a small link to this web site will be displayed in the top left corner of your charts.
Что-то у тебя в верхнем левом угле ничего нет.
Ответили: (16) (19)
# Ответить
16. qwed557 07.11.2013 22:45
(15) sikuda, есть же, или раньше не было а уже добавили, по крайней мере я на всех скринах вижу
Ответили: (17)
# Ответить
17. sikuda (файл скачал) 08.11.2013 09:34
(16) qwed557,
Да вижу, что-то вчера глюкнуло.

Вопрос автору: Разобрались ли Вы в тонком клиенте Windows, что бы нажатие мышки правильно определяло объект. Если объект не прямоугольный? Pie например.
Ответили: (20)
# Ответить
18. movel (файл скачал) 08.11.2013 11:31
Скажите, а как, например, с помощью этой библиотеки организовать вывод если количество переменных изменяется? Т.е. выбираешь сколько графиков будет отображаться - 1 или 2, например? Формировать разные наборы вызова?
Ответили: (21)
# Ответить
19. pfihr 10.11.2013 11:11
(15) sikuda, я вынес ссылку на форму. В самом html поле эта ссылка часто затирала полезные данные. Это забавно, и даже видно на примере микро-чартов на сайте авторов библиотеки (откройте пример в jsfiddle) :)
# Ответить
20. pfihr 10.11.2013 11:12
(17) sikuda, пока не разбирался, не было необходимости. На Pie диаграмме нажатие мышью отодвигает сегмент от остальных сегментов, это встроенный функционал.
# Ответить
21. pfihr 10.11.2013 11:13
(18) movel, можно отображать любое количество графиков. Сколько объектов типа AmGraph добавите, столько их и будет. Разные наборы вызова я делаю так: создается одна таблица значений со всеми колонками для всех диаграмм. Дальше, заполняются данные, последовательно добавляются строки. Значения устанавливаются только для тех колонок, которые нужны для определенного графика (объекта AmGraph). В нужном объекте AmGraph указываются только эти колонки. Для следующего графика в т.з. добавляются новые строки, и заполняются данные других колонок таблицы значений, и для объекта AmGraph они указываются как источник. Смотрите пример на графике глубина-день, я там использовал 13 различных графиков в одной таблице значений. Библиотека умная, и строки/колонки с незаполненными значениями не учитывает при построении.
# Ответить
22. pfihr 11.11.2013 07:58
Если Вы встретились с проблемами масштабирования курсором, исправьте в коде макета следующие функции:

b.prototype.listenTo = function(a, b, c) {
var d = a.events[b], e = !1, g = 0;
for (h = d.length;g < h;g++) {
d[g].handler == c && d[g].scope == this && (e = !0);
}
return e ? d.length : d.push({handler:c, scope:this});
}, b.prototype.addListener = function(a, b, c) {
var d = this.events[a], e = !1, g = 0;
for (h = d.length;g < h;g++) {
d[g].handler == b && d[g].scope == c && (e = !0);
}
return e ? d.length : d.push({handler:b, scope:c});
}
+ 1 [ sergcool83; ]
# Ответить
23. pfihr 11.11.2013 09:31
В новой версии 3.2.0 ошибка зума исправлена (мной). Разработчики пока не исправили.
Так же много новых изменений, упрощена процедура программирования.
# Ответить
24. mars207 28.01.2014 18:37
Очень полезная обработка. Плюс обязательно добавлю. Но есть вопрос. А можно ли сформировать диаграмму такого типа как указано во вложении к комментарию? Тип диаграммы очень похож на "3D stacked column chart", но я бы хотел расширить его возможности. Чтобы это было похоже на более изощренную сводную диаграмму. Excell такое умеет...

Прикрепленные файлы:

Диаграмма.png
# Ответить
25. mars207 28.01.2014 18:39
забыл прикрепить файл.
# Ответить
26. pfihr 31.01.2014 21:35
Не фижу файл :)
# Ответить
27. KlesAlex (файл скачал) 24.03.2015 17:38
Сколько мануал не курил а так и не понял как нижнюю ось сделать не числовую а в виде дат
чтобы рисовать диаграмму ганта.
Все тлен(
# Ответить
28. 5150 07.04.2015 13:54
Доброго! а возможность экспорта в *.jpg или вывода на печать есть? даже из их онлайн конструктора интереса ради копировал html код, в котором кнопка (экспорта) есть, а в самой 1с-ке ее нет.
# Ответить
29. avz_1C (файл скачал) 29.04.2015 18:55
Спасибо, Автор!
Чрезвычайно полезная вещь!
Плюс поставил.
Жалею, нельзя два-три за раз поставить.
# Ответить
30. advanter (файл скачал) 19.02.2016 22:36
Отличные графики.
Чрезвычайно просто в применении и достойно в использовании. Плюсик, однозначно.
# Ответить
31. pfihr 05.03.2016 14:19
Спасибо коллеги!
Заказывайте что нибудь этакое, сделаю.
Рекомендую посмотреть ролик на тему отображения заказа покупателя на Яндекс.Картах.
Ролик на Youtube
Роман Цованян
# Ответить
Внимание! За постинг в данном форуме $m не начисляются.
Внимание! Для написания сообщения необходимо авторизоваться
Текст сообщения*
Прикрепить файл