IE 2016

Красивое отображение графиков (диаграмм) на базе highcharts

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

Платформа предоставляет довольно скудный интерфейс в плане вывода графиков/диаграмм. В статье рассматривается инструкция, как внедрить библиотеку Highchart в 1С.

 

О библиотеке

Highcharts (ОффсайтГалерея с примерами) — библиотека для создания чартов написанная на JavaScript, позволяет легко добавлять интерактивные, анимированные графики на сайт или в веб-приложение. (Описание ниже взято отсюда.) На данный момент чарты поддерживают большое количество диаграмм линейных, круговых, колоночных рассеивающих и многих других типов. Минимальная версия для IE составляет 6+ (т.е. отображается в 1С прилично). Чарты бесплатны для не коммерческого использования, однако цена для коммерческого использования на одном сайте составляет $80, безлимитное использование 360 долларов. 

На оффсайте есть две различные библиотеки: highcharts (обычные графики) и highstock (финансовые графики); можно подобрать тот или иной график практически под все задачи.

Поддерживаются следующие типы вывода графиков: line (простая линия), spline (сглаженная линия), area (область), areaspline (сглаженная область), column, bar (вертикальное/горизонтальное исполнение), pie (круговая) и scatter (точечная), и они могут быть комбинированы между друг другом при выводе конечному пользователю, и обладают возможностью отключения любого из них в режиме реального времени непосредственно пользователем для удобства разборки информации.

Данные для построения графиков могут быть взяты как из самого JS, так из локального файла, базы данных, или с удаленного сервера.

  • Чарты работают на чистом JS и не требуют каких-либо плагинов или Flash;
  • Вывод чартов довольно прост;
  • Есть увеличение отдельных областей;
  • Поддержка скинов /тем оформлений;
  • Поддержка tooltip с выводом информации;
  • В большинстве типов чартов есть поддержка date-time X-оси;
  • Размер библиотеки ~18кб;
  • Возможность локализации;

Макет формирования графика

Макет предоставляет собой шаблон, заполняемый из 1С, с описанием свойств объекта  на JavaScript. Пример шаблона:

 

var chart;
 
$(document).ready(function() { //когда страница сформируется, вызовется функция
 
        // Create the chart
        window.chart = new Highcharts.StockChart({
            chart : {
                renderTo : 'container' //указываем область, где будет формироваться график, см. раздел body в макете
            },
 
            title : {
                text : 'Общий объем продаж по дням/неделям/месяцам'
            },
 
            tooltip: { 
                //подсказка при наведении на серию, выводим имя серии тем же цветом, 
//что ее отображение на графике, выводим значение серии
                //примечание: при нескольких сериях на экране StockCharts объединяет подсказки в одно окно
            	pointFormat: '"color:{series.color}">{series.name}: {point.y}',
            	valueDecimals: 2
            },
 
            yAxis : { //настойки оси Y: заголовок и минимальное значение
                title : {
                    text : 'V продаж'
                },
                min: 0
 
            },
 
 
            series : [ // самое интересное - данные. Сформируем и подставим их из 1С
            %%%СЕРИИ%%%
 
            ]
        });
 
 
});

Серий в графике может быть много, формат серии (отображен ряд свойств из доступных):

ФорматСерии = "
    |{
    |name : '%%%ИМЯ%%%',      //имя серии, выводиться в легенде, подсказках
    |data : [%%%ДАННЫЕ%%%],   //данные, см. ниже
    |id : 'dataseries',       //при необходимости, серию можно "обозвать" служебным названием
    |                         //для доступа в дальнейшем (напр. маркеры можно
    |                         //прицеплять на конкретные серии (либо на оси)
    |type: 'spline'           //сглаженный график
    |}, ";

Формат указания данных зависит от типа графика, либо указывается одно значение (х -  data[343541012]), либо два (х, у - {x : Date.UTC(2012,1, 15), y : 500},) и т.п. Формат данных может быть очень навороченным, включая т.н. drilldown (расшифровки данных в самом отчете, пример). Дату можно формировать через функцию JS UTC, либо (что лучше для больших массив данных - высчитывать разницу между нужной датой и полночью 1.1.1970).

Важно: нужно учесть, что числа в данные нужно передавать без пробелов (т.е. не группировать по разрядам), с "." в качестве разделителя целой и дробной, а также при отсутствии значения передавать "0".

 

Формирование из 1С

Возможно "скрестить" отчет на СКД с движком графика, если использовать формирование отчета в таблицу (дерево) значений, в дальнейшем обходя его в цикле и формируя текстовую строку (строки), которые в дальнейшем подставиться в макет графика и отобразиться движком в поле html документа. 

Плюсы данного подхода:

  • мощь Web 2.0 -ных графиков;
  • возможность произвольных отборов в рамках СКД

Минусы:

  • строгий формат вывода, пользователь уже не сможет поменять группировки, отображаемые поля и т.п.
  • при сложных обработчиках кликов (тултипов), необходимо знание JavaScript.

 

Пример

 

Пример формирования отчета о продажах за период (с группировкой по дням/неделям/месяцам) приведен во вложениях к данной статье. Отчет сделан как внешний, писался под толстый клиент, УПП (если у вас в конфигурации есть регистр накопления "Продажи", то должен заработать).

В макете html указаны онлайн ссылки на библиотеки, таким образом для формирования отчета необходим доступ к интернету. Вы можете скачать указанные библиотеки и заменить онлайн ссылки на локальные.

Основной код формирования макета из примера:

 

Процедура Сформировать_ОбщийЕжедневныйОтчетСКД()
   
ТЗ = СформироватьТЗ(, ВариантОтчета); 

   
ПодстановкаОбъемПродаж = "";
   
ПодстановкаСерий = "";
   
ФорматСерии = "
    |{
    |name : '%%%ИМЯ%%%',
    |data : [%%%ОБЪЕМ_ПРОДАЖ%%%],
    |id : 'dataseries',
    |type: 'spline'
    |}, "
;

    Для каждого
СтрокаТЗ Из ТЗ Цикл

       
_год   = Формат(Год(СтрокаТЗ.Период), "ЧГ=0");
       
_месяц = Формат(Месяц(СтрокаТЗ.Период), "ЧГ=0")-1; // нумерация месяцев в JS начинается с 0
       
_день  = Формат(День(СтрокаТЗ.Период), "ЧГ=0");
       
_объем = СокрЛП(Формат(СтрокаТЗ.СтоимостьОборот,"ЧРД=.; ЧН=0; ЧГ=0"));
        если
_объем = "" тогда _объем = 0; КонецЕсли;

       
ПодстановкаОбъемПродаж = ПодстановкаОбъемПродаж + ПодставитьПараметрыВСтроку(
       
"{x : Date.UTC(%1, %2, %3), y : %4}, ",
       
_год,
       
_месяц,
       
_день,
       
_объем);
    КонецЦикла;

   
ПодстановкаОбъемПродаж   = Лев(ПодстановкаОбъемПродаж, СтрДлина(ПодстановкаОбъемПродаж) - 2);

   
макет = ПолучитьМакет("ОбщийЕжедневныйОтчет");
   
текст = макет.ПолучитьТекст();

   
Серии = ФорматСерии;
   
Серии = СтрЗаменить(Серии,"%%%ИМЯ%%%", "Объем продаж");
   
Серии = СтрЗаменить(Серии,"%%%ОБЪЕМ_ПРОДАЖ%%%", ПодстановкаОбъемПродаж);

   
Серии    = Лев(Серии, СтрДлина(Серии) - 2);
   
текст = СтрЗаменить(текст,"%%%СЕРИИ%%%", Серии);



   
файл = новый ТекстовыйДокумент;
   
файл.УстановитьТекст(текст);  имяФайлаОтчета = ПолучитьИмяВременногоФайла("html");

   
файл.Записать(имяФайлаОтчета);
   
ЭлементыФормы.ХТМЛ.УстановитьТекст("");
   
ЭлементыФормы.ХТМЛ.Перейти(имяФайлаОтчета);
КонецПроцедуры

 

Примеры рабочих отчетов


Примеры отчетов, построенных на базе highchart и highstock, приведены ниже.

Файлы

Наименование Файл Версия Размер Кол. Скачив.
Анализ продаж (8.2)
.erf 24,49Kb
17.08.12
276
.erf 24,49Kb 276 Скачать

См. также

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

13. Dimasik2007 23.08.2012 17:07
(12) Там вариантов много:
  • заполнение свойств lang (пример ниже, не забудьте еще про shortMonths - короткие имена месяцев)
    Highcharts.setOptions({
    			lang: {
    				months:   ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 
    						   'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
    				weekdays: ['ВС', 'ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ']
    			}
    		});
    ...Показать Скрыть

  • заполнение свойств dateTimeLabelFormats выбранных осей
  • или отрыть сам файл скрипта (*.src.js), и заменить дефолтные значения в нем. Собственно, я делал по последнему сценарию.


Ответили: (14) (64)
# Ответить
59. Dimasik2007 28.09.2014 09:49
Качаем следующие библиотеки:
file://c:/path/lib.js
+ 1 [ unoDosTres; ]
# Ответить

Комментарии

1. CaSH_2004 (файл скачал) 17.08.2012 13:53
Все круто! ТОлько не нашел примеров как рисовать бары для торгов из 4-х точек: цена открытия, закрытия, мин, макс
Такое можно изобразить? Именно это нужно!
Ответили: (2)
# Ответить
2. Dimasik2007 17.08.2012 14:39
(1) CaSH_2004, строиться элементарно http://www.highcharts.com/stock/demo/candlestick
Ответили: (3) (4)
# Ответить
3. Dimasik2007 17.08.2012 14:44
(2) + серии строятся также, добавляется элемент dataGrouping в формете, где нужно указать группировку по дню и т.п., данные рассчитаются автоматически (мин макс и проч)
# Ответить
4. CaSH_2004 (файл скачал) 17.08.2012 15:45
(2) Спасибо! А реально на график с барами еще наложить произвольную кривую или несколько по моим координатам? Например рассчитал я средне-скользящую и хочу все это визуализировать на одном графике.
Ответили: (5) (6)
# Ответить
5. Dimasik2007 17.08.2012 16:30
(4) CaSH_2004, тоже делается элементарно, одна серия идет с типом bar, другая (с координатами) - типа spline. Комбинацию такую делал в highcharts, наподобие примера http://www.highcharts.com/demo/combo.

Вообще, движок чартов очень мощный, можно визуализировать любые данные.
# Ответить
6. Dimasik2007 17.08.2012 19:18
(4) Ошибся я, нужно указывать непосредственно эти мин-макс значения для построения, пример тут

series : [
{
name : 'A',
data : [
// Дата, далее показатели open, high, low, close
//[Date.UTC(год, мес, ден), open, high, low, close]

[1341187200000,584.73,593.47,583.60,592.52],
[1341273600000,594.88,600.00,594.00,599.41],
[1341446400000,600.56,614.34,599.65,609.94],
[1341532800000,607.09,608.44,601.58,605.88],
[1341792000000,605.30,613.90,604.11,613.89],
[1341878400000,617.97,619.87,605.31,608.21],
[1341964800000,606.12,607.66,597.22,604.43],
[1342051200000,600.24,603.47,592.68,598.90],
[1342137600000,602.95,607.19,600.00,604.97],
[1342396800000,605.12,611.62,605.02,606.91],
[1342483200000,610.79,611.50,603.15,606.94],
[1342569600000,606.59,608.34,603.56,606.26],
[1342656000000,611.28,615.35,606.00,614.32],
[1342742400000,613.03,614.44,603.70,604.30],
[1343001600000,594.40,605.90,587.71,603.83],
[1343088000000,607.38,609.68,598.51,600.92],
[1343174400000,574.46,580.80,570.00,574.97],
[1343260800000,579.76,580.40,570.36,574.88],
[1343347200000,575.01,585.83,571.59,585.16],
[1343606400000,590.92,599.44,587.82,595.03],
[1343692800000,603.23,611.70,602.72,610.76]
],
type: 'candlestick'
},

{
name : 'B',
data : [
// Дата, далее показатель
[1341187200000,584.73],
[1341273600000,594.88],
[1341446400000,600.56],
[1341532800000,607.09],
[1341792000000,605.30],
[1341878400000,617.97],
[1341964800000,606.12],
[1342051200000,600.24],
[1342137600000,602.95],
[1342396800000,605.12],
[1342483200000,610.79],
[1342569600000,606.59],
[1342656000000,611.28],
[1342742400000,613.03],
[1343001600000,594.40],
[1343088000000,607.38],
[1343174400000,574.46],
[1343260800000,579.76],
[1343347200000,575.01],
[1343606400000,590.92],
[1343692800000,603.23]
],
type: 'spline'
}
]
Ответили: (8)

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

9.png
# Ответить
7. Dimasik2007 17.08.2012 19:20
В примере даты уже сгенерированы, но их можно указать через функцию UTC. Вообще, для больших объемов данных лучше написать функцию, переводящую дату сразу в уканное представление (т.е. вычислять разность дат между необходимой датой и полночью 1 янв 1970)
# Ответить
8. CaSH_2004 (файл скачал) 17.08.2012 19:34
(6)Вот спасибо! Буду на выходных изучать
# Ответить
9. Cobranet123 (файл скачал) 20.08.2012 05:57
Вопрос: А Зачем обработка ломится на сайт ajax.googleapis.com ? и без доступа к этому сайту отказывается что-либо строить...
Ответили: (10)
# Ответить
10. Dimasik2007 20.08.2012 07:18
(9) Cobranet123, видимо вы статью по диагонали посмотрели.
В макете html указаны онлайн ссылки на библиотеки, таким образом для формирования отчета необходим доступ к интернету. Вы можете скачать указанные библиотеки и заменить онлайн ссылки на локальные.

Вы можете скачать указанные библиотеки (JQuery, Highstock.js/Highcharts.js - основные, библиотеку экспорта по необходимости) к себе, и разместить ее хоть на своем сайте, хоть в расшаренной папке в сети, хоть в виде макета в обработке (с распаковкой в локальный каталог при формировании отчета). В тексте Html-макета потом подмените адреса на нужный и вуаля - интернет уже не нужен. Обработка построена по минимуму функционала, не отображены фишки в виде локализации (например, даты можно выводить на русском), легенд и проч.
Документацию см. на http://api.highcharts.com/highcharts и http://api.highcharts.com/highstock, все подробным образом описано и почти везде есть онлайн-примеры.
# Ответить
11. Den_D 23.08.2012 10:18
Очень интересный подход. Спасибо за информацию.
# Ответить
12. AlexBar (файл скачал) 23.08.2012 15:17
Коллеги, кто-нибудь смог разобраться как даты по оси X на русском вывести?
Ответили: (13)
# Ответить
13. Dimasik2007 23.08.2012 17:07
(12) Там вариантов много:
  • заполнение свойств lang (пример ниже, не забудьте еще про shortMonths - короткие имена месяцев)
    Highcharts.setOptions({
    			lang: {
    				months:   ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 
    						   'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
    				weekdays: ['ВС', 'ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ']
    			}
    		});
    ...Показать Скрыть

  • заполнение свойств dateTimeLabelFormats выбранных осей
  • или отрыть сам файл скрипта (*.src.js), и заменить дефолтные значения в нем. Собственно, я делал по последнему сценарию.


Ответили: (14) (64)
# Ответить
14. AlexBar (файл скачал) 23.08.2012 18:36
(13) Dimasik2007, Огромное спасибо!
# Ответить
15. zipik 29.08.2012 11:00
оо..круто!
# Ответить
16. aximo (файл скачал) 30.08.2012 06:36
я бы попробывал запихнуть jquery.min.js и прочие *.js файлы в макеты в самой обработке, для пущей универсальности. А так, спасибо. решение полезное!
# Ответить
17. Dimasik2007 30.08.2012 07:19
(160) Ну тут вариантов множество хранить, все от ситуации зависит.
Файлы *js небольшие, их можно засунуть все в zip и при формировании распаковывать в темп или каталог пользователя и удалять при закрытии обработки.
# Ответить
18. Archikg (файл скачал) 30.08.2012 07:24
спасибо, я почему-то всегда думал, что это можно получить только с помощью Adobe Flex
Ответили: (19)
# Ответить
19. Dimasik2007 30.08.2012 13:28
(18) Так напишите статью, будет полезно знать различные способы работы.
Ответили: (21)
# Ответить
20. Kaperang 31.08.2012 08:17
А диаграммы Ганта эта библиотека она умеет строить?
Ответили: (23)
# Ответить
21. Archikg (файл скачал) 31.08.2012 11:07
(19) Dimasik2007, я бы и сам был рад на подобную статью наткнуться :) пока все это в освоении, в перспективе постараюсь
очень радует глаз подобная разработка, красивая визуализация данных в 1С это одна сторона медали, гораздо похвальней реализация интеграции JS с библиотекой jquery и 1С, однозначно шаг вперед, большое спасибо
Ответили: (22)
# Ответить
22. xzorkiix 31.08.2012 12:53
(21) Archikg,

гораздо похвальней реализация интеграции JS с библиотекой jquery и 1С, однозначно шаг вперед, большое спасибо


Простите,но где тут шаг вперёд?
# Ответить
23. Dimasik2007 31.08.2012 18:15
(20) Эта библиотека не умеет. Вот эта (http://www.maro-z.com/examples/jquery.gantt/), например, может. Но корявые, на мой взгляд.
# Ответить
24. Harry_Joplin 14.09.2012 14:23
Простите, за не самый умный вопрос. А как сделать, графики на другие отчеты а не только на "Анализ продаж" представленный в примере?
Ответили: (26)
# Ответить
25. AlexO 14.09.2012 14:30
Опять же надо что-то стороннее ставить, а потом следить, чтобы это стороннее-бибилиотечное было всегда на рабочем сервере 1С, никто не потер, не переустановил Windows, не переименовал папку системную; чтобы стояли актуальные версии под последнее ПО и ОС...
Слишком много "не" и "если" за только ради красивых рюшечек, увы...
Ответили: (26) (33)
# Ответить
26. Dimasik2007 15.09.2012 00:20
(24) Если вы можете представить данные в виде {имя серии, значение Х, значение У} = то можете построить любой графический отчет на указанном движке.
(25) Вы не правы. Все "не" решаются простым хранением библиотек в макете, распаковкой в тмп каталог и подсовываение адресов в макет графика. Все! Делов то. Пусть 1С попробует догнать своими кривыми встроенными механизмами отображения графиков/диаграмм хотя бы эту библиотеку, тогда можно и говорить о не нужности.
А по существу, было построено мною уже порядка десятка аналитических отчетов, так что мне такой механизм пригодился. Вам - нет? ну это Ваше дело.
Ответили: (27) (58)
# Ответить
27. Harry_Joplin 15.09.2012 09:23
(26) Для меня это пока "тёмный лес" :( Но сам график выглядят оч. красиво и наглядно. Можно ли от Вас заполучить готовые решения например как в самой публикации "Примеры рабочих отчетов" Прибыль vs Себестоимость, Диаграмма отпускных и закупочных цен и др.?
Ответили: (28)
# Ответить
28. Dimasik2007 15.09.2012 12:27
(27) Они заточены под конфигурацию клиента, поэтому не для распространения.
Ответили: (29) (33)
# Ответить
29. Harry_Joplin 15.09.2012 12:41
(28)Печалька.
А как же тогда был сделан анализ продаж?
Ответили: (30)
# Ответить
30. Dimasik2007 15.09.2012 13:58
(29) Не понятен вопрос.
Ответили: (31)
# Ответить
31. Harry_Joplin 15.09.2012 14:13
(30)Я про то что отчет "Анализ продаж" не заточен под конкретную конфигурацию, и отлично работает. Может есть на выдачу, но уже другие отчеты?
# Ответить
32. Dimasik2007 15.09.2012 15:04
А, нету.
Ответили: (33)
# Ответить
33. AlexO 15.09.2012 18:11
(32) Dimasik2007, (28) Dimasik2007,
что-то не согласуется "шапкозакидательное"
Все "не" решаются простым хранением библиотек в макете, распаковкой в тмп каталог и подсовываение адресов в макет графика. Все! Делов то.

с последующим обсуждением.
Или уж внес в макеты, или у вас строго уникальная система не для тиражирования - о чем и писал в (25).
Ответили: (34)
# Ответить
34. Dimasik2007 15.09.2012 20:38
(33) Еще раз повторяю, каждый делает как хочет исходя из целей. Моя статья приводит пример, как можно подключить. Все варианты подключения уж скачавшие могут придумать и сами. Если не можете, обращайтесь в личку - помогу за $$.
# Ответить
36. eugen91 04.12.2012 20:19
Можно ли выводить потом этих графики из базы ?
# Ответить
37. Dimasik2007 04.12.2012 21:07
Да, можно, для этого есть кнопка печати/сохранения. Только не забудьте логику в настройках переопредеить, чтобы движок к интернету не обращался, а к локальному скрипту exports.js
# Ответить
38. sikuda (файл скачал) 06.06.2013 14:58
Как там с версией под тонкого клиента?
# Ответить
39. Dimasik2007 06.06.2013 15:16
Не проверял :)
# Ответить
40. mymyka 06.06.2013 16:04
А оно умеет сложные диаграммы рисовать? совмещенно накопительные? например, на каждого контрагента вывести по колонке для каждого договора, а уже эту колонку разделить на 3 части, аванс/дебиторка/просрок дебиторки? Просто скд это точно не умеет, приходится на каждый договор 3 столбца рисовать, что сводит на нет наглядность диаграммы.
# Ответить
41. Harry_Joplin 11.06.2013 15:16
Вчерась перестала работать обработка, график вроде формирует, но при попытке изменить период выдает ошибку
см. файл.
Допускаю, что ошибка вызвана тем что на той стороне библиотека недоступна или удалена.
Можно ли получить разъяснение
В макете html указаны онлайн ссылки на библиотеки, таким образом для формирования отчета необходим доступ к интернету. Вы можете скачать указанные библиотеки и заменить онлайн ссылки на локальные.

Как осуществить замену онлайн ссылок

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

Захват.jpg
# Ответить
42. MarSeN 09.09.2013 18:02
(105) Gazza,
Я проверял - работает и под тонкого (библиотека, эту разработку не смотрел) )
# Ответить
43. vis_tmp 02.10.2013 09:06
А можно ли построить график такого вида?
http://savepic.su/3460493.png
На картинке выделены пустые область, т.е. шкала всегда 12 месяцев, к примеру, а данные показываем не за все месяцы, а только за часть из них.
С 3 по 10, к примеру.
Такое возможно сделать?
Ответили: (44)
# Ответить
44. Dimasik2007 02.10.2013 12:26
(43) vis_tmp, да, возможно. Для осей можно задать мин. и макс. значение (если не задавать, то используется автоматический расчет на основе данных). http://api.highcharts.com/highcharts#xAxis.min
Ответили: (45)
# Ответить
45. tango (файл скачал) 02.10.2013 12:47
(44) Dimasik2007, уточните, пожалуйста, каково поведение графика в точках с незаданными значениями? будет ли соединять линия две точки, между которыми есть пропущенное значение?
Ответили: (46)
# Ответить
46. Dimasik2007 03.10.2013 15:49
(45) tango, вот такой пример посмотрите http://jsfiddle.net/t6hmt/ (пропущенные значения заменены на null)
Ответили: (47)
# Ответить
47. tango (файл скачал) 03.10.2013 18:33
(46) Dimasik2007, там нет рисуночка. что она делает с этими нулами, осталось нераскрытым пардон, включил явку, что-то зашевелилось
**
увы - то же, что и в екселе
Ответили: (48)
# Ответить
48. Dimasik2007 03.10.2013 20:21
(47) tango, покажите эскиз того, чего хотите :)
Ответили: (49)
# Ответить
49. tango (файл скачал) 04.10.2013 14:45
(48) Dimasik2007, интерполяция графика на отсутствующие значения

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

0000.png
# Ответить
50. bes-kkm 06.02.2014 17:43
___Спасибо!!!
# Ответить
51. bayce 12.02.2014 05:07
Интересная вещь.
Надо попробовать.
# Ответить
53. chmv 04.08.2014 15:14
Похоже на кардиограмму
Ответили: (54)
# Ответить
54. Dimasik2007 04.08.2014 16:07
(53) chmv, сезонные провалы видны :)
# Ответить
55. crs (файл скачал) 05.09.2014 21:58
Спасибо, как раз изучал постронение графиков в 1С и JS. На управляемых формах тоже работает ...

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

highcharts_demo.epf
# Ответить
56. unoDosTres 25.09.2014 17:47
подскажите все таки как скачать библиотеку )
а то что то тыркаюсь никак не пойму как их скачать )
Ответили: (57)
# Ответить
57. Dimasik2007 26.09.2014 06:32
(56) Суть вопроса не ясна.
Ответили: (58)
# Ответить
58. unoDosTres 26.09.2014 12:04
(57) Dimasik2007,
в (26) вы написали
Вы не правы. Все "не" решаются простым хранением библиотек в макете, распаковкой в тмп каталог и подсовываение адресов в макет графика. Все! Делов то. Пусть 1С попробует догнать своими кривыми встроенными механизмами отображения графиков/диаграмм хотя бы эту библиотеку, тогда можно и говорить о не нужности

как мне эти библиотеки на локальную машину себе кинуть
# Ответить
59. Dimasik2007 28.09.2014 09:49
Качаем следующие библиотеки:
file://c:/path/lib.js
+ 1 [ unoDosTres; ]
# Ответить
60. SJR 17.02.2015 10:11
Добрый день. А для платформы 8.3 работает?
Ответили: (61)
# Ответить
61. Dimasik2007 20.02.2015 23:10
(60) SJR,
Думаю, что да. В толстом клиенте понятно что изменений нет, насчет уф/web - посмотрите на форуме, был ряд статей.
# Ответить
62. webester 04.03.2015 16:06
(0)Рисовал для себя этой библиотекой, не смог догнать момент как бы подложить ему библиотеки не засовывая их полностью в документ. Вы говорите это просто, я так и не понял, что же указывать в качестве пути к библиотеке, если она лежит локально http://www.forum.mista.ru/topic.php?id=726521
Ответили: (63) (64)
# Ответить
63. CaSH_2004 (файл скачал) 29.04.2015 22:26
Вроде как публикация заглохла, а ведь она очень важная и полезная в связи с куцыми возможностями 1С.
Я наконец созрел для ее плотного изучение, да вот беда - автор вроде как забил на нее судя по молчанию вопроса (62)
Но надежда умирает последней.
Итак вопрос по прикрепленному отчету.
Реализовано замечательно, запустилось на УТ 10.3 без вопросов и показало результат, но вот вопросы по графику:
1. указал период 2015 г. в самом отчете, а график сформировался за историю всей базы - почему?
2. в отчете получается что периоды и все элементы управления на английском - а на русском что-то можно получить? хотя бы показатели шкал?
ну и в подсказках к точкам тоже период на английском
Ответили: (64)
# Ответить
64. Dimasik2007 30.04.2015 08:13
(63) Не заглохла, просто раньше в комментариях было указано как локальные библиотеки использовать (насчет (62)).

По вопросам.
1) Да, там в запросе СКД ошибка - нет используются отборы в запросе. Вы сможете сами добавить :)
2) Переопределите показатели, как указывал раньше в (13)
Highcharts.setOptions({
lang: {
months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль',
'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
weekdays: ['ВС', 'ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ']
}
});
Ответили: (68)
# Ответить
65. UJF 22.07.2015 14:11
Добрый день! в отчете встречается фрагмент кода при выводе :

файл = новый ТекстовыйДокумент;
	файл.УстановитьТекст(текст);  имяФайлаОтчета = ПолучитьИмяВременногоФайла("html");
	файл.Записать(имяФайлаОтчета);
	ЭлементыФормы.ХТМЛ.УстановитьТекст(""); 
	ЭлементыФормы.ХТМЛ.Перейти(имяФайлаОтчета);


создаем текстовый файл, пишем его на диск , и элементам формы скармливаем этот файл, наблюдаем отчет....

те при множественном запуске этого отчета мы рискуем иметь много временных файлов.
моя цель - интерактивный график (чтото вроде графика загрузки процессора в диспетчере задач виндовс )
есть ли возможность использовать highcharts интерактивно : у мненя в базе постоянно меняются данные и я интерактивно наблюдаю кривую без записи на диск файла? . например поток поступающих данных пишу в регистр сведений и по нему за последние 5 минут делаю выборку и по этой выборке формирую график на форме.
Ответили: (66)
# Ответить
66. Dimasik2007 22.07.2015 18:41
(65) UJF, возможно.

http://www.highcharts.com/demo/dynamic-update

$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {

// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();,
// тут вместо x,y нужно обращаться через http-сервис к базе и получать новые данные, тогда данные будут дорисовываться в графике, а не перерисовываться полностью.
series.addPoint([x, y], true, true);
}, 1000);
}
...
}
# Ответить
67. kudnayce 07.09.2015 11:09
Доброго времени суток друpья. Сталкивался ли кто с такой проблемой что на сайте ваш код js работает прекрассно а вот в 1с нет анимации! http://jsfiddle.net/whpqspzd/ вот ссылка на страницу как должно выглядеть вот код скрипта
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>

<script type='text/javascript' src='jquery-1.9.1.js'></script>

<script type='text/javascript'>//<![CDATA[

$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Оборотная ведомость'
},
xAxis: {
categories: ['Январь','Февраль','Март','Апрель']
},
yAxis: {
min: 0,
title: {
text: 'Значение'
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -11,
verticalAlign: 'top',
y: 30,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'green',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '{point.x}

',
pointFormat: '{series.name}: {point.y}
Оборот: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [{
name: 'План оборота',
data: [ 914036,1347964,1070609,2515348]
}, {
name: 'Прибыль план',
data: [12747915,19078068,14016913,26199607]
}, {
name: 'Затраты',
data: [1574174,1986473,1746783,3593354]
}, {
name: 'Прибыль',
data: [21954743,28115047,22869701,37428009]
}]
});
});


//]]>

</script>


</head>
<body scroll=no>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 600px; margin: 0 auto"></div>


</body>


</html>

а в 1с этот же скрипт отображается иначе, например нет толковых циферок для колонок. Анимации нет совершенно.! Скрипты подключенны с сайта! Неужели 1с использует какой-то браузер что это не поддерживается?* Прикрепляю файл из 1с! Пишу в УТ 10.2
Ответили: (68)

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

Безымянный.jpg
# Ответить
68. CaSH_2004 (файл скачал) 07.09.2015 22:46
(64) Спасибо буду пробовать как освобожусь
(67)
Неужели 1с использует какой-то браузер что это не поддерживается?

Ну в 1С все крутится на одном единственном браузере Internet Explorer, поменять вроде его не вариант никак - вшито в платформу. Так что проверить просто - запускай скрипт в нем и смотри.
Бывает что даже 1С глючит если данный браузер глючит (например не обновлен), может даже не запустится - на одной терминальной сесии несколько раз такое было, а больше нигде.
Ответили: (69)
# Ответить
69. kudnayce 08.09.2015 10:51
(68) CaSH_2004, <met a http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
я вот тут поменял всё сработало!!!! Сижу теперь мучаюсь как добавить поле в управляемых
Ответили: (70)
# Ответить
70. CaSH_2004 (файл скачал) 08.09.2015 12:06
(69)kudnayce
А поподробнее где меняли то?
# Ответить
71. Dimasik2007 08.09.2015 18:52
Насколько знаю, в 1С используется кастрированная версия то ли ie6, то ли ie7. Поэтому используемые скрипты нужно проверять на совместимость именно с указанными версиями, в т.ч. и принудительно указывать параметры в html-коде.
# Ответить
72. sxegreen 04.12.2015 05:03
Подскажите пожалуйста, как заменить название регионов (перевести на русский) в картах http://code.highcharts.com/mapdata/
Ответили: (73)
# Ответить
73. Dimasik2007 05.12.2015 22:36
(72) Править в *.js-файлах с данными полигонов карт, и потом использовать в коде уже локализованные скрипты.
# Ответить
74. Pawlick (файл скачал) 25.02.2016 10:04
У меня график не разворачивается на весь экран...
# Ответить
75. Pawlick (файл скачал) 25.02.2016 10:08
Все. Разобрался.
# Ответить
76. Ekovichev (файл скачал) 24.03.2016 14:57
Не пашет в такси, падает с дампом
# Ответить
77. irinrish (файл скачал) 18.05.2016 09:29
Друзья, а подскажите, по оси Х всегда будут только даты? Можно сделать произвольную шкалу, например просто значения от 1 и до 100?

При попытке заменить {X: %год, %месяц, %День, у: %число} на {X: %число1, у: %число} график сбесился))) и выдал паническое движение. Прилагаю картинку.
Ответили: (78)

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

1.jpg
# Ответить
78. Dimasik2007 22.05.2016 08:48
(77) Протестируйте скрипт на онлайн-площадках, например, http://jsfiddle.net - подбирая настройки скрипта можно добиться требуемой формы отображения графика, а потом уже реализовать в 1с.
# Ответить
Внимание! За постинг в данном форуме $m не начисляются.
Внимание! Для написания сообщения необходимо авторизоваться
Текст сообщения*
Прикрепить файл






IE 2016