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

1934922

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

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

В этой статье хочу представить вашему вниманию простенькую библиотеку для создания вот таких линейных графиков. Вес библиотеки получился сравнительно небольшим: всего 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.: Скрипт на данный момент находится в стадии активного улучшения. Поэтому, если вы обнаружите “баги” пишите в комментариях.

22 comments to post “"Красивый JS график на сайт: лёгкая библиотека для ваших проектов"
  • Ян Александров
    Александр21 Mar 2020 14:37

    Подскажите пожалуйста, можно ли отразить ось? Нужно реализовать график вида “чем меньше число, тем выше оно на графике”.

    Reply
    • Ян Александров
      Ян АлександровAuthor21 Mar 2020 16:12

      К сожалению, в библиотеке такой возможности нет.

      Reply
  • Ян Александров
    E26 Mar 2020 19:24

    Привет!
    подставил вместо массива переменную – не віводит наименование линии и в консоли пишет:
    liteChart.js:958 Uncaught ReferenceError: id is not defined
    at liteChart.js:958
    at Array.forEach ()
    at drawLegendTable (liteChart.js:924)
    at liteChart.draw (liteChart.js:1594)

    Reply
  • Ян Александров
    E26 Mar 2020 19:26

    и на оси y не показівает размерность

    Reply
  • Ян Александров
    43 Nov 2020 17:31

    Как сделать график в примере 3?

    Reply
  • Ян Александров
    Ульяна24 Jan 2021 07:40

    Здравствуйте!
    Можно ли сделать вертикальные подписи к оси x?

    Reply
    • Ян Александров
      Сереженька сынок7 Jun 2023 08:14

      Не нашли, как можно вертикальные подписи сделать?

      Reply
      • Ян Александров
        Дмитрий31 Aug 2023 10:05

        Похоже такой возможности нет. Я перешел на Гугл графики, там больше настроек в т.ч. изменение направления и угла наклона надписей. Очень удобно для широких графиков.

  • Ян Александров
    Линар15 Feb 2021 00:52

    а как сделать чтобы по оси x график начинался с 0 а не с отступом

    Reply
  • Ян Александров
    Сергей26 Jul 2021 18:46

    1. Работает во всех браузерах, кроме фаерфокса. Что ни делай, и размеры в скрипте не помогают, график в фаерфоксе показывается скукоженно-сжатым.
    2. Нельзя вывести два и больше графиков на 1 странице. Выводится только 1 график, самый первый.

    Reply
    • Ян Александров
      Илья21 Aug 2021 12:22

      добавьте css
      .chart {
      min-height:400px;
      width:100%;
      }

      Reply
      • Ян Александров
        Сергей23 Aug 2021 18:18

        Это не помогает, я так тоже делал 🙁
        и несколько графиков не вывести, это большая проблема.
        К примеру я сделал на странице вкладки на css, на каждой график. Так вот работает только тот график который на первой вкладке. Также нельзя отобразить на одной странице два графика.

    • Ян Александров
      niesoft15 Feb 2023 10:38

      В функции liteChart.prototype.getWidth и liteChart.prototype.getHeight для firefox всё же лучше использовать this.panel.parentElement.clientWidth.
      собственно и для panel размеры выставлять так же.

      liteChart.prototype.getWidth = function() {
      return this.panel.parentElement.clientWidth;
      }

      Reply
      • Ян Александров
        Niesoft15 Feb 2023 11:11

        так же в функциях drawAxisX и drawAxisY нужно добавить атрибут axisX.setAttribute(“shape-rendering”, “crispEdges”); – иначе линии которые должны быть толщиной в 1px будут толщиной в 2 пикселя (размыты)

        Невозможность добавить 2 графика на одну страницу – это лень автора скрипта, непонятно зачем ограничено в самом скрипте, может так было проще делать, хоть и не на много.

  • Ян Александров
    Вадим21 Aug 2021 18:02

    А возможно сделать разорванный график? Это гогда нет данных для какой-то из заданых точек оси X.

    Reply
  • Ян Александров
    Олег10 Dec 2021 16:45

    Добрий день!
    А подписи осей на русском или украинском не работает, правильно?

    Reply
  • Ян Александров
    Александр1 Apr 2022 17:30

    Всё хорошо и в мозиле если поправить char, но столкнулся с проблемой, tooltips отображается не правильно. Как по мне он ловит координаты из общего окна а не из области и вставляет в tooltips, который настроен под область. Есть решение такого? просто спросил, вдруг есть ответ чтоб самому весь код не проверять

    Reply
    • Ян Александров
      Сереженька сынок5 Jun 2023 08:00

      Не нашли как исправить tooltips ?

      Reply
  • Ян Александров
    Регис20 Jul 2022 05:42

    Как выводить знак процентов (value) у valueOnliteChart?

    Reply
  • Ян Александров
    Алексей25 Nov 2022 10:01

    График пропадает при изменении размеров окна, что не приятно. Пришлось отказаться от анимации, чтобы решить эту проблему:
    animate: { show: false, duration: 0.5, },

    Reply
  • Ян Александров
    Сереженька сынок4 Jun 2023 19:36

    Скрипт прям топ! Но вот эти мелкие баги прям бесят, и в итоге использование скрипта под вопросом. Например tooltip всплывает в совсем левом месте. Как пофиксить?

    Reply
  • Ян Александров
    Дмитрий20 Aug 2023 07:47

    Отличный скрипт, но приклеилась реклама. Не смог убрать.

    Reply
Leave a Reply

B I PHP JS

Made with by CodyShop