На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Быстрое построение графика на JS


Появилась задача: из набора данных построить график. Желательно с возможностью масштабирования, изменения временного промежутка. Ну и желательно симпатичный. Быстро. Так как задача должна быть не уникальной, то решил поискать готовое решение. Основной критерий – возможность быстрого развёртывания, чтобы не вникать. Нашлось такое сразу – Flot (flotcharts.org) – именно о построении графиков с помощью него и поговорим ниже.

Сначала демо:





Можно переключать датасеты и график автоматически перестроится. Также есть автоматическое масштабирование прокруткой колёсика мыши и перетаскивание по осям – то есть именно то, что нам и требуется. Развернуть можно через npm (как написано на гитхабе проекта), но есть способ и более подходящий, например, для виртуальных хостингов - это просто скачать и подключить скрипты. Чтобы не собирать отдельно скрипты каждый раз я залил их в архив – просто подключайте нужные для текущего проекта. Например, для даты/времени (оси X) - jquery.flot.time.js. Итак, подключение:

<script src="source/jquery.js"></script>
<script src="lib/jquery.event.drag.js"></script>
<script src="lib/jquery.mousewheel.js"></script>
<script src="source/jquery.canvaswrapper.js"></script>
<script src="source/jquery.colorhelpers.js"></script>
<script src="source/jquery.flot.js"></script>
<script src="source/jquery.flot.saturated.js"></script>
<script src="source/jquery.flot.browser.js"></script>
<script src="source/jquery.flot.drawSeries.js"></script>
<script src="source/jquery.flot.uiConstants.js"></script>
<script src="source/jquery.flot.navigate.js"></script>
<script src="source/jquery.flot.touchNavigate.js"></script>
<script src="source/jquery.flot.hover.js"></script>
<script src="source/jquery.flot.touch.js"></script>
<script src="source/jquery.flot.selection.js"></script>
<script src="source/jquery.flot.time.js"></script>
Верстка

	
<div id="placeholder" style="width:640px;height:320px;margin:auto"></div>	
<br /><br />
<select name="ss2" id="ss2" onchange="changeGr();" style="margin: auto;display: block;">
	<option value="0">Датасет 1</option>
	<option value="1">Датасет 2</option>
	<option value="2">Датасет 3</option>
</select> 	
Ну и скрипты. Вспомогательная функция получения случайных (ну хорошо - псевдослучайных, мой внимательный читатель) чисел в заданном диапазоне включительно:

function getRandomIntInt(min, max) {
	min = Math.ceil(min);
	max = Math.floor(max);
	return Math.floor(Math.random() * (max - min + 1)) + min;
}
Инициализация и заполнение датасетов этим самыми случайными числам:

var dataset = [];

for (var i = 0; i < 3; i++) {
	dataset[i] = [];
	
	for (var j = 0; j < 50; j++) {
		dataset[i].push([j, getRandomIntInt(1, 50*(i+1))]);
	}
}
Ну и самая важная функция - рисование графика (картинки) по заданному датасету.

function changeGr(){
	var datasetNumber = $("#ss2").val();
	var plot = $.plot("#placeholder", [dataset[datasetNumber]], {
		series: {
			lines: {
				show: true
			},
			points: {
				show: true
			}
		},
		grid: {
			hoverable: true,
			clickable: true
		},
		yaxis: {
			min: 0,
			max: 200
		},
		zoom: {
			interactive: true
		},
		pan: {
			interactive: true,
			enableTouch: true
		}
	});
}
Как видите, параметры понятны из перевода; полный их список можно найти на гитхабе проекта. Вот так можно буквально за пять минут создать симпатичный график на JS.



Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.



тегизаметки, javascript, jquery, графики





Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.




Начало работы с PhantomJS
Если не работает wi-fi - включите службу Wlansvc


© upread.ru 2013-2020
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.