image_pdfimage_print

Воронка продаж современными средствами SVG графики.

Доброго времени суток!

Задела меня статья на мисте о воронке продаж «Воронка продаж типовыми средствами 1С (без использования Html, .Net etc.)» Задела не тем, что там все хорошо и есть что изучать, а тем что большинство не изучая методы и средства конкретной реализации пытаются найти способы реализовать графику средствами исключительно внутри 1С. Не объясняя и не показывая поэтапно, как сделана эта графика. На какой библиотеке она основана и как реализована. А тайную информацию про ImageMagik читаем в руководстве администратора стр.238. Если посмотреть на эту графику 1C в веб клиенте через средства разработки (есть уже во всех браузерах), то легко заметим что график это просто картинка:

voronka0

Поэтому в 1С до 8.3.3.721 графики всегда строются на сервере и передаются картинкой. А хотелось бы равняться на современные тенденции и строить графики на клиенте передавая с сервера только данных для построения графика.

Поэтому мы пойдем по другому пути. Пойдем от стандартной графики в интернете основанной на Scalable Vector Graphics (SVG) и затем ее уже будем реализовывать в 1С в поле HtmlДокумента.

Для начала прочитаем вступительную статью про SVG графику например: http://ruseller.com/lessons.php?rub=28&id=1602

Итак, начнем по шагам:

  1. Сначала нарисуем эллипсы, из которых будет состоять наша воронка (из оригинала).  Точнее только верхная крышка у нас эллипс. В htmlполе надо записать в body следующий код:
    <svg viewBox=»0 0 1400 1400″ xmlns=»http://www.w3.org/2000/svg» version=»1.1″>
    <ellipse cx=»200″ cy=»100″ rx=»100″ ry=»20″
    style=»fill:yellow;stroke:purple;stroke-width:1″/>
    </svg>В 1С в тонком клиенте Windows 8.3.3.721 так не будет работать, в вэб клиенте все работает. В библиотеке raphaeljs для старого движка IE есть методы работы с SVG элементами. Добавляем в функцию onload:

    voronka1
  2. Остальные уровни это не полные эллипсы а только нижние дуги от эллипсов. В htmlполе надо записать в body следующий код:

    <svg viewBox=»0 0 1400 1400″ xmlns=»http://www.w3.org/2000/svg» version=»1.1″>
    <path d=»M 100 200
    A 100 20 0 1 0 300 200″
    fill=»none» stroke=»red» stroke-width=»1″ />
    </svg>
    В 1С в тонком клиенте Windows 8.3.3.721 так не будет работать, в вэб клиенте все нормально. В библиотеке raphaeljs для старого движка IE есть методы работы с SVG элементами. Добавляем в функцию onload:

    voronka2
  3. Теперь построим боковые стороны от вернего полуэлипса до нижнего. В htmlполе надо записать в body следующий код:
    <svg viewBox=»0 0 1400 1400″ xmlns=»http://www.w3.org/2000/svg» version=»1.1″>
    <path d=»M 50 100
    A 150 20 0 1 0 350 100
    L 300, 200
    A 100 20 0 0 1 100 200Z»
    fill = «none» stroke=»red» stroke-width=»1″ />
    </svg>
    В 1С в тонком клиенте Вы сами понимаете… Добавляем в функцию onload и градиент раскраски для оживления (fill: «0-#f00-#400»):

    voronka3
  4. Теперь собираем весь код для обработки для библиотеке Рафаэля:
    [wpdm_file id=12]
    Код для вставки:

    voronka4

    Получилось патриотично!

Да мы не рассказали, а как так волшебным образом SVG графика заработала в старом движке. Просто раньше у Microsoft развивала библиотеку VML и ее приоритетная реализация работает со старыми движками. А библиотека raphaeljs позволила нам сделать шаг от старых браузеров в новые открытые стандарты HTML.

Для очень ленивых обработка для 1С (требует подключение к интернету — берет скрипты с этого сайта) на infostart.ru http://infostart.ru/public/199275/