Рисуем красивые графики математических функций в поле HTML
Его величество amCharts
Для вывода графиков воспользуемся amCharts - это пакет для построения графиков, различных диаграмм и т.д., реализованный на JavaScript/HTML. Что мне больше всего понравилось в amCharts, он довольно мощный инструмент и его можно использовать абсолютно бесплатно. Единственный минус бесплатного использования проявляется в наличии маленького логотипа на графике.
В отличии от HighCharts, разработчики amCharts предоставили пользователям визуальный конструктор графиков, который значительно облегчает жизнь при настройке внешнего вида. Этот конструктор генерирует код на языке JavaScript в зависимости от значений свойств графика, а так же в режиме онлайн показывает как будет отображаться график.
Конфигурирование графика
Визуальный конструктор находится по этой ссылке и именуется Live Editor. Перейдем в Live Editor --> Make Chart --> XY/Scatter/Bubble и выберем тип графика with lines. Дальше все на ваше усмотрение, а я настроил вид графика такой:
![]() |
Внешний вид графика |
<!-- amCharts javascript code -->
<script type="text/javascript">
AmCharts.makeChart("chartdiv",
{
"type": "xy",
"pathToImages": "http://cdn.amcharts.com/lib/3/images/",
"startDuration": 2,
"startEffect": "easeOutSine",
"chartCursor": {},
"chartScrollbar": {},
"trendLines": [],
"graphs": [
{
"balloonText": "x:[[x]] y:[[y]]",
"bullet": "round",
"bulletSize": 10,
"id": "AmGraph-1",
"lineColor": "#FF0000",
"title": "Math",
"xField": "x",
"yField": "y"
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"axisAlpha": 0,
"title": "Y"
},
{
"id": "ValueAxis-2",
"position": "bottom",
"axisAlpha": 0,
"title": "X"
}
],
"allLabels": [],
"balloon": {},
"legend": {},
"titles": [],
"dataProvider": [
{
"y": "-3.2",
"x": "-8"
},
{
"y": "-2.1",
"x": "-4"
},
{
"y": "-1",
"x": "-2"
},
{
"y": "0",
"x": "0"
},
{
"y": "1",
"x": "2"
},
{
"y": "2.1",
"x": "4"
},
{
"y": "3.2",
"x": "8"
},
{
"y": "4.3",
"x": "16"
}
]
}
);
</script>
Этот код оборачивается в HTML для вывода на веб-странице.
Подготовка макетов
Изменим сгенерированный код таким образом, что бы можно было подставлять следующие значения:
- #НазваниеФункции - название математической функции, которую задаст пользователь;
- #Путь_amcharts_js - путь к библиотеке amcharts.js;
- #Путь_xy_js - путь к библиотеке xy.js;
- #ДанныеТочек - значения X и Y (y=f(x)).
<html>
<head>
<title>#НазваниеФункции</title>
<!-- amCharts javascript sources -->
<script type="text/javascript" src="#Путь_amcharts_js"></script>
<script type="text/javascript" src="#Путь_xy_js"></script>
<!-- amCharts javascript code -->
<script type="text/javascript">
AmCharts.makeChart("chartdiv",
{
"type": "xy",
"startDuration": 2,
"startEffect": "easeOutSine",
"chartCursor": {},
"chartScrollbar": {},
"trendLines": [],
"graphs": [
{
"balloonText": "x:[[x]] y:[[y]]",
"bullet": "round",
"bulletSize": 10,
"id": "AmGraph-1",
"lineColor": "#FF0000",
"title": "#НазваниеФункции",
"xField": "x",
"yField": "y"
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"axisAlpha": 0,
"title": "Y"
},
{
"id": "ValueAxis-2",
"position": "bottom",
"axisAlpha": 0,
"title": "X"
}
],
"allLabels": [],
"balloon": {},
"legend": {},
"titles": [],
"dataProvider": [#ДанныеТочек]
}
);
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;" ></div>
</body>
</html>
Сложного ничего нету, главное знать что куда подставлять в сгенерированный код.
amcharts.js и xy.js находится в архиве. который доступен по ссылке здесь.
Реализация
Макет HTML подготовлен, где взять библиотеки знаем, приступим к созданию обработки. Первым делом создадим в обработке три макета, которые будут хранить код HTML(тип макета текстовый документ) и две библиотеки (тип макета Двоичные данные). Делается это для того, что бы обработка могла работать в режиме оффлайн (на компьютере без интернета):
![]() |
Макеты обработки |
// Функция подготавливает HTML документ на основании макета.
//
// Возвращаемое значение:
// Строка - html документ.
//
&НаСервере
Функция ПостроитьГрафикСервер()
НачЗначение = ЭтаФорма.НачальноеЗначение;
КонЗначение = ЭтаФорма.КонечноеЗначение;
// Выполняем вычисление математической функции y = f(x).
ДанныеТочек = Новый Массив;
Пока НачЗначение <= КонЗначение Цикл
X = НачЗначение;
Точка = Новый Структура("Y, X", 0, X);
Вычислить = "Точка.Y = " + ЭтаФорма.МатематическаяФункция;
Выполнить(Вычислить); // Пример: "Точка.Y = X*X".
НачЗначение = НачЗначение + ЭтаФорма.Шаг;
ДанныеТочек.Добавить(Точка);
КонецЦикла;
// Формируем данные точек X и Y.
СтрокаДанныеТочек = "";
Для Каждого Точка Из ДанныеТочек Цикл
Запятая = ?(ПустаяСтрока(СтрокаДанныеТочек), "", ",");
ДанныеТочки = "{""x"":"""+ Точка.X + """,""y"":""" + Точка.Y +"""}";
СтрокаДанныеТочек = СтрокаДанныеТочек + Запятая + ДанныеТочки;
КонецЦикла;
БуферHTML = МакетHTML;
// Заменяем параметры на значения в документе HTML.
БуферHTML = СтрЗаменить(БуферHTML, "#Путь_amcharts_js", СтрЗаменить(ЭтаФорма.amcharts_js, "\", "/"));
БуферHTML = СтрЗаменить(БуферHTML, "#Путь_xy_js", СтрЗаменить(ЭтаФорма.xy_js, "\", "/"));
БуферHTML = СтрЗаменить(БуферHTML, "#НазваниеФункции", "Y = " + ЭтаФорма.МатематическаяФункция);
БуферHTML = СтрЗаменить(БуферHTML, "#ДанныеТочек", СтрокаДанныеТочек);
Возврат БуферHTML;
КонецФункции // ПостроитьГрафикСервер()
Обработку можно скачать по этой ссылке.
По такому же принципу можно создать любой график или диаграмму с помощью amCharts. Вот пример работы обработки:
![]() |
График функции y=x*x |
Огромное спасибо за реализацию в 1С казалось бы такой тривиальной задачи, которую мы в школе делали с помощью линейки и карандаша! Отличный блог!
ОтветитьУдалитьА в 2024 году это ещё можно.
Удалить