Главная → Программирование → by

Chartist.js, Open-Source библиотека для ответственную Графики

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

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

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

Chartist guy pointing at a chart 1
Чартистское парень, указывая на chart

Ваши индивидуальные Setup

Вы можете интегрировать библиотеку чартистского в вашем проекте по-разному.Он доступен Бауэр и НПМ, но и непосредственно от сети доставки контента (CDN).Он также разоблачен как модуля CommonJS, как модуль AMD или просто в глобальном объекте окна.Вы можете решить, как наилучшим образом интегрировать библиотеку в соответствии с настройкой вашего проекта .

Чартистское в настоящее время использует универсальный модуль Definition 2 обертку, чтобы удовлетворить широкий спектр вариантов использования.Вместо того чтобы использовать чартистских непосредственно из Chartist имен в объекте окна, вы можете использовать модуль погрузчики, как RequireJS, не связывайте свои графики в вашем приложении с Browserify или WebPack .

Bower

Для установки чартистских как переднего плана зависимость с помощью Бауэр, просто выполните следующую команду в папке вашего проекта: 

bower install chartist --save

NPM

Если вы предпочитаете НПМ в качестве хранилища, или если вы используете браузер Bundler CommonJS как Browserify или WebPack, то вы хотите установить чартистских помощью НПМ: 

npm install chartist --save

CDN

Другой быстрый способ, чтобы начать с чартистских является использование CDN.Люди в jsDelivr делают фантастическую работу по поддержанию огромное количество библиотек в курсе их заказ нагрузки balancing 3 , и они делают все это бесплатно.Чтобы использовать ресурсы чартистских от в CDN, включают в себя следующее в вашем HTML: 

<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />

Создать свой первый Chart

После того как вы выбрали метод, который соответствует вашим потребностям, вы можете начать крафта свой первый график.В течение этогостатье мы будем использовать JSBin 4 создать свои графики.JSBin является большой совместный веб-разработки инструментом отладки, и чартистское можно получить непосредственно в меню “Добавить библиотеку”.Если вы хотите попробовать чартистских быстро, я рекомендую использовать JSBin .

Давайте начнем с простого линейного графика.Для этого мы сначала добавьте элемент контейнера для нашей body с классом ct-chart .

Simple line chart with three series 5
Простой линейный график с тремя series
<!DOCTYPE html>
<html>
<head>
  <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
  <link href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
  <title>Chartist | Simple line chart</title>
</head>
<body>
  <div class="ct-chart"></div>
</body>
</html>

Теперь мы можем инициализировать линейный график на контейнере с только несколько строк JavaScript.Давайте создадим три серии, с пяти значений каждого.Мы также задать список меток для оси х.В качестве второго аргумента, Chartist.Line конструктор принимает объект вариантов, в.Здесь мы можем указать фиксированный width и height для нашей диаграмме .

new Chartist.Line('.ct-chart', {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [
    [2, 3, 2, 4, 5],
    [0, 2.5, 3, 2, 3],
    [1, 2, 2.5, 3.5, 4]
  ]
}, {
  width: 320,
  height: 240
});

Редактировать на JSBin 6

Отзывчивый Контейнеры с внутренней Ratios

В приведенном выше примере мы использовали фиксированный width и height диаграммы.Это не всегда желательно, а в реагирующей дизайна мы должны держать наши элементы жидкости и не думаю, что в определенных размеров .

Чартистское использует свои собственные классы, чтобы установить контейнеры с фиксированными пропорциями (внутренние отношения) от.Как правило, это техника применяется для чувствительных видео и встроенных, и использует внутренняя соотношение CSS trick 7 установить фиксированное соотношение контейнер.С реализация в Chartist 8 , вы даже можете установить ширину контейнера при сохранении пропорций .

Давайте использовать один из созданных отзывчивых контейнерных классов в чартистских размера нашу диаграмму.Я взял ct-golden-section, но вы можете выбрать любой из список генерируется контейнера classes 9 .При использовании версии Сасс из чартистских, вы также можете создавать свои собственные хранилища фиксированной удлинения легко .

<body>
  <div class="ct-chart ct-golden-section"></div>
</body>

Потому что мы сейчас с указанием контейнер с фиксированной степени аспект на нашем графике, мы больше не нужно полагаться на фиксированных размеров при инициализации нашу диаграмму.Давайте снимем width и height в нашей конфигурации .

new Chartist.Line('.ct-chart', {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [
    [2, 3, 2, 4, 5],
    [0, 2.5, 3, 2, 3],
    [1, 2, 2.5, 3.5, 4]
  ]
});

Редактировать на JSBin 10

Теперь у нас есть график, который реагирует на изменения в средствах массовой информации.Попробуйте изменить размер панели вывода на JSBin чтобы увидеть, как схема адаптируется к изменениям в размер окна .

Расширенный Configuration

Один из основных принципов чартистских является четкое разделение проблем с помощью стандартных веб-технологий.Это включает в себя применение всех настроек внешнего вида, связанных с CSS.Кроме того, количество настроек позволит вам контролировать поведение вашего графика.Эти настройки применяются с использованием JavaScript и может быть передан в вашем графике во время инициализации .

Давайте создадим простой гистограммы, которая визуализирует некоторые данные для будних дней .

A simple bar chart with two series 11
Простой гистограмма с двумя series
new Chartist.Bar('.ct-chart', {
  labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
  series: [
    [2, 8, 2, 4, 5, 8, 10],
    [4, 5, 8, 2, 6, 3, 10]
  ]
}, {
  seriesBarDistance: 30,
  axisX: {
    showGrid: false
  }
});

Редактировать на JSBin 12

В опциях можно контролировать расстояние до баров и сказать чартистских не оказывать сетку на оси х.Для получения полного списка опций, вы всегда можете посетить API documentation__2 чартистских в | 13 .

По умолчанию, метки на оси х по левому краю.Чтобы сделать их выровнен по центру, мы должны добавить стиль CSS.Мы также хотим, чтобы изменить ширину баре на 20 пикселей .

.ct-chart .ct-bar {
  stroke-width: 20px;
}
.ct-chart .ct-label.ct-horizontal {
  text-align: center;
}

Редактировать на JSBin 14

Уже, мы получили хороший вид гистограмму для больших экранов .

Отзывчивый Конфигурация Override

Пример выше работает хорошо на настольных экранов, но не на устройствах с жесткой разрешениях экрана.Стержни слишком широк, этикетки слишком большой и имена дней недели написаны в полном объеме.Кроме того, расстояние между баров нуждается в корректировке .

Некоторые из этих изменений может быть сделано в CSS, изменив ширину бара в пресс-запроса.Но как же нам идти о применении различных конфигураций в JavaScript?Чартистское обеспечивает механизм для этой цели под названием реагировать конфигурация переопределения .

Давайте посмотрим на предыдущем примере, и переписать его с мобильных первого подхода.Мы оптимизировать запросы наших СМИ за содержание Мы работаем с, представляя точку останова на 300 пикселей, а другой на 600 пикселей .

.ct-chart .ct-label.ct-horizontal {
  text-align: center;
}
.ct-chart .ct-bar {
  stroke-width: 5px;
}
@media screen and (min-width: 300px) {
  .ct-chart .ct-bar {
    stroke-width: 10px;
  }
}
@media screen and (min-width: 600px) {
  .ct-chart .ct-bar {
    stroke-width: 20px;
  }
}

Если бы мы хотели, чтобы адаптировать нашу диаграмму для конкретного среды, мы можем использовать ответные переопределения конфигурации.Мы просто сказать чартистских наследовать и переопределить основе наша конфигурацияна тех же запросов СМИ в нашей CSS.Чартистское использует window.matchMedia 15 реализовать наследование в наших настройках подобное тому, что CSS делает с нашими типами .

Bar chart with responsive configuration overrides 16
Гистограмма с высокой скоростью отклика конфигурации overrides

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

new Chartist.Bar('.ct-chart', {
  labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
  series: [
    [2, 8, 2, 4, 5, 8, 10],
    [4, 5, 8, 2, 6, 3, 10]
  ]
}, {
  seriesBarDistance: 6,
  axisX: {
    showGrid: false,
    // Only return first letter of weekday names
    labelInterpolationFnc: function(value) {
      return value[0];
    }
  }
}, [
  // Over 300px, we change the bar distance and show the first three letters of the weekdays
  ['screen and (min-width: 300px)', {
    seriesBarDistance: 15,
    axisX: {
      labelInterpolationFnc: function(value) {
        return value.slice(0, 3);
      }
    }
  }],
  // Over 600px, we increase the bar distance one more time and show the full weekdays
  ['screen and (min-width: 600px)', {
    seriesBarDistance: 30,
    axisX: {
      labelInterpolationFnc: function(value) { return value; }
    }
  }]
]);

Редактировать на JSBin 17

В приведенном выше примере, вы можете увидеть, как легко создать диаграмму, которая работает на мобильных и настольных, сохраняя четкое разделение проблем .

Стайлинг SVG С CSS

Стайлинг встроенный SVG с CSS легко и эффективно, потому что вы сможете использовать стили для различных хит-парадов.Вы можете включать CSS классы, которые определяют внешний вид ваших графиков и держать логику отделенную от появления .

Вот некоторые из наиболее полезных свойств CSS для укладки встроенного SVG:

  • fillУстанавливает цвет заливки фигуры.Вы можете использовать RGBA .
  • strokeУстанавливает цвет контура вокруг фигуры .
  • stroke-widthУстанавливает ширину контура .
  • stroke-dasharrayУказывает пунктирную обводку контуром .
  • stroke-linecapУстанавливает обводку линии крышки для контура фигуры.Это может быть установлен на round, butt или square .

Проверить SVG 1.1 спецификации для Полный список SVG укладки properties 18 .

A chart with custom CSS styling 19
График с пользовательскими CSS styling

Давайте попробуем применить наши новые навыки моделирования и создания линейный график с тремя различными глядя серии.Мы будем использовать все вышеперечисленные свойства для укладки, чтобы дать нашим Диаграмма уникальный внешний вид .

.ct-chart .ct-label.ct-vertical,
.ct-chart .ct-label.ct-horizontal {
  color: rgba(255, 255, 255, 0.5);
}
.ct-chart .ct-grid.ct-vertical,
.ct-chart .ct-grid.ct-horizontal {
  stroke: rgba(255, 255, 255, 0.1);
  shape-rendering: crispEdges;
}
.ct-chart .ct-series.ct-series-a .ct-line {
  stroke: #4ECDC4;
  stroke-width: 10px;
  stroke-linecap: round;
}
.ct-chart .ct-series.ct-series-b .ct-line {
  stroke: #C7F464;
  stroke-width: 2px;
  stroke-dasharray: 5px 2px;
}
.ct-chart .ct-series.ct-series-c .ct-line {
  stroke: #FF6B6B;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-dasharray: 30px 5px;
}

Редактировать на JSBin 20

Если вы играете вокруг с этим примером немного, вы быстро поймете, как легко это стиль SVG с CSS.Кроме того, вы, возможно,заметили shape-rendering: crispEdges Стиль на линии сетки.Пока я не включал shape-rendering недвижимость в список полезных свойств для укладки, вы увидите, что очень удобно в некоторых ситуациях.Это позволяет дать браузеру несколько советов о том, чтобы сделать SVG.Значения auto, optimizeSpeed, crispEdges, и geometricPrecision поддерживаются спецификации.Предназначен для контроля за исполнением, это свойство также удобно для оказания опреде …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → by

Comments are closed.