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

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

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

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

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

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

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

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

Bower

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

bower install chartist --save

NPM

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

npm install chartist --save

CDN

Другой быстрый способ, чтобы начать с чартистских является использование CDN.Люди в jsDelivr делают фантастическую работу по поддержанию огромное количество библиотек в курсе их заказ нагрузки balancing __43 | | 3__9 , и они делают все это бесплатно.Чтобы использовать ресурсы чартистских от 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 ⁴ создать наши карты.JSBin является большим совместным веб-разработки инструментов отладки и чартистское доступно непосредственно в меню “Добавить библиотеку”.Если вы хотите попробовать чартистских быстро, я рекомендую использовать JSBin .

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

Simple line chart with three series — Простой линейный график с тремя 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 27 ~ и | для нашей диаграммы .

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 __26 | 6

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

В приведенном выше примере мы использовали фиксированный ~ 26 и ~ | 27 | для диаграммы.Это не всегда желательно, а в отзывчивого дизайна мы должны держать наши элементы жидкости и не думаю, что в определенных размеров .

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

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

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

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

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 ¹⁰

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

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

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

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

A simple bar chart with two series — Простой гистограмма с двумя 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 __32 | 12

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

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

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

Редактировать на JSBin __50 | 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 ¹⁵ реализовать наследование в наших настройках, похожий на то, что CSS делает с нашими стилей .

Bar chart with responsive configuration overrides — Гистограмма с отзывчивым конфигурации 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 __26 | 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 __54 | 18 .

A chart with custom CSS styling — График с пользовательским 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 ²⁰

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

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

Главная → Программирование → 16.12.2014 by coding.smashingmagazine.com