WordPress, Vue и Chart.js

Интегрируйте Chart.js в свой сайт WordPress и создавайте необычные диаграммы.

Что ж, визуализация данных - горячая тема. В повседневной работе я много работаю с WordPress и Vue.js. Я не могу сказать, насколько я 💘 Vue.js и насколько чище мой рабочий процесс и код из-за этого.

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

Время от времени вы можете добавлять какие-нибудь крутые диаграммы, чтобы очаровывать свои статьи хорошими данными, и это довольно просто с vue и chart.js.

Предпосылки

• 🔧 Расширенные настраиваемые поля (да, не могу без них)
• ⚡ Vue.js
• 📊 vue-chart.js

Я строю большинство проектов, используя стек скала и шалфей в качестве начальной темы. Однако вы можете реализовать это и в любой другой теме.
Однако я не буду вдаваться в подробности того, как работает система сборки. Я использую конфигурацию sage webpack, только немного измененную. Если вы используете другую систему сборки, возможно, вам придется изменить некоторые шаги и примеры кода.

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

Настраиваемые поля

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

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

Подполя в поле Dataset довольно просты. У нас есть этикетка, цвет и актуальные данные.

Затем мы можем заполнить наш компонент некоторыми образцами данных.

Сделайте это vue

Пришло время создать наш компонент vue. Я ожидаю, что вы уже подключили vue к своему сайту WordPress. Теперь нам нужно установить vue-chartjs и создать компонент линейчатой ​​диаграммы.

npm install vue-chartjs -D

Создайте компонент линейчатой ​​диаграммы

Итак, мы создаем BarExample.js в нашей папке с ресурсами:

import { Bar } from ‘vue-chartjs’
export default Bar.extend({
 props: [“data”, “options”],
 mounted () {
  this.renderChart(this.data, this.options)
 }
})

Это основная структура из примеров. Передаем данные и параметры диаграммы. Затем мы добавляем его как компонент vue в наш файл main.js.

Структура необходимого объекта данных для chart.js выглядит так:

{
      labels: ['X Axis Label 1', 'X Axis Label 2'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [40, 20, 12]
        }
      ]
}

Теперь есть две возможности, как построить этот объект. Первый - создать его на php, второй - создать его на Javascript. Мне лично кажется немного некрасивым создавать его на php, поэтому я делаю это на Javascript.

Для этого меняю наш BarExample. И добавьте два новых свойства: одно для меток оси X и одно для наборов данных. Затем я использую вычисленные свойства для его построения.

import { Bar } from 'vue-chartjs'
export default Bar.extend({
  props: ['labels', 'datasets'],
  computed: {
    'chartdata': function () {
      return {
        labels: this.labels,
        datasets: this.datasets
      }
    }
  },
 mounted () {
    this.renderChart(this.chartdata, 
    {responsive: true, maintainAspectRatio: false})
  }
})

Шаблон

Пришло время немного его подключить. Мы создаем файл шаблона для содержимого acf, чтобы он имел чистый компонент.

<?php if(have_rows('datasets')): ?>
  <?php
    $datasets = [];
   ?>
<?php while ( have_rows('datasets') ) : the_row();
    $datasets[] = array(
      'label' => get_sub_field('dataset_label'),
      'backgroundColor' => get_sub_field('dataset_color'),
      'data' => explode(', ', get_sub_field('dataset_data'))
    );
  endwhile;
$labels = get_field('x_axis');
  $legend = get_field('legend');
$chartDatasets = htmlspecialchars(json_encode($datasets));
  $chartLabels = htmlspecialchars(json_encode(explode(', ', $labels)));
?>
<section class="chart-box text">
  <div class="text__wrapper">
    <bar-example
      :labels="<?= $chartLabels; ?>"
      :datasets="<?= $chartDatasets; ?>" >
    </bar-example>
  </div>
</section>
<?php endif; ?>

Теперь вы можете добавить компонент php к сообщениям или страницам, и у нас есть прекрасная диаграмма.