Красивый JS график на сайт: лёгкая библиотека для ваших проектов

Для одного сайта было необходимо создать интерактивный график. Нет ничего проще! Однако исходный дизайн представлял собой богатый набор кривых, градиентов и теней. При этом нужно было найти лёгкое решение, с возможностью гибкого управления внешним видом. Для этой задачи я перебрал несколько готовых библиотек:

• D3.js (238 kB)
• Chart.js (154kB)
• Chartist.js (65kB)
• Highcharts JS (229kB)
• ApexCharts (399kB)
• amCharts (249kB)

Если вы уже имели с ними дело, нет необходимости в их представлении. Библиотеки позволяют создавать фантастические диаграммы со сложными анимациями, выборками, вариантами оформления. Однако, для поставленной задачи они имели один недостаток: большой вес. В случае пары графиков не было смысла тащить тяжеловесную библиотеку.

В этой статье хочу представить вашему вниманию простенькую библиотеку для создания вот таких линейных графиков. Вес библиотеки получился сравнительно небольшим: всего 18 kB в сжатом состоянии. Данная библиотека основана на оригинальном скрипте dopyo. На всякий случай приведу ссылку dopyo.js

В библиотеке liteChart я постарался убрать повторяющийся код (скрипт стал легче), добавил градиенты, заливки, улучшил визуальное отображение и ещё кое-что по мелочам. Вот что получилось:

Скачать liteChart [версия 1.0]

Если вам необходимо ещё более простое решение, рекомендую воспользоваться онлайн сервисом для создания графика. Вам не понадобится подключать дополнительные скрипты. Просто введите данные, получите код диаграммы и вставьте на свой сайт. Профит! А кому нужно более гибкое управление, читайте дальше.

Лёгкий старт

Шаг 1:

Скачайте библиотеку и подключите её к своему проекту:

<script src="lib/liteChart.min.js"></script>

Не имеет значения где вы её подключите, но лучше, если в “подвале” страницы. Думаю, нет смысла объяснять почему.

Шаг 2:

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

<div id="your-id" style="height: 400px;"></div>

Шаг 3:

Заполняем график и вставляем его в контейнер:

<script>
document.addEventListener("DOMContentLoaded", function(){
	// Create liteChart.js Object
	settings = {};
	let d = new liteChart("chart", settings);

	// Set labels
	d.setLabels(["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]);

	// Set legends and values
	d.addLegend({"name": "Day", "stroke": "#CDDC39", "fill": "#fff", "values": [100, 200, 450, 400, 500, 300, 700, 800, 601, 705, 604, 803]});
	d.addLegend({"name": "Night", "stroke": "#3b95f7", "fill": "#fff", "values": [200, 150, 240, 180, 150, 240, 230, 300, 200, 150, 270, 200]});

	// Inject chart into DOM object
	let div = document.getElementById("your-id");
	d.inject(div);

	// Draw
	d.draw();
});
</script>

Функция-конструктор liteChart принимает 2 параметра:

id (String) – обязательный
Уникальный идентификатор графика

settings (Object) 
Объект содержащий данные о настройках графика. В приведённом выше примере параметр settings пустой, а значит используются настройки по умолчанию, – предустановленные.

Настройки графика

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

let d = new liteChart("chart", {
	animate: {
		show: true,
		duration: 0.5,
	},
	axisX: {
		show: true,
		color: "#e9edf1",
		width: 2,
		value: "",
		minValue: 0,
		maxValue: 0,
	},
	axisY: {
		show: true,
		color: "#e9edf1",
		width: 2,
		value: "",
		minValue: 0,
		maxValue: 0,
	},
	eventCoord: {
		x: 0,
		y: 0,
	},
	fill: "gradient",
	gridX: {
		show: true,
		interval: 0,
		fill: 1,
		label: {
			show: true
		},
		stroke:"#e9edf1",
		width:2,
		dasharray:"0 10.04",
		linecap:"round",
	},
	gridY: {
		show: true,
		interval: 0,
		fill: 1,
		label: {
			show: true
		},
		stroke:"#e9edf1",
		width:2,
		dasharray:"0 10.04",
		linecap:"round",
	},
	labels: {
		show: true,
		fontColor: "#c5c6d0",
		fontSize: 12,
		fontFamily: "sans-serif",
		fontWeight: "normal",
	},
	legends: {
		table: {
			show: true,
			position: {
				x: "center",
				y: 370,
			},
			direction: "horizontal",
		},
		fill: "#c5c6d0",
	},
	line: {
		width: 3,
		style: "curve",
		shadow: true,
		dasharray: null,
	},
	padding: {
		top: 55,
		right: 15,
		bottom: 40,
		left: 20,
	},
	point: {
		show: true,
		radius: 5,
		strokeWidth: 5,
		stroke: "#ffffff",
	},
	tooltip: {
		show: true,
		backgroundColor: "rgba(255, 255, 255, 0.8)",
		fontColor: "#000000",
	},
	valueOnliteChart: {
		show: false,
	},
} );

Анимация animate

show (true/false)
Включить или выключить анимацию.
По умолчанию: true

duration (число)
Продолжительность анимации в секундах.
По умолчанию: 0.5

Оси координат axisX и axisY

show (true/false)
Показывать или отключить ось координаты.
По умолчанию: true

color (String)
Задаёт цвет оси координат. Можно использовать цвета hex, rgb или rgba.
По умолчанию: #e9edf1

width (число)
Толщина оси координат в пикселах.
По умолчанию: 2

value (String)
Дополнительная подпись к значениям оси координат.
По умолчанию: null

minValue (число)
Минимальная величина оси координаты. Если значения values передаваемые в метод addLegend меньше установленного значения minValue, график обрезается. Если установлено 0, ось координат рассчитывается автоматически.
По умолчанию: 0

maxValue (число)
Максимальная величина оси координаты. Если значения values передаваемые в метод addLegend больше установленного значения maxValue, график обрезается. Если установлено 0, ось координат рассчитывается автоматически.
По умолчанию: 0

Смещение графика по eventCoord

x и y (число)
Смещение графика по осям x и y.
По умолчанию: 0

Заполнение поля диаграммы fill

fill (null, “origin” или “gradient”)
Задаёт способ заполнения поля диаграммы. Выбирается одно из 3 значений: null – без заполнения, “origin” – сплошная заливка, “gradient” – градиентная заливка.
По умолчанию: “gradient”

Сетка координат gridX и gridY

show (true/false)
Показывать или отключить сетку координат.
По умолчанию: true

interval (число)
Не описано…
По умолчанию: 0

fill (число)
Не описано…
По умолчанию: 1

stroke (String)
Задаёт цвет линий сетки координат. Можно использовать цвета hex, rgb или rgba.
По умолчанию: “#e9edf1”

width (число)
Задаёт толщину линий сетки координат.
По умолчанию: 2

dasharray (число/строка)
Управляет видом пунктирной обводки линий сетки координат.
По умолчанию: “0 10.04”

linecap (строка)
Свойство определяет как будут выглядеть концы линий сетки координат. Возможные значения: butt, round, square.
По умолчанию: “round”

Подписи к осям координат labels

show (true/false)
Показывать или отключить подписи к осям координат.
По умолчанию: true

fontColor (string)
Цвет подписей. Можно использовать цвета hex, rgb или rgba.
По умолчанию: “#c5c6d0”

fontSize (число)
Размер шрифта подписей.
По умолчанию: 12

fontFamily (string)
Шрифт подписей.
По умолчанию: “sans-serif”

fontWeight (string)
Толщина шрифта.
По умолчанию: “normal”

Настройки линий графика line

width (число)
Толщина линий графика.
По умолчанию: 3

style (string)
Тип линий графика. Одно из 2 значений: curve – изогнутые линии, straight – прямые линии.
По умолчанию: “curve”

shadow (true/false)
Отображать или скрыть тень от линии.
По умолчанию: true

dasharray (число/string)
Управляет видом пунктирной обводки линий графика.
По умолчанию: null

Настройки точек графика point

show (true/false)
Показывать или отключить точки.
По умолчанию: true

radius (число)
Величина радиуса точки.
По умолчанию: 5

strokeWidth (число)
Толщина обводки точки.
По умолчанию: 5

stroke (string)
Цвет обводки точки. Можно использовать цвета hex, rgb или rgba.
По умолчанию: “#ffffff”

Значения valueOnliteChart

show (true/false)
Отображать или скрыть значения над точками графика.
По умолчанию: false

Примеры

#1 График без кастомных настроек

<div id="your-id" style="height: 400px;"></div>
<script>
document.addEventListener("DOMContentLoaded", function(){
	// Create liteChart.js Object
	let d = new liteChart("chart");

	// Set labels
	d.setLabels(["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]);

	// Set legends and values
	d.addLegend({"name": "Day", "stroke": "#CDDC39", "fill": "#fff", "values": [100, 200, 450, 400, 500, 300, 700, 800, 601, 705, 604, 803]});
	d.addLegend({"name": "Night", "stroke": "#3b95f7", "fill": "#fff", "values": [200, 150, 240, 180, 150, 240, 230, 300, 200, 150, 270, 200]});

	// Inject chart into DOM object
	let div = document.getElementById("your-id");
	d.inject(div);

	// Draw
	d.draw();
});
</script>

Наш график будет выглядеть примерно так:

#2 Прямые линии с подписями по осям

<div id="your-id" style="height: 400px;"></div>
<script>
document.addEventListener("DOMContentLoaded", function(){
	// Create liteChart.js Object
	let d = new liteChart("chart", {
		axisX: {
			show: true,
			color: "#e9edf1",
			width: 2,
			value: "₽",
		},
		axisY: {
			show: true,
			color: "#e9edf1",
			width: 2,
			value: "",
			minValue: 0,
			maxValue: 0,
		},
		fill: null,
		gridX: {
			show: true,
			interval: 170,
			fill: 1,
			label: {
				show: true
			},
			stroke:"#e9edf1",
			width:2,
			dasharray:"0 10.04",
			linecap:"round",
		},
		gridY: {
			show: false,
		},
		line: {
			width: 2,
			style: "straight",
			shadow: true,
		},
		point: {
			show: true,
			radius: 4,
			strokeWidth: 3,
			stroke: "#ffffff", // null or color by hex/rgba
		}
	});

	// Set labels
	d.setLabels(["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"]);

	// Set legends and values
	d.addLegend({"name": "Man", "stroke": "#FFC107", "fill": "#fff", "values": [100, 200, 450, 400, -120, 300, 700, 860, 601, 705, 604, 803, 150, 240, 230, 300, 200, 150, 270, 200,100, 200, 450, 400, 240, 230, 300, 200, 180, 270, 134]});
	d.addLegend({"name": "Woman", "stroke": "#9E9E9E", "fill": "#fff", "values": [200, 350, 240, 480, 150, 240, 230, 300, 200, 150, 270, 200,100, 200, 450, -50, -220, -300, 400, 860, 601, 705, 604, 803,200, 350, 240, 480, 150,53,423]});

	// Inject chart into DOM object
	let div = document.getElementById("your-id");
	d.inject(div);

	// Draw
	d.draw();
});
</script>

#3 График со сплошной заливкой

Послесловие

Если вы разбираетесь в CSS, вы можете добавить анимации к линиям или изменить оформление графиков под свои потребности. Многие элементы имеют css классы и вы легко можете управлять внешним видом.

P.S.: Скрипт на данный момент находится в стадии активного улучшения. Поэтому, если вы обнаружите “баги” пишите в комментариях.