Рисуем красивые графики математических функций в поле HTML

-

Его величество amCharts


Для вывода графиков воспользуемся amCharts - это пакет для построения графиков, различных диаграмм и т.д., реализованный на JavaScript/HTML. Что мне больше всего понравилось в amCharts, он довольно мощный инструмент и его можно использовать абсолютно бесплатно. Единственный минус бесплатного использования проявляется в наличии маленького логотипа на графике.

В отличии от HighCharts, разработчики amCharts предоставили пользователям визуальный конструктор графиков, который значительно облегчает жизнь при настройке внешнего вида. Этот конструктор генерирует код на языке JavaScript в зависимости от значений свойств графика, а так же в режиме онлайн показывает как будет отображаться график.

Конфигурирование графика


Визуальный конструктор находится по этой ссылке и именуется Live Editor. Перейдем в Live Editor --> Make Chart --> XY/Scatter/Bubble и выберем тип графика with lines. Дальше все на ваше усмотрение, а я настроил вид графика такой:
Внешний вид графика
Получился вот такой сгенерированный конструктором код на JavaScript для вывода графика:
<!-- 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 код, который будет рисовать график:
<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 документ на основании макета.
//
// Возвращаемое значение:
//   Строка   - 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. Анонимный19 июня 2015 г. в 21:28

    Огромное спасибо за реализацию в 1С казалось бы такой тривиальной задачи, которую мы в школе делали с помощью линейки и карандаша! Отличный блог!

    ОтветитьУдалить

Отправить комментарий