Abr@X@bra.ru
Создание потрясающих диаграмм с Vue.js и Chart.js
Создание потрясающих диаграмм с Vue.js и Chart.js

Создание потрясающих диаграмм с Vue.js и Chart.js

04.07.2017
2325

Погрузитесь в опции chart.js, чтобы создать потрясающие диаграммы.

Интерактивные диаграммы могут обеспечить прекрасный способ визуализации ваших данных.

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

Я покажу вам, как настроить параметры chart.js, чтобы сделать крутые диаграммы!

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

Что мы будем использовать:

Vue.js

Vue-chart.js

vue-cli

Мы используем vue-cli для создания базовой структуры. Поэтому я надеюсь, что вы уже установили его. И мы используем vue-chart.js в качестве оболочки для построения диаграмм.

vue init webpack awesome-charts

Затем переходим в папку проекта и устанавливаем зависимости.

cd awesome-charts && yarn install
Добавляем vue-chartjs:
yarn add vue-chartjs -S

Наш первый график

Итак, давайте создадим нашу первую линейную диаграмму.

touch src/components/LineChart.js

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

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 есть несколько интересных трюков. Мы можем передать значение цвета hex в backgroundColor; Но мы также можем передать значение rgba (). Поэтому мы можем сделать наш цвет прозрачным. И поскольку chart.js использует html canvas для отрисовки, мы можем использовать createLinearGradient ()

Здесь начинается веселье. Но для его использования нам нужен объект canvas. Но это не имеет большого значения, поскольку vue-chartjs ссылается на него. Мы можем получить к нему доступ. $ 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 (). Мы создаем три colorStops для каждого градиента - 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, ‘#ff0000’);
 
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, ‘#00e7ff’);
Теперь мы можем передать this.gradient в backgroundColor. И у нас очень хороший градиент. Чтобы получить более приятный эффект, мы также устанавливаем borderColor для отдельного цвета с альфа-единицей 1. Установим borderWidth равным 1.
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, '#ff0000');
    
    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, '#00e7ff');


    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

.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
Читайте также:
Vue.js 2 + Firebase

Vue.js 2 + Firebase

Создание веб-приложений в режиме реального времени с использованием Vue.js 2 и Firebase.
Читать
Vue.js наступает на пятки React и Angular

Vue.js наступает на пятки React и Angular

Какая магия Vue.js заставляет его завоевывать сердца разработчиков? Давай выясним!
Читать
React vs Angular: подробное сравнение

React vs Angular: подробное сравнение

Должен ли я выбрать Angular или React? Сегодняшний полярный ландшафт JavaScript-фреймворков заставил многих разработчико...
Читать