Доброго времени суток!
Конечно черепашка здесь не причем (а Вы о ком подумали? Я подумал вместе со статистикой). Нет сегодня мы попробуем использовать очень интересную библиотеку на JavaScript. Называется она Raphaël. Она достаточно популярна, имеет хорошую документацию и самое главное выводит графики внутри 1С. Спасибо создателю библиотеки Dmitry Baranovskiy за его открытую лицензию и незабываем его благодарить.
Видео с разработчиком:
http://events.yandex.ru/events/yac/2012/talks/371/
Кто не хочет копаться во внутренностях представляем коммерческие обработки:
http://infostart.ru/public/190734/
http://infostart.ru/public/191306/
http://infostart.ru/public/191307/
А тех, кто засучил рукова и не боиться … (javascript кода). Прошу.
Примеры кода для экспериментов. Вставляйте в поле для кода и нажимайте обновить:
Пример 1:
// Creates canvas 640 × 480 var paper = Raphael(0, 0, 640, 480); // Creates circle at x = 50, y = 40, with radius 10 var circle1 = paper.circle(100, 240, 100); var circle2 = paper.circle(540, 240, 100); // Sets the fill attribute of the circle to red (#f00) circle1.attr("fill", "#f00"); circle2.attr("fill", "#00f"); // Sets the stroke attribute of the circle to white //circle1.attr("stroke", "#fff"); var anim = Raphael.animation({cx: 320, cy: 100}, 2e3); circle1.attr({ "opacity": "0" }).animate({ "opacity": "1" }, 1, "swing").animate(anim); // run the given animation immediately circle2.attr({ "opacity": "0" }).animate({ "opacity": "1" }, 1, "swing").animate(anim.delay(1000)); // run the given animation after 500 ms
Пример 2:
var paper = Raphael(0, 0, 400, 400); // draw a circle at coordinate 10,10 with radius of 10 var c = paper.circle(100, 100, 100); c.attr("fill", "red"); 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"); };
Пример 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.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.onclick = function () { color = Raphael.getColor(); tr1.attr("fill", color); };
Библиотека достаточно маленькая, это хорошо. Но примеры в ней я бы назвал слишком низкоуровневыми, видно поэтому автор развивает дополнительный проект http://g.raphaeljs.com/.
Р.S. Вот так незаметно для себя я стал поклоником этой библиотеки...