Создаём крутые диаграммы с Vue.js и Chart.js

Разработка /
Разработка: Создаём крутые диаграммы с Vue.js и Chart.js

Интерактивные графики прекрасно визуализируют ваши данные, отчеты и т.п. Сегодня мы попробуем создать приложение с действительно классными графиками на Vue.js с Chart.js и покажем как настраивать эту библиотеку для достижения требуемого результата.

Быстрый старт

Мы будем использовать в проекте следующие инструменты:


С помощью утилиты vue-cli мы создадим базовую структуру проекта. Поэтому убедитесь, что она у вас установлена.

vue init webpack awesome-charts

Затем перейдём в папку проекта и установим зависимости:

cd awesome-charts && yarn install

Добавим vue-chartjs, через него мы будем работать с Chart.js:

yarn add vue-chartjs -S


Первый график

Создадим первый линейный график:

touch src/components/LineChart.js && subl .


Импортируем Line BaseChart из vue-chartjs и создадим наш компонент. В функции mount() нам необходимо вызвать метод renderChart() с нашими данными и параметрами.

Файл LineChart.js:
import {Line} from 'vue-chartjs'

export default Line.extend({
  mounted () {

    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#FC2525',
          data: [40, 39, 10, 40, 39, 80, 40]
        },{
          label: 'Data Two',
          backgroundColor: '#05CBE1',
          data: [60, 55, 32, 10, 2, 12, 53]
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})

  }
})

Здесь мы передали простой объект данных chart.js с небольшим количеством данных и в параметрах указали responsive: true. Таким образом, размер графика будет расти пропорционально размеру внешнего контейнера.

Теперь мы можем удалить компонент Hello.vue из файла App.vue и импортировать наш график.

<template>
  <div id="app">
    <div class="container">
      <div class="Chart__list">
        <div class="Chart">
          <h2>Linechart</h2>
          <line-example></line-example>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LineExample from './components/LineChart.js'
export default {
  name: 'app',
  components: {
    LineExample
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.container {
  max-width: 800px;
  margin:  0 auto;
}
</style>


Запустим наше приложение и сможем увидеть результат в браузере:

yarn run dev 


Украшательства

Перейдём к настройке chart.js. Мы можем передать шестнадцатеричное значение цвета в backgroundColor; Но можем передать и значение rgba(). Таким образом, можно сделать цвет прозрачным. А так как chart.js использует канву (html canvas) для отрисовки, мы сможем использовать createLinearGradient().

Но для него нужен объект канвы, и vue-chartjs как раз содержит ссылку на него. Мы можем взять её как this.$refs.canvas.

В файле LineChart.js создадим две переменные для градиентов. Каждая на свой набор данных.

this.gradient = this.$refs.canvas
 .getContext(‘2d’)
 .createLinearGradient(0, 0, 0, 450)
this.gradient2 = this.$refs.canvas
 .getContext(‘2d’)
 .createLinearGradient(0, 0, 0, 450)

И есть ещё одна крутая функция: addColorStop()

Создадим три colorStop-а для каждого градиента, для 0%, 50% и 100%.

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.gradient2.addColorStop(0, ‘rgba(0, 231, 255, 0.9)’)
this.gradient2.addColorStop(0.5, ‘rgba(0, 231, 255, 0.25)’);
this.gradient2.addColorStop(1, ‘rgba(0, 231, 255, 0)’);


Теперь мы можем передать this.gradient в backgroundColor. У нас получился симпатичный градиент, а чтобы сделать его ещё лучше, мы настроим borderColor в индивидуальный цвет с alpha, равной 1, установим borderWidth в 1 и изменим pointColor:

borderColor: ‘#FC2525’, 
pointBackgroundColor: ‘white’, 
borderWidth: 1, 
pointBorderColor: ‘white’,


import {Line} from 'vue-chartjs'

export default Line.extend({
  data () {
    return {
      gradient: null,
      gradient2: null
    }
  },
  mounted () {
    this.gradient = this.$refs.canvas.getContext('2d').createLinearGradient(0, 0, 0, 450)
    this.gradient2 = 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.gradient2.addColorStop(0, 'rgba(0, 231, 255, 0.9)')
    this.gradient2.addColorStop(0.5, 'rgba(0, 231, 255, 0.25)');
    this.gradient2.addColorStop(1, 'rgba(0, 231, 255, 0)');


    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Data One',
          borderColor: '#FC2525',
          pointBackgroundColor: 'white',
          borderWidth: 1,
          pointBorderColor: 'white',
          backgroundColor: this.gradient,
          data: [40, 39, 10, 40, 39, 80, 40]
        },{
          label: 'Data Two',
          borderColor: '#05CBE1',
          pointBackgroundColor: 'white',
          pointBorderColor: 'white',
          borderWidth: 1,
          backgroundColor: this.gradient2,
          data: [60, 55, 32, 10, 2, 12, 53]
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})

  }
})


Добавим стили для контейнера нашего App.vue в файле Styling.css:

.Chart {
  background: #212733;
  border-radius: 15px;
  box-shadow: 0px 2px 15px rgba(25, 25, 25, 0.27);
  margin:  25px 0;
}

.Chart h2 {
  margin-top: 0;
  padding: 15px 0;
  color:  rgba(255, 0,0, 0.5);
  border-bottom: 1px solid #323d54;
}


Результат

Разработка: Создаём крутые диаграммы с Vue.js и Chart.js

По материалам «Creating stunning charts with Vue.js and Chart.js» by Jakub Juszczak

UPD: увидеть вживую этот пример и другие виды графиков с vue-chartjs можно посмотреть здесь.
0 комментариев
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.