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













Полноценная обработка, содержащая оффлайн версию 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Текст(амОснова,об);
КонецФункции

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

41 Comments

  1. script

    Поддерживается ли Диаграмма Ганта ?

    Reply ↓
  2. Yashazz

    Немного не понял, что потребуется для работы? AmChartsПолучитьОснову — это что за зверь и где объявлен?

    Взлетит ли на УФ?

    Reply ↓
  3. Tedman

    (2) Yashazz,

    На сколько мне известна данная тематика (а я в данный момент чем-то вроде этого же занимаюсь), то:

    Немного не понял, что потребуется для работы?

    1С

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

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

    Взлетит ли на УФ?

    На них, родимых, судя по скринам, в основном, и летает.

    Reply ↓
  4. fuxic

    (1) ради функционала-аналога диаграмм Ганта стал разбираться с амЧартом. В принципе механизм вполне заложен в библиотеке, но на примерах сайта построить сходу не получилось.

    Буду рад если реализуете аналог Ганта на амчарте. Исправить floating bar на работу с датами и это уже заработает. Надо только будет шкалу и фильтры под конкретную задачу.

    Reply ↓
  5. fuxic

    Не совсем понял то, что убрана ссылка на сайт библиотеки. Это вроде прямое нарушение бесплатной лицензии.

    Reply ↓
  6. AlexBugs

    А на 7.7. такое взлетит? А то очень хочется….

    Reply ↓
  7. ADirks

    (6) взлетит.

    посмотри http://www.1cpp.ru/forum/YaBB.pl?num=1316457428/all

    особенно начиная с http://www.1cpp.ru/forum/YaBB.pl?num=1316457428/12#12

    Reply ↓
  8. DAnry

    Действительно красиво.

    Reply ↓
  9. randa

    афигенно

    Reply ↓
  10. kiruha

    Наконец то нормальные диаграммы

    Reply ↓
  11. pfihr

    (4) fuxic, попробую реализовать. Сначала надо потренироваться в консоли jsfiddle, затем это легко переносится в мою обработку.

    Reply ↓
  12. pfihr

    (2) Yashazz, взлетит. Кроме того, взлетит и на вэб-клиенте, и на мобильных устройствах.

    Reply ↓
  13. pfihr

    (5) fuxic, Вы всегда можете вернуть ее в сам чарт, а я оставил ее в заголовке формы.

    Reply ↓
  14. pfihr

    (1) script, только в варианте floating serial chart. См. скриншоты.

    Reply ↓
  15. sikuda

    Наконец-то хоть движения есть в графиках. А то как-то одиноко.

    За старания безусловный +,

    Чистота лицензий это святое (на сайте 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.

    Что-то у тебя в верхнем левом угле ничего нет.

    Reply ↓
  16. qwed557

    (15) sikuda, есть же, или раньше не было а уже добавили, по крайней мере я на всех скринах вижу

    Reply ↓
  17. sikuda

    (16) qwed557,

    Да вижу, что-то вчера глюкнуло.

    Вопрос автору: Разобрались ли Вы в тонком клиенте Windows, что бы нажатие мышки правильно определяло объект. Если объект не прямоугольный? Pie например.

    Reply ↓
  18. movel

    Скажите, а как, например, с помощью этой библиотеки организовать вывод если количество переменных изменяется? Т.е. выбираешь сколько графиков будет отображаться — 1 или 2, например? Формировать разные наборы вызова?

    Reply ↓
  19. pfihr

    (15) sikuda, я вынес ссылку на форму. В самом html поле эта ссылка часто затирала полезные данные. Это забавно, и даже видно на примере микро-чартов на сайте авторов библиотеки (откройте пример в jsfiddle) 🙂

    Reply ↓
  20. pfihr

    (17) sikuda, пока не разбирался, не было необходимости. На Pie диаграмме нажатие мышью отодвигает сегмент от остальных сегментов, это встроенный функционал.

    Reply ↓
  21. pfihr

    (18) movel, можно отображать любое количество графиков. Сколько объектов типа AmGraph добавите, столько их и будет. Разные наборы вызова я делаю так: создается одна таблица значений со всеми колонками для всех диаграмм. Дальше, заполняются данные, последовательно добавляются строки. Значения устанавливаются только для тех колонок, которые нужны для определенного графика (объекта AmGraph). В нужном объекте AmGraph указываются только эти колонки. Для следующего графика в т.з. добавляются новые строки, и заполняются данные других колонок таблицы значений, и для объекта AmGraph они указываются как источник. Смотрите пример на графике глубина-день, я там использовал 13 различных графиков в одной таблице значений. Библиотека умная, и строки/колонки с незаполненными значениями не учитывает при построении.

    Reply ↓
  22. pfihr

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

    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});

    }

    Reply ↓
  23. pfihr

    В новой версии 3.2.0 ошибка зума исправлена (мной). Разработчики пока не исправили.

    Так же много новых изменений, упрощена процедура программирования.

    Reply ↓
  24. mars207

    Очень полезная обработка. Плюс обязательно добавлю. Но есть вопрос. А можно ли сформировать диаграмму такого типа как указано во вложении к комментарию? Тип диаграммы очень похож на «3D stacked column chart», но я бы хотел расширить его возможности. Чтобы это было похоже на более изощренную сводную диаграмму. Excell такое умеет…

    Reply ↓
  25. mars207

    забыл прикрепить файл.

    Reply ↓
  26. pfihr

    Не фижу файл 🙂

    Reply ↓
  27. KlesAlex

    Сколько мануал не курил а так и не понял как нижнюю ось сделать не числовую а в виде дат

    чтобы рисовать диаграмму ганта.

    Все тлен(

    Reply ↓
  28. 5150

    Доброго! а возможность экспорта в *.jpg или вывода на печать есть? даже из их онлайн конструктора интереса ради копировал html код, в котором кнопка (экспорта) есть, а в самой 1с-ке ее нет.

    Reply ↓
  29. avz_1C

    Спасибо, Автор!

    Чрезвычайно полезная вещь!

    Плюс поставил.

    Жалею, нельзя два-три за раз поставить.

    Reply ↓
  30. advanter

    Отличные графики.

    Чрезвычайно просто в применении и достойно в использовании. Плюсик, однозначно.

    Reply ↓
  31. pfihr

    Спасибо коллеги!

    Заказывайте что нибудь этакое, сделаю.

    Рекомендую посмотреть ролик на тему отображения заказа покупателя на Яндекс.Картах.

    Ролик на Youtube

    Роман Цованян

    Reply ↓
  32. ALagutin

    Интересно а можно ли сделать вот такую диаграмму с картой:

    На которой будет виден регион России и некий бабл с данными

    Reply ↓
  33. Pilokarpios

    Толстый клиент, управляемые формы, 1С 8.3, что я не так делаю, или настройки IE нужно править? Или компоненты или части с сайта разработчика берутся, т.е. нужен online?

    Reply ↓
  34. sir

    Было бы круто еще добавить классы «AmStockChart» «StockGraph»

    но единственно я не разобрался amcharts умеет только отрисовывать индикаторы или и рассчитывать тоже ?

    Reply ↓
  35. c300pm

    обясните мне, тупому человеку, как это работает????

    Reply ↓
  36. acanta

    (32)конечно можно. Меню файл новый создать.

    Reply ↓
  37. NittenRenegade

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

    Reply ↓
  38. NittenRenegade

    (35) элементарно: библиотеки JavaScript, которые берут на себя всю отрисовку диаграмм в браузере. Далее мы создаем html страницу (по сути текстовик) с вызовом этих библиотек и заполненными в текстовом виде исходными данными для отрисовки и подсовываем встроенному в 1С браузеру.

    Вот встроенный браузер зачем то блокирует содержимое ActiveX страницы и в 1С у меня скачанный пример не работает, только при экспорте HTML в браузер и последующем разрешении. Как победить? 1С:Предприятие 8.2 (8.2.18.82)

    Reply ↓
  39. NittenRenegade

    Есть ещё вопрос: откуда взяты библиотеки amcharts.js ?

    Я смотрю в тестовый пример автоматической линии тренда:

    https://www.amcharts.com/docs/v3/tutorials/use-trend-line-display-auto-calculated-best-fit-line/

    добавляю оттуда библиотеку

    https://www.amcharts.com/lib/3/plugins/tools/bestFitLine/bestFitLine.min.js

    получаю ошибку отсутствия методов у amCharts: addInitHandler.

    Смотрю в библиотеки обработки, и там совсем другое содержимое нежели в тестовом примере по ссылке

    https://www.amcharts.com/lib/3/amcharts.js

    И если взять и скопировать содержимое этой библиотеки, то диаграммы формироваться не будут. Как быть?

    Reply ↓
  40. NittenRenegade

    (39) Ответ: нужно заменить на новые все библиотеки. Хотя ошибка в графе XY всё-таки возникает, но уже в другом месте. Он мне пока и не нужен.

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

    Reply ↓
  41. Plotks2017

    (33) скорее всего нужна платформа 8.3.14 и выше

    Reply ↓

Leave a Comment

Ваш адрес email не будет опубликован. Обязательные поля помечены *