Визуализация данных Chartist.js

Chartist.js - простые отзывчивые графики — Chartist.js — простые отзывчивые графики

Chartist.js — маленькая (10Кб в GZIP) JavaScript-библиотека которая создаёт простые отзывчивые графики. Она не зависит от других библиотек, т.е. может применяться самостоятельно. Диаграммы Chartist.js легко настраиваются и оформляются так, как это нужно разработчику. Библиотека использует SVG для построения графиков и поддерживается всеми современными браузерами. Большинство браузеров поддерживают SVG анимацию Chartist.js

Chartist.js. Подключение

Библиотека, руководство для начального использования Chartist.js и документация находятся на сайте Chartist.js. Самый простой способ, при помощи которого можно установить библиотеку — использование bower:

bower install chartist --save

HTML-страница при этом будет содержать подключения CSS и JavaScript-файлов библиотеки:

<!DOCTYPE html>
<html>
  <head>
    <title>My first Chartist Tests</title>
    <link rel="stylesheet"
          href="bower_components/chartist/dist/chartist.min.css">
  </head>
  <body>
    <!-- Site content goes here !-->
    <script src="bower_components/chartist/dist/chartist.min.js"></script>
  </body>
</html>

Но можно использовать и файлы CDN-хранилища:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
    <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
  </head>
</html>

Chartist помогает создать очень простой способ создания графиков. Первым делом мы прописываем контейнер для графика и указываем соотношение сторон этого контейнера:

<div class="ct-chart ct-perfect-fourth"></div>

Все варианты соотношений можно посмотреть на странице библиотеки Chartist, развернув таблицу соотношений кнопкой «Show available aspect ratios». Если указаны соотношения сторон, можно не указывать в настройках библиотеки ширину и высоту графика.

var data = {
  // Массив меток, который содержит любые значения
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  // Наш массив может содержать серию объектов или серии массивов с данными
  series: [
    [5, 2, 4, 2, 0]
  ]
};

// Создаем объект линейного графика с первым параметров - селектором.
// Второй параметр - объект с данными
new Chartist.Line('.ct-chart', data);

Если все же нужно будет указать в Chartjs ширину и высоту графика, то третьим аргументом будет передан объект со свойствами width и height:

var data = {
//код аналогичный предыдущему примеру
};

// У графика будет статичный размер 300x200 px. 
var options = {
  width: 300,
  height: 200
};
new Chartist.Bar('.ct-chart', data, options);

Размещение нескольких графиков на странице

<div class="ct-chart ct-golden-section" id="chart1"></div>
<div class="ct-chart ct-golden-section" id="chart2"></div>

<script>
  // Инициализируем линейный график через контейнер с ID chart1
  new Chartist.Line('#chart1', {
    labels: [1, 2, 3, 4],
    series: [[100, 120, 180, 200]]
  });

  // Инициализируем линейный график через контейнер с ID chart2
  new Chartist.Bar('#chart2', {
    labels: [1, 2, 3, 4],
    series: [[5, 2, 8, 3]]
  });
</script>

Конфигурирование графика Chartist.js

Chartist позволяет гибко настраивать свои графики. Для получения линейного графика

Нужно внести следующие настройки:

// метки и три серии данных
var data = {
  labels: ['Week1', 'Week2', 'Week3', 'Week4', 'Week5', 'Week6'],
  series: [
    [5, 4, 3, 7, 5, 10],
    [3, 2, 9, 5, 4, 6],
    [2, 1, -3, -4, -2, 0]
  ]
};

// Устанавливаем несколько опцией, меняя настройки по умолчанию
var options = {
  // не отрисовывать точки линейного графика
  showPoint: false,
  // Отключение сглаживания линий
  lineSmooth: false,
  // Настройки X-оси
  axisX: {
    // Отключаем сетку для этой оси
    showGrid: false,
    // и не показываем метки
    showLabel: false
  },
  // настройки Y-оси 
  axisY: {
    // Смещение от меток
    offset: 60,
    // Функция интерполяции метки позволяет менять значение метки,
    // в текущем примере появляются миллионы "m".
    labelInterpolationFnc: function(value) {
      return '$' + value + 'm';
    }
  }
};

// Не забываем включить третий параметр
new Chartist.Line('.ct-chart', data, options);

Адаптивность (отзывчивость) Chartist.js

Адаптивный дизайн основан на медиа-запросах. В Chartist.js можно указывать настройки адаптивности. Следующий код:

var data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul',
 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    series: [
    [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
    [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
  ]
};

var options = {
  seriesBarDistance: 15
};

var responsiveOptions = [
  ['screen and (min-width: 641px) and (max-width: 1024px)', {
    seriesBarDistance: 10,
    axisX: {
      labelInterpolationFnc: function (value) {
        return value;
      }
    }
  }],
  ['screen and (max-width: 640px)', {
    seriesBarDistance: 5,
    axisX: {
      labelInterpolationFnc: function (value) {
        return value[0];
      }
    }
  }]
];

new Chartist.Bar('.ct-chart', data, options, responsiveOptions);

Создаст график

chartist-bar-graph — Столбчатый график Chartist

Конфигурации для разных серий данных

Для получения разных конфигураций, подобно изображенных на изображении ниже, используются другой код

chartist-different-configuration — Разные конфигурации для разных серий данных

var chart = new Chartist.Line('.ct-chart', {
  labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
  // Naming the series with the series object array notation
  series: [{
    name: 'series-1',
    data: [5, 2, -4, 2, 0, -2, 5, -3]
  }, {
    name: 'series-2',
    data: [4, 3, 5, 3, 1, 3, 6, 4]
  }, {
    name: 'series-3',
    data: [2, 4, 3, 1, 4, 5, 3, 2]
  }]
}, {
  fullWidth: true,
  // С каждой серией можно указать имя серии, которое будет определять набор данных
  series: {
    'series-1': {
      lineSmooth: Chartist.Interpolation.step()
    },
    'series-2': {
      lineSmooth: Chartist.Interpolation.simple(),
      showArea: true
    },
    'series-3': {
      showPoint: false
    }
  }
}, [
  // Вы можете использовать адаптивную конфигурацию, перекрывая конфигурации ещё больше
  ['screen and (max-width: 320px)', {
    series: {
      'series-1': {
        lineSmooth: Chartist.Interpolation.none()
      },
      'series-2': {
        lineSmooth: Chartist.Interpolation.none(),
        showArea: false
      },
      'series-3': {
        lineSmooth: Chartist.Interpolation.none(),
        showPoint: true
      }
    }
  }]
]);

Оформление CSS по умолчанию

Линейный график Chartist.js:

/* Используйте этот селектор для переопределения стиля линейного графика */
.ct-series-a .ct-line {
  /* Цвет линии серии */
  stroke: red;
  /* Толщина линии */
  stroke-width: 5px;
  /* Пунктирная линия по шаблону */
  stroke-dasharray: 10px 20px;
}

/* Этот селектор перкрывает стиль точек линейного графика */
.ct-series-a .ct-point {
  /* Цвет точек */
  stroke: red;
  /* Размер точек */
  stroke-width: 20px;
  /* Сделать точки квадратами */
  stroke-linecap: square;
}

Столбчатый график Chartist.js:

/* Для переопределения стиля столбчатого графика. */
.ct-series-a .ct-bar {
  /* цвет столбцов */
  stroke: red;
  /* ширина столбца */
  stroke-width: 20px;
  /* Да! Пунктирные стобцы! */
  stroke-dasharray: 20px;
  /* Может вам понравится закруглить столбцы? */
  stroke-linecap: round;
}

Круговая диаграмма Chartist.js:

/* Круговой график содержит сплошные фрагменты, стили которых можно поменять. */
.ct-series-a .ct-slice-pie {
  /* заполненность фрагментов */
  fill: hsl(120, 40%, 60%);
  /* разделяем ломтики цветом фона */
  stroke: white;
  /* ширина внешней линии */
  stroke-width: 4px;
}

Кольцевая диаграмма Chartist.js:

/* Кольцевой график построен на круговых диаграммах, но использовался другой
конструкторский подход*/
.ct-series-a .ct-slice-donut {
  /* цвет фрагмента  */
  stroke: blue;
  /* оформляем толщину фрагмента в CSS */
  stroke-width: 5px !important;
  /* создаем закругленные варианты "пончиковой" диаграммы :) */
  stroke-linecap: round;
}

Оформление CSS по умолчанию

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

В следующем примере показано, как переопределить цвета линии линейного графика и точки на ней, в рамках двух первых серий (ct-series-a и ct-series-b).

.ct-series-a .ct-line,
.ct-series-a .ct-point {
  stroke: blue;
}

.ct-series-b .ct-line,
.ct-series-b .ct-point {
  stroke: green;
}

На этом мы завершаем рассмотрение замечательной JavaScript-библиотеки для создания графиков Chartist. На сайте Chartist.js вы найдёте как динамически раскрасить столбцы, как использовать анимацию с SVG, как переключать тип оси. Документация по Chartist и примеры использования Chartits.js.

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

2 комментария к “Визуализация данных Chartist.js”

Константин
12.04.2016

Highcharts.js — на заметку, легче и обладает более гибким функционалом и большим кол-вом настроек, чем вышеописанная библиотека . Как раз в Свете последних задач — сравнивал

Войдите, чтобы ответить
1. @altarasov
  12.04.2016
  
  Константин, спасибо. Вес у неё в 1000 раз больше, так что тяжелей. Библиотек много: простых и сложных, бесплатных и платных для коммерческого использования, м.б. кому-то и Highcharts.js пригодится.

Добавить комментарий

Для отправки комментария вам необходимо авторизоваться.