Доброго времени суток!
Привет ‘Доминикане’ в Тайланде (//infostart.ru/dominikana/) из пыльной и грязной Москвы.
Мы тут тоже под кондиционерами работаем и откопали очень интересную вещь, а именно библиотеку для рисования графиков http://sikuda.ru/raphaeljs.com и http://sikuda.ru/g.raphaeljs.com/docs/reference.html). Она примечательна тем, что совместима с очень старыми версиями IE. В 1С до сих пор используется старый движок. А нам бы хотелось, чтобы наши наработки работали везде — в толстом, тонком и web-клиенте. Метод этой библиотеки достаточно прост. Рисуем c помощью SVG, а если движок старый(1С) применим старый движок Microsoft VML. Таким образом получаем полную совместимость кода javascript.
Видео с разработчиком:
http://events.yandex.ru/events/yac/2012/talks/371/
Смотрим – нравится. Есть поле для изменения кода на javascript, начнем экспериментировать…
Примеры кода для экспериментов:
Пример 1: Начало.
// Creates canvas 640 × 480
var paper = Raphael(0, 0, 640, 480);
// Creates circles
var circle1 = paper.circle(100, 240, 100);
var circle2 = paper.circle(540, 240, 100);
// Sets the fill attribute of the circle
circle1.attr("fill", "#f00");
circle2.attr("fill", "#00f");
Пример 2: Анимация
var paper = Raphael(0, 0, 400, 400);
var attr = {
fill: "yellow",
stroke: "red",
"stroke-width": 1,
"stroke-linejoin": "round"
};
rect1 = paper.path("M 100 100 L 200 100 L 200 0 L 100 0 z").attr(attr);
rect1.transform("s0.1,1,100,0").animate({transform: "s2, 1, 100, 0"}, 1000, "swing");
Пример 3: События
var paper = Raphael(0, 0, 400, 400);
var attr = {
fill: "yellow",
stroke: "red",
"stroke-width": 1,
"stroke-linejoin": "round"
};
tr1 = paper.path("M 100 100 L 300 100 L 200 300 z").attr(attr);
// draw a circle at coordinate 10,10 with radius of 10
var c = paper.circle(100, 100, 100);
c.attr("fill", "red");
c.node.id1c = "круг";
c.node.onclick = function () {
color = Raphael.getColor();
c.attr("fill", color);
};
c.node.onmouseover = function () {
c.attr("fill", "blue");
};
c.node.onmouseout = function () {
c.attr("fill", "green");
};
tr1.node.id1c = "треугольник";
tr1.node.onclick = function () {
color = Raphael.getColor();
tr1.attr("fill", color);
};
Пример 4: Псевдотрехмерность
var paper = Raphael(0,0,400,400);
Raphael.fn.ball = function (x, y, r, hue) {
hue = hue || 0;
return this.set(
this.ellipse(x, y + r - r / 5, r, r / 2).attr({fill: "rhsb(" + hue + ", 1, .25)-hsb(" + hue + ", 1, .25)", stroke: "none", opacity: 0}),
this.ellipse(x, y, r, r).attr({fill: "r(.5,.9)hsb(" + hue + ", 1, .75)-hsb(" + hue + ", .5, .25)", stroke: "none"}),
this.ellipse(x, y, r - r / 5, r - r / 20).attr({stroke: "none", fill: "r(.5,.1)#ccc-#ccc", opacity: 0})
);
};
paper.ball( 200, 180, 150, Math.random());
Р.S. Вот так незаметно для себя я стал поклоником этой библиотеки…
Рабочие примеры в интернете http://jsfiddle.net/user/sikuda/fiddles/
Related Posts
Получение логина и пароля техподдержки 1С из базы
Класс для вывода отчета в Excel
Счет-фактура для УПП
Библиотека классов для создания внешней компоненты 1С на C#- Акт об оказании услуг (со скидками) — внешняя печатная форма для Управление торговлей 11.1.10.86
Прайс-лист с артикулом в отдельной колонке
Пожалуйста сфорганьте:
— воронку продаж;
— диаграмму ганта (с возможностью вывода надписей внутри блока, а также с возможностью выделения блоков мышью, в т.ч. и пустых и обработкой событий);
Это будет более востребовано потому что нормальных в 1С нет вообще,
а круговых и прочих и так валом.
(0) sikuda спасибо, за интересную находку!
нашел в сети доклад разработчика о данной библиотеке
скажите, как вы победили (победили ли?) двойное исполнение js в поле HTML-документа при присваивании html-кода реквизиту формы, связанному с полем?
пункт 4. Не нулевой размер родителя приходит только в последний момент. Решение мне понравилось, даже статью себе в блог написал. Если найдете в нем дырки — обязательно напишите, мне самому это интересно его универсальность.
(1) script,
если js html устраивает, то (It works in all modern browsers including the iPhone/iPad and Internet Explorer from version 6. Standard browsers use SVG for the graphics rendering. In legacy Internet Explorer graphics are drawn using VML.) наполнение там сводиться к
series: [{ name: ‘Unique users’, data: [ [‘Website visits’, 15654], [‘Downloads’, 4064], [‘Requested price list’, 1987], [‘Invoice sent’, 976], [‘Finalized’, 846] ] }]Показать
Но тут
(даже не пытался)
(5) HighCharts это самые известные и доделанные графики. Они действительно самые класные, но первое у них не простая лицензия. Второе внутри тонкого клиента 1С 8.3.3 не все так просто.
Если бы они полность запускались без глюков… ну вобщем я тоже за мир во всем мире…
С помощью библиотеки выводится статические изображения или они двигаться могут?
Супер вещь !!! А можно ли с помощью этого механизма вносить изменения в картинки (jpg, png) из 1с и сохранять их? Например маркировать фотографии.
Офигительно, Рафаэлю сто лет в обед а они его только откопали… Кроме того узко специфическая вещь, если на чистом SVG можно без особых тормозов вывести несколько тысяч объектов в одной схеме, то Рафаэль на тех же объемах загибается. Так, небольшие графики, небольшие схемки — его стезя. Я еще в 1С 7.7 года 3 назад через SVG интерактивную схему рынка делал, сложную довольно как по объектам (в сумме примерно 3’000) так и по взаимодействию с пользователем. А вот в скором времени предстоит подобную схему реализовывать в 1С 8.2 только на 20’000 объектов — а при таком объеме (проверено лично) загибается и SVG и уж тем более Рафаэль. Все имеющиеся в свободном доступе графические библиотеки для 1С загибаются даже на тысяче. И как быть теперь не знаю (если только дробить схему на куски). Озадачились бы вопросом, какими средствами в 1С без тормозов выводить интерактивные схемы стадионов, жилых массивов и т.д. — когда счет идет уже не на тысячи а на десятки тысяч объектов. Ничего подобного пока не видел, если только не ваять на голом .NET
P.S. Кстати, если вы уж озадачились Рафаэлем, то обратите еще внимание на потому что зачастую намного удобнее подготовить шаблон или его части в Adobe Illustrator или Inkscape, а уж потом скармливать Рафаэлю.
(7) tolyan_ekb, вообще практически всё что на HTML странице есть — может двигаться, реагировать на события и т.д., и управляется через DOM-модель. SVG и VML не исключение. Можно самому управлять через скрипты или прямым доступом к узлам, можно с помощью фреймворков. В SVG есть также встроенные средства анимации. Драг-энд-дроп тоже не проблема.
(7). В первом примере простейшая. Дальше разбираться..
(8,9,10). Да это SVG графика. Как правильно замечено если наделать 20000 объектов в DOM, каждый узел со своими обработчиками, свойствами то все это тормозит. Это не тот метод.
Есть в графике HTML другой путь Canvas, asm.js и далее . Но здесь требуется новый движок браузера. Если кто откопает что-то реально работающее в 1С. Пишите, будет очень популярно.
Новый движок браузера в 1С это нереально, вы сами как и я уже исследовали этот вопрос и поняли что все крутится на WebBrowser и приходится мириться с его ограничениями. Единственный вариант который я вижу — это разработка своей библиотеки без использования SVG, JS и HTML. Например на базе или WPF, но опять же не знаю как работает с большим количеством объектов. У вас к команде Доминиканы есть спецы по разработке ВК?
Думаю что вот в эту сторону нужно обратить свой пристальный взгляд, весьма перспективная вещь: или
Правда не бесплатная, но это же не тот фактор чтобы снимать ее с рассмотрения. Тем более стоимость лицензий начинается с весьма приемлемой суммы. Уже написал запрос разработчикам.
Нет меня COM+, OLE не заманишь. Еще раз просвещаю народ — Microsoft сама делает свои технологии COM+, Silverlight не первоочередными. И этот крутой поворот они сделали в середине 2011 года! Возможно они это сделали поздно, возможно…(мне нравить пародия на эту тему отражающая суть — )
Подумайте, если Вы не делаете свой CAD или yandex maps, то 20000 объектов вам не надо! Человек обычно не оперирует более 7-10 объектами.
Обновил анимацию по умолчанию. Если подтормаживает — пишите…
Предлагаю способ как обработать в 1С нажатие на элементы графика Рафаеля
(6)
Ковырялся как-то с Highcharts на 8.2 Для моей задачи нормально всё завелось в итоге. Неужели в 8.3.3 что-то поменялось?
Так с движком браузера в web-клиентах chrome и Firefox все нормально.
(6) Картинка из тонкого клиента…
Ну да, я с расчетом на веб-клиент и делал. С ограничениями тонкого клиента понятно всё, спасибо. Проверил свою приблуду под тонким клиентом на 8.3 — то что мне нужно было — рисует. Единственный косяк и в 8.2 и в 8.3, растягивается элемент HTML нормально, а вот вместо того, чтобы диаграмма сворачивалась, полоса прокрутки появляется.
При открытии обработки пишет. Ошибка сценария строка 12 код символа 2504 синтаксическая ошибка. Как побороть?
(21) Странно, сам еще раз скачал свою обработку проверил(Win7x64 IE9). Все Ок, толстый и тонкий, дома даже Ubuntu 12.04 8.3.3.658. Опишите точно вашу машину. В реестр точно не лазили?
(22) у меня XP prof и IE 8 в режиме совместимости работает. Некоторые алгоритмы не работают в старых IE. Например, писал парсер на 1С и он в IE 7 выдавал ошибку,а в IE 8 нет. Похоже нет никакой совместимости со старыми версиями, каждый раз придется под конкретного пользователя подстраиваться.
(22) почему-то различается текст на сайте разработчика и в обработке
function®{return e(t,):e(t,t.eve)} вместо function®{return e(t,r)}):e(t,t.eve)}
l=function(t,e){rturn t-e} вместо l=function(t,e){return t-e}
При замене не сохраняет корректно в макете обработке index_html. Исправил, сохранил, открыл опять так же. В чем может быть причина?
Проверьте на другом компьютере. Как результат? Что-то Вы явно компьютер замучили.
Хоть бы Word’ом проверяли на ошибки и опечатки:
«совместива» — > «совместиМа»
«использутся» — > «используЕтся»
«А тех, кто засучил рукова и не боиться javascript кода.» -> «А тех, кто засучил рукАва и не боиТСЯ javascript кода.»
«Смотрим – нравиться.»->»Смотрим – нравиТСЯ.»
Я создал два прямоугольника при помощи этой обработки. Хочу при нажатии на один из прямоугольников получать информацию в 1С о том, на какой именно прямоугольник нажал, первый или второй. Помогите пожалуйста.