Давайте рассмотрим один из способов отображения диаграмм на вашем сайте.

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

Я уверен, что есть много разных способов использования и создания диаграмм, но в этой статье мы поговорим о том, как я их использовал. А точнее, графики будем создавать с помощью библиотеки HighCharts.

Что такое HighCharts?

HighCharts — это библиотека, созданная для разработчиков и помогающая вам отображать всевозможные диаграммы, которые вы или ваш клиент можете себе представить.

Вот ссылка: https://www.highcharts.com/

Зачем ее использовать? Ну, как по мне, это одна из библиотек, которая имеет больше всего возможностей и позволяет реализовать задачи разного уровня сложности.

HighCharts Vue против HighCharts JS

Существуют разные способы использования HighCharts на Vue. Первый — классический, сделанный для Vue и уже адаптированный для него, а другой — простой JavaScript, который требует некоторых дополнительных модификаций.

В чем основное различие между ними? Это производительность.

Если ваши потребности довольно просты, когда вам просто нужно отобразить обычную диаграмму без каких-либо пользовательских изменений, вы можете просто использовать для этих целей HighCharts Vue. Однако, если ваши потребности более сложны и требуют некоторых настраиваемых параметров, вы можете выбрать HighCharts JS.

В этой статье мы создадим небольшой микс из классического HighCharts JS, используя его в проекте Vue.

Использование HighCharts JS в Vue

Добавление конфигураций

Перво-наперво. Начнем с настройки, которая довольно проста.

Вам не нужно ничего скачивать, просто добавьте эту строку в заголовок вашего основного HTML-файла.

<script src="https://code.highcharts.com/highcharts.js"></script>

Это добавит диаграммы на ваш веб-сайт, и вы сможете отображать их на своих страницах Vue.

Создание компонента Vue

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

Возьмем в качестве примера Базовый линейный график.

Окончательный результат будет выглядеть так:

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

<template>
  <div>
    <div></div>
  </div>
</template>
<script>
export default {
name : "BasicLineChart",
props: {
  colors: Array,
  data: Array,
  categories: Array,
  sideText: String
},
data : function() {
   return {
      target: undefined
   }
},
mounted() { 
   this.target = Highcharts.chart(this.$el, {
     title: {
       text: ''
     },
     subtitle: {  
       text: ''
     },
     colors: this.colors,
     legend: {
       enabled: false
     },
     yAxis: {
       title: {
         text: this.sideText
       }
     },
     xAxis: {
       categories: this.categories
     },
     series: [{
       data: this.data
     }],
     responsive: {
       rules: [{
         condition: {
            maxWidth: 500
         }
      }]
    }
    });
 },
 beforeDestroy: function() {
    this.target.destroy();
 },
}
</script>

Я знаю, что это выглядит длинно и не очень понятно, но это параметры, которые мы используем в HighCharts, чтобы настроить его так, как мы хотим отображать диаграммы.

Каждая диаграмма, конечно, может иметь свои собственные параметры, но в целом некоторые из основных параметров остаются прежними.

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

Использование реквизита

Если ваша цель — сделать компонент диаграммы многоразовым, важно определить реквизиты для определенных параметров.

Вы видите, например, что мы можем изменить такие вещи, как "цвет", "данные", категории и все остальное, что вы хотели бы изменить.

Тем не менее, очень важно проверить тип реквизита, который необходимо определить. Например, реквизит "colors" ожидает массив, а не Строка, как можно подумать.

Использование компонента

А теперь последний шаг — использование нашего нового компонента на странице Vue.

<BasicLineChart :data="data" :colors="color" :side-text="sideText" :categories="categories"/>

Вот компонент со всеми основными реквизитами, которые мы определили для изменения цвета, данных и текста.

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

data() {
return {
data: [30, 12, 58, 44, 12, 46, 89, 67],
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
title: "Test chart", 
sideText: "Some data", 
color: ["#2D9CDB"],
}
},

Заключение

Это оно! 😊 Мы только что создали нашу собственную диаграмму Vue с помощью библиотеки HighCharts.

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

Спасибо, что прочитали!