/ Scripts & jquery / Создание динамических графиков

Создание динамических графиков

25.04.2021

129

В основе используем JS плагин CanvasJS jQuery Charting Plugin. В плагине множество различных вариантов графиков: линейный, диаграмма, области, сектора и т.д.

Подключаем скрипт для jQuery:

wp_enqueue_script( 'canvasjs', get_template_directory_uri() . '/js/jquery.canvasjs.min.js' , array('jquery'), '1.0', true );

В нем уже заложена генерация необходимых стилей. Практически все элементы интерфейса графика можно кастомизировать.

Генерация графика

Инициализируем график:

<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	theme: "light2",
	title:{
		text: "Simple Line Chart"
	},
	axisY:{
		includeZero: false
	},
	data: [{        
		type: "line",       
		dataPoints: [
			{ y: 450 },
			{ y: 414},
			{ y: 520, indexLabel: "highest",markerColor: "red", markerType: "triangle" },
			{ y: 460 },
			{ y: 450 },
			{ y: 500 },
			{ y: 480 },
			{ y: 480 },
			{ y: 410 , indexLabel: "lowest",markerColor: "DarkSlateGrey", markerType: "cross" },
			{ y: 500 },
			{ y: 480 },
			{ y: 510 }
		]
	}]
});
chart.render();

}
</script>

Добавляем контейнер для графика

<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>

Если нужно создавать график налету прямо в странице, можно убрать window.onload.

Шкала времени

Используем в графике шкалу времени, на основе Timestamp, преобразовывая в него любые даты.

<script type="text/javascript">

	var chart = new CanvasJS.Chart("chartContainerTotal", {
		animationEnabled: true,   

		title:{
			text: "Заголовок графика"       
		},

		axisX: {
			minimum: 1614556800000, // Стартовый отчет времени (01.03.2021 г.)
		},

		axisY: {
			gridColor: "#eee",
		},	  

		data: [{        
			type: "line",
			xValueType: "dateTime",
			lineColor: "#e31e32",
			markerColor: "#e31e32",
			dataPoints: [
				{ x: 1088620200000, y :71},
				{ x: 1104517800000, y : 55 },
				{ x: 1112293800000, y:  50 },
				{ x: 1136053800000, y : 65 },
				{ x: 1157049000000, y : 95 },
				{ x: 1162319400000, y : 68 },
				{ x: 1180636200000, y : 28 },
				{ x: 1193855400000, y : 34 },
				{ x: 1209580200000, y : 14 },
		  
			]
		}]
	});

	chart.render();

</script>

Генерация даты в Timestamp и обратно:

<?php echo strtotime("01.03.2021"); ?>
<?php echo date('d.m.Y', 1614556800); ?>

Добавляем динамические значения из php

<script type="text/javascript">

	var chart = new CanvasJS.Chart("chartContainerTotal", {
		animationEnabled: true,   

		title:{
			text: "Заголовок графика"       
		},

		axisX: {
			minimum: 1614556800000, // Стартовый отчет времени (01.03.2021 г.)
		},

		axisY: {
			gridColor: "#eee",
		},	  

		data: [{        
			type: "line",
			xValueType: "dateTime",
			lineColor: "#e31e32",
			markerColor: "#e31e32",
			dataPoints: [  

				{ x: 1614556800000, y :0, indexLabel: "0"}, // 01.03.2021 г.

				<?php foreach( $dot_log_days as $dot_log_day ) :
				$dot_log_dates = explode("|", $dot_log_day);
				if ( !empty($dot_log_dates[2]) ):	?> 	

				{ x: <?php echo strtotime("$dot_log_dates[3]").'000'; ?>, y: <?php echo $dot_log_dates[2]; ?>, indexLabel: "<?php echo $dot_log_dates[2]; ?>",  },	

				<?php endif;
				endforeach; ?>		  
			]
		}]
	});

	chart.render();

</script>

Для корректной работы с датами в конце полученного из php Timestamp нужно добавлять 000.

Поделиться в соц. сетях:

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Создание динамических графиков
Циклы wordpress (основа основ)
Рекомендации для васЦиклы wordpress (основа основ)Opttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.