CODYSHOP
темы и плагины для WordpressДля одного сайта было необходимо создать интерактивный график. Нет ничего проще! Однако исходный дизайн представлял собой богатый набор кривых, градиентов и теней. При этом нужно было найти лёгкое решение, с возможностью гибкого управления внешним видом. Для этой задачи я перебрал несколько готовых библиотек:
- 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.: Скрипт на данный момент находится в стадии активного улучшения. Поэтому, если вы обнаружите “баги” пишите в комментариях.
Подскажите пожалуйста, можно ли отразить ось? Нужно реализовать график вида “чем меньше число, тем выше оно на графике”.
К сожалению, в библиотеке такой возможности нет.
Привет!
подставил вместо массива переменную – не віводит наименование линии и в консоли пишет:
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)
и на оси y не показівает размерность
Как сделать график в примере 3?
Здравствуйте!
Можно ли сделать вертикальные подписи к оси x?
Не нашли, как можно вертикальные подписи сделать?
Похоже такой возможности нет. Я перешел на Гугл графики, там больше настроек в т.ч. изменение направления и угла наклона надписей. Очень удобно для широких графиков.
а как сделать чтобы по оси x график начинался с 0 а не с отступом
1. Работает во всех браузерах, кроме фаерфокса. Что ни делай, и размеры в скрипте не помогают, график в фаерфоксе показывается скукоженно-сжатым.
2. Нельзя вывести два и больше графиков на 1 странице. Выводится только 1 график, самый первый.
добавьте css
.chart {
min-height:400px;
width:100%;
}
Это не помогает, я так тоже делал 🙁
и несколько графиков не вывести, это большая проблема.
К примеру я сделал на странице вкладки на css, на каждой график. Так вот работает только тот график который на первой вкладке. Также нельзя отобразить на одной странице два графика.
В функции liteChart.prototype.getWidth и liteChart.prototype.getHeight для firefox всё же лучше использовать this.panel.parentElement.clientWidth.
собственно и для panel размеры выставлять так же.
liteChart.prototype.getWidth = function() {
return this.panel.parentElement.clientWidth;
}
так же в функциях drawAxisX и drawAxisY нужно добавить атрибут axisX.setAttribute(“shape-rendering”, “crispEdges”); – иначе линии которые должны быть толщиной в 1px будут толщиной в 2 пикселя (размыты)
Невозможность добавить 2 графика на одну страницу – это лень автора скрипта, непонятно зачем ограничено в самом скрипте, может так было проще делать, хоть и не на много.
А возможно сделать разорванный график? Это гогда нет данных для какой-то из заданых точек оси X.
Добрий день!
А подписи осей на русском или украинском не работает, правильно?
Всё хорошо и в мозиле если поправить char, но столкнулся с проблемой, tooltips отображается не правильно. Как по мне он ловит координаты из общего окна а не из области и вставляет в tooltips, который настроен под область. Есть решение такого? просто спросил, вдруг есть ответ чтоб самому весь код не проверять
Не нашли как исправить tooltips ?
Как выводить знак процентов (value) у valueOnliteChart?
График пропадает при изменении размеров окна, что не приятно. Пришлось отказаться от анимации, чтобы решить эту проблему:
animate: { show: false, duration: 0.5, },
Скрипт прям топ! Но вот эти мелкие баги прям бесят, и в итоге использование скрипта под вопросом. Например tooltip всплывает в совсем левом месте. Как пофиксить?
Отличный скрипт, но приклеилась реклама. Не смог убрать.