Делаем красивые графики на JavaScript с помощью Chartist.js.
Привет всем! Вы желаете создавать красивые графики у себя на сайте для пользователей или в админ панели? Если да, то эта простая библиотека для вас!
Найти ее исходники вы можете здесь:
В чем ее особенности? Во-первых, она поддерживает сразу несколько отображений, их все вы можете посмотреть по ссылке выше.
Во-вторых, данная библиотека использует SVG, поэтому она отображается отлично при любом масштабе.
В-третьих, легкое управление.
В-четвертых, поддержка анимации.
И еще много интересного, о чем вы можете почитать на официальном сайте.
Вопросов по ее использованию у вас также не должно возникнуть, т.к. на сайте есть подробная документация, которую вы можете найти, кликнув по кнопке "Getting started".
Скачайте необходимые скрипты и стили, подключите их.
Сделайте разметку
<div class="ct-chart ct-perfect-fourth"></div>
Создайте объект с настройками, проведите линию с этими настройками.
var data = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [
[5, 2, 4, 2, 0]
]
};
Chartist.Line('.ct-chart', data);
Вы можете также передавать опции третьим параметром
var data = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [
[5, 2, 4, 2, 0]
]
};
var options = {
width: 300,
height: 200
};
Chartist.Bar('.ct-chart', data, options);
Здесь достаточно много настроек, описывать которые нет смысла. Если вас заинтересовало, то переходите в официальную документацию и почитайте все сами.
А у меня на этом все, думаю, найти применение данной библиотеке вы сможете. Спасибо за внимание и удачи!
-
Создано 31.08.2014 20:41:34
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.