Графики в Vuejs09.11.2020 11:47

Я доволен экосистемой Vue. Как и положено, ты не городишь велосипеды, а пользуешься готовыми плагинами, которые за тебя написали умные дядьки. Когда твоя задача слишком мелкая и локальная, чтобы под неё написали плагин — ты идёшь и ищешь готовые компоненты, и только если не находишь ничего подходящего, чешешь репу и садишься писать своё решение. Таков порядок вещей, и я изрядно удивился, когда за вечер тестов не смог нормально отобразить ни одного подходящего мне графика. Пришлось немного подумать и переписать все примеры с Chart.js, чтобы разобраться с графиками раз и навсегда. Результаты ниже.

Chart.js

Chart.js давно стал одной из самых популярных чарт-библиотек из-за большого разнообразия графиков и глубокой кастомизации. Самый популярный и простой способ — воспользоваться популярной реализацией vue-chartjs:

  # npm
  npm install vue-chartjs chart.js --save
  # или yarn
  yarn add vue-chartjs chart.js

При подключении важно вынести график в отдельный компонент — несмотря на то, что vue-chartjs предлагает все типы графиков отдельными именованными компонентами, при подключении их напрямую, ломаются vuex и вычисляемые свойства.

Создадим отображение bar chart в дочернем компоненте:

  // BarChart.vue
  

В BarChart.vue нет тега template, потому что он подтягивается из компонента Bar. Если попытаетесь указать его — правильный template просто не появится, потому что его заменит написанный вами.

Подключаем Barchart в родительский компонент, здесь это App.vue:

  // App.vue
  

  

Данные и конфигурацию графика будем передавать из родительского компонента через props. За отрисовку отвечает функция renderChart, мы будем вызывать её при монтировании дочернего компонента:

  // BarChart.vue
  

Передаём props внутрь:

  // App.vue
  

  

Наконец, определим данные и конфиг:

  // App.vue

  /* ... */
  chartData: {
    labels: [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
      'September',
      'October',
      'November',
      'December'
    ],
    datasets: [
      {
        label: 'Data One',
        data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
      }
    ]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false
  }
  /* ... */

У Chart.js вагон настроек как глобальных (в options), так и локальных для отдельных датасетов (соответственно, в datasets). Они раскиданы по разным частям документации, но в целом всё полезное лежит здесь: https://www.chartjs.org/docs/latest/configuration.

Результат

Я умышленно опустил оформление, потому что это всё большая вкусовщина и в минимальный туториал по функционалу не вписывается. Но если что, вот мвой красивый конфиг для line chart с КДПВ:

  // App.vue

  /* ... */
  data: {
    labels: [...],
    datasets: [
      {
        label: '...',
        borderColor: '#77b7cd', // цвет линии
        pointBackgroundColor: '#77b7cd',
        // по умолчанию точки прозрачные, что не всегда красиво
        pointRadius: 4,
        data: [...]
      }
    ]
  },
  options: {
    responsive: true,
    /* график действительно адаптируется под мобильные экраны, но для более точной
    настройки приходится уточнить количество и точность подписей на осях */
    maintainAspectRatio: false,
    legend: {
      display: false // отключает легенду, бесполезную когда на графике одна линия
    },
    scales: {
      yAxes: [{
        display: true,
        ticks: {
          precision: 2, // точность округления значений по оси y
          maxTicksLimit: 4 // максимальное количество значений (и рёбер сетки) по оси y
        }
      }],
      xAxes: [{
        display: true,
        ticks: {
          maxTicksLimit: 5 // максимальное количество значений (и рёбер сетки) по оси x
        }
      }]
    }
  }
  /* ... */

Градиент при желании можно добавить так:

  // LineChart.vue
  /* ... */
  data () {
    return {
      gradient: null
    }
  },
  mounted () {
    this.gradient = this.$refs.canvas.getContext('2d').createLinearGradient(0, 0, 0, 450)
    this.gradient.addColorStop(0, 'rgba(255, 0,0, 0.5)')
    this.gradient.addColorStop(0.5, 'rgba(255, 0, 0, 0.25)');
    this.gradient.addColorStop(1, 'rgba(255, 0, 0, 0)');
    this.renderChart({
      labels: this.labels,
      datasets: [
        {
          label: '...',
          borderColor: '#FC2525',
          pointBackgroundColor: 'white',
          borderWidth: 1,
          pointBorderColor: 'white',
          backgroundColor: this.gradient,
          data: '...'
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})
  }
  /* ... */

Заключение

Надеюсь, эти примеры помогут тому, кто столкнётся с многообразием библиотек и плагинов для построения графиков. Chart.js — очень мощная и довольно удобная штука, весь геморрой обычно заключается в приведении входных данных в правильный формат датасета. Если знать нюансы подключения и оформления, можно пользоваться ей очень быстро.

Ссылки:
Набор демок от разработчика: http://demo.vue-chartjs.org/
Гайд по vue-chartjs: https://vue-chartjs.org/guide/
Репо vue-chartjs: https://github.com/apertureless/vue-chartjs
Доки Chart.js: https://www.chartjs.org/docs/latest/

На правах рекламы

Подыскиваете VDS для отладки проектов, сервер для размещения и разработки? Вы точно наш клиент :) Посуточная тарификация серверов самых различных конфигураций, антиDDoS и лицензии Windows уже включены в стоимость.

© Habrahabr.ru