Incorporar gráficos Chart.js passo a passo no WordPress

Mas, como entendo que nem todos os seus projetos exigem esse layout específico, primeiro exploraremos como criar um gráfico WordPress dinâmico simples. E o mais importante, sem usar um único plugin de gráfico WordPress!

Este tutorial espera que você esteja familiarizado com o desenvolvimento de temas WordPress e, de preferência, com o plugin WordPress Advanced Custom Fields (ACF).

Implementação

Para a parte de implementação, trabalharei com meu costume habitual Parque infantil tema.

Estrutura do Tema

Vamos discutir os arquivos importantes:

  • O single-chart.php arquivo que irá registrar o Página de gráfico único modelo personalizado será associado ao single-chart.js arquivo. Ambos serão responsáveis ​​por mostrar um único gráfico.
  • O tabs.php arquivo que irá registrar o Página de guias modelo personalizado será associado ao multiple-charts.js arquivo. Ambos serão responsáveis ​​por mostrar as abas do Bootstrap que conterão gráficos.
  • Dentro o functions.php arquivo, incluirei os arquivos Bootstrap e Chart.js necessários – as mesmas versões da demonstração CodePen do tutorial anterior. Dentro desta função estará a lógica para geração dos dados gráficos necessários.
  • Dentro de acf pasta, exportarei em dois métodos todos os campos extras que irei utilizar para que você possa reutilizá-los em seus temas – você verá, em um momento, do que estou falando.
Exportando os campos ACFExportando os campos ACFExportando os campos ACF

Aqui está a estrutura do tema:

Arquivos de temaArquivos de temaArquivos de tema

Para sua conveniência, como sempre, todos os ativos do tema estarão disponíveis em um repositório GitHub.

Criando campos extras

Se você observar o tutorial mencionado, notará que cada dado do gráfico é representado como um objeto; este é o formato que também manteremos para nossos dados dinâmicos.

1
{
2
  bars: {
3
    bar1: ["25", "76", "64", "33", "85", "46", "25"],
4
    bar2: ["32", "68", "77", "29", "88", "65", "60"]
5
  },
6
    rótulos: [
7
    "Label 1",
8
    "Label 2",
9
    "Label 3",
10
    "Label 4",
11
    "Label 5",
12
    "Label 6",
13
    "Label 7"
14
  ],
15
  legends: { legend1: "Male", legend2: "Female" },
16
  title: "Gender Comparison Graph"
17
}

Para criar os dados, precisaremos de alguns campos. Muitos plugins podem nos ajudar a criar campos extras, como o Campos personalizados avançados (ACF) plug-in, o Vagens plugin, etc. Para este exercício, escolherei o Versão ACF PRO para aproveitar seu campo de conteúdo flexível.

Embora eu utilize um plugin premium aqui para facilitar a manipulação de dados, independentemente do plugin de sua escolha, a lógica permanecerá a mesma. Criaremos alguns campos, depois usaremos as funções do plugin para capturá-los e, finalmente, formataremos os dados antes de enviá-los em JavaScript.

Novamente, como mencionado acima, todos os campos ACF serão exportados como JSON e PHP e ficarão dentro do acf pasta do tema.

Como spoiler, para provar que apesar dos plugins do WordPress, outras ferramentas nos permitem igualmente criar campos de página adicionais, vou mostrar como criar um Configurações de tema página usando Campos de Carbono em um próximo tutorial.

Crie um único gráfico

Começaremos mostrando como incorporar um gráfico de barras verticais em uma página WordPress.

O layout de gráfico únicoO layout de gráfico únicoO layout de gráfico único

Usando o ACF, criaremos um novo grupo de campos e mapeá-lo-emos para a página que desejamos – no meu caso, esta será a página com o Página de gráfico único modelo.

O campo de grupo para um único gráficoO campo de grupo para um único gráficoO campo de grupo para um único gráfico

Dentro desse grupo, definiremos três subcampos.

Os campos de cada gráficoOs campos de cada gráficoOs campos de cada gráfico

Dentro de Legendas subcampo, especificaremos dois campos adicionais para rotular os conjuntos de dados que aparecerão na parte inferior do gráfico.

Os subcampos da legendaOs subcampos da legendaOs subcampos da legenda

O Linhas O campo de conteúdo flexível nos permitirá criar um número infinito de linhas onde cada linha representará um único conjunto de barras verticais – considere-o como um repetidor com linhas que podem ser recolhidas.

Um único conjunto de barras verticaisUm único conjunto de barras verticaisUm único conjunto de barras verticais
Os subcampos das linhasOs subcampos das linhasOs subcampos das linhas

Após definir os campos, navegaremos até o administrador da página de destino e os preencheremos com os dados.

Os dados do gráfico únicoOs dados do gráfico únicoOs dados do gráfico único

No single-chart.php arquivo, já temos uma referência ao necessário canvas elemento que Chart.js espera:

1

2
/*

3
Template Name: Single Chart Page

4
*/
5
get_header();
6
?>
7

8
 class="site-main">
9
    
10
    if ( have_posts() ) :
11
        while ( have_posts() ) :
12
            the_post();
13
            ?>
14
             id="post- the_ID(); ?>"  post_class(); ?>>
15
                 class="container my-5">
16
                     id="myChart">
17
                
18
            
19
            
20
        endwhile;
21
    endif;
22
    ?>
23

24

25

26
get_footer();

A partir daí, passaremos para o functions.php arquivo e crie uma função, que será executada apenas para páginas cujo modelo é o Página de gráfico único um, para gerar os dados do gráfico no formato desejado:

1
function get_single_chart() {
2
    $chart_single  = (object) array(
3
        'legends' => (object) array(),
4
        'labels'  => array(),
5
        'bars'    => (object) array(
6
            'bar1' => array(),
7
            'bar2' => array(),
8
        ),
9
        'title'   => '',
10
    );
11
    $chart         = get_field( 'chart' );
12
    $chart_legends = $chart['legends'];
13

14
    $chart_single->title            = esc_html( $chart['title'] );
15
    $chart_single->legends->legend1 = esc_html( $chart_legends['legend1'] );
16
    $chart_single->legends->legend2 = esc_html( $chart_legends['legend2'] );
17
    
18
    foreach ( $chart['rows'] as $row ) :
19
        array_push( $chart_single->labels, esc_html( $row['label'] ) );
20
        array_push( $chart_single->bars->bar1, esc_html( $row['bar1'] ) );
21
        array_push( $chart_single->bars->bar2, esc_html( $row['bar2'] ) );
22
    endforeach;
23
    
24
    return $chart_single;
25
}

Para simplificar, pularemos verificações adicionais, como garantir que o array de linhas não esteja vazio, etc.

Aqui está um exemplo dos dados gerados:

Os dados do gráfico que são enviados para o JavaScriptOs dados do gráfico que são enviados para o JavaScriptOs dados do gráfico que são enviados para o JavaScript

Passaremos esses dados pelo wp_localize_script() funcionar com a ajuda do global_obj objeto ao arquivo JavaScript associado.

1
function playground_scripts_and_styles() {    
2
    ...
3
    if ( is_page_template( 'page-templates/single-chart.php' ) ) :
4
        wp_enqueue_script( 'playground-script-single-chart', $theme_uri . '/assets/js/single-chart.js', array(), null, true );
5
        wp_localize_script(
6
            'playground-script-single-chart',
7
            'global_obj',
8
            array(
9
                'chart' => get_single_chart(),
10
            )
11
        );
12
    endif;
13
}
14
add_action( 'wp_enqueue_scripts', 'playground_scripts_and_styles' );

A seguir, no single-chart.js arquivo, pegaremos os dados do PHP usando o global_obj.chart propriedade e imprima o gráfico de barras verticais com o seguinte código:

1
Chart.defaults.font.family = "Poppins, sans-serif";
2
Chart.defaults.color = "#073b4c";
3

4
const chart = global_obj.chart;
5

6
const data = {
7
  labels: chart.labels,
8
  conjuntos de dados: [
9
    {
10
      label: chart.legends.legend1,
11
      data: chart.bars.bar1,
12
      backgroundColor: "#dc3545",
13
    },
14
    {
15
      label: chart.legends.legend2,
16
      data: chart.bars.bar2,
17
      backgroundColor: "#198754",
18
    },
19
  ],
20
};
21

22
const config = {
23
  type: "bar",
24
  data,
25
  options: {
26
    plugins: {
27
      title: {
28
        display: true,
29
        text: chart.title,
30
        position: "top",
31
        font: {
32
          size: 25,
33
        },
34
        padding: {
35
          top: 15,
36
          bottom: 15,
37
        },
38
      },
39
      legend: {
40
        position: "bottom",
41
        labels: {
42
          padding: 30,
43
          font: {
44
            size: 14,
45
          },
46
        },
47
      },
48
      tooltip: {
49
        enabled: false,
50
      },
51
    },
52
    scales: {
53
      y: {
54
        ticks: {
55
          crossAlign: "left",
56
          callback: function (val) {
57
            return `${val}%`;
58
          },
59
        },
60
      },
61
    },
62
  },
63
};
64

65
const ctx = document.getElementById("myChart").getContext("2d");
66
new Chart(ctx, config);

Integre guias Bootstrap com gráficos

Vamos agora dar um passo adiante e recriar o layout do tutorial anterior.

O layout das guiasO layout das guiasO layout das guias

Usando o ACF, criaremos um novo campo de conteúdo flexível e mapeá-lo-emos para a página que desejamos – no meu caso, esta será a página com o Página de guias modelo.

O campo de conteúdo flexível das guiasO campo de conteúdo flexível das guiasO campo de conteúdo flexível das guias

Para cada aba definiremos dois campos: seu nome e os dados do gráfico incorporado.

Os campos de cada abaOs campos de cada abaOs campos de cada aba

Os subcampos do Gráfico campo do grupo são iguais aos campos do Gráfico campo de grupo do Página de gráfico único modelo.

Após definir os campos, navegaremos até o administrador da página de destino e criaremos quantas abas quisermos.

Criando guias através do administradorCriando guias através do administradorCriando guias através do administrador

Cada guia ficará assim:

Os campos dentro de cada guiaOs campos dentro de cada guiaOs campos dentro de cada guia

No tabs.php arquivo, percorreremos as guias e, para cada uma, criaremos o apropriado canvas elemento que Chart.js espera:

1

2
/*

3
Template Name: Tabs Page

4
*/
5
get_header();
6
?>
7

8
 class="site-main">
9
    
10
    if ( have_posts() ) :
11
        while ( have_posts() ) :
12
            the_post();
13
            $tabs = get_field( 'tabs' );
14
            ?>
15
             id="post- the_ID(); ?>"  post_class(); ?>>
16
                 class="container my-5">
17
                     class="nav nav-tabs" id="myTab" role="tablist">
18
                        
19
                        foreach ( $tabs as $key => $tab ) :
20
                            $active_class  = 0 === $key ? ' active' : '';
21
                            $aria_selected = 0 === $key ? true : false;
22
                            $number        = ++$key;
23
                            ?>
24
                             class="nav-item" role="presentation">
25
                                 class="nav-link echo $active_class; ?>" id="chart echo $number; ?>-tab" data-bs-toggle="tab" data-bs-target="#chart echo $number; ?>-tab-pane" type="button" role="tab" aria-controls="chart echo $number; ?>-tab-pane" aria-selected=" echo $aria_selected; ?>">
26
                                     echo esc_html( $tab['title'] ); ?>
27
                                
28
                            
29
                         endforeach; ?>
30
                    
31
                     class="tab-content mt-5" id="myTabContent">
32
                        
33
                        foreach ( $tabs as $key => $tab ) :
34
                            $active_class = 0 === $key ? ' show active' : '';
35
                            $number       = ++$key;
36
                            ?>
37
                             class="tab-pane fade echo $active_class; ?>" id="chart echo $number; ?>-tab-pane" role="tabpanel" aria-labelledby="chart echo $number; ?>-tab" tabindex="0">
38
                                 id="myChart echo $number; ?>">
39
                            
40
                         endforeach; ?>
41
                    
42
                
43
            
44
            
45
        endwhile;
46
    endif;
47
    ?>
48

49

50

51
get_footer();

A partir daí, passaremos para o functions.php arquivo e crie uma função, que será executada apenas para páginas cujo modelo é o Página de guias um, para gerar os dados do gráfico no formato desejado:

1
function get_multiple_charts() {
2
    $charts = array();
3
    $tabs   = get_field( 'tabs' );
4
    foreach ( $tabs as $tab ) :
5
        $chart_single  = (object) array(
6
            'legends' => (object) array(),
7
            'labels'  => array(),
8
            'bars'    => (object) array(
9
                'bar1' => array(),
10
                'bar2' => array(),
11
            ),
12
            'title'   => '',
13
        );
14
        $chart         = $tab['chart'];
15
        $chart_legends = $chart['legends'];
16
        
17
        $chart_single->title            = esc_html( $chart['title'] );
18
        $chart_single->legends->legend1 = esc_html( $chart_legends['legend1'] );
19
        $chart_single->legends->legend2 = esc_html( $chart_legends['legend2'] );
20
        
21
        foreach ( $chart['rows'] as $row ) :
22
            array_push( $chart_single->labels, esc_html( $row['label'] ) );
23
            array_push( $chart_single->bars->bar1, esc_html( $row['bar1'] ) );
24
            array_push( $chart_single->bars->bar2, esc_html( $row['bar2'] ) );
25
        endforeach;
26
        array_push( $charts, $chart_single );
27
    endforeach;
28
    
29
    return $charts;
30
}

Novamente, para simplificar, pularemos verificações adicionais, como garantir que o array de linhas não esteja vazio, etc.

Aqui está um exemplo dos dados gerados:

Os dados do gráfico que são enviados para o JavaScriptOs dados do gráfico que são enviados para o JavaScriptOs dados do gráfico que são enviados para o JavaScript

Passaremos esses dados pelo wp_localize_script() funcionar com a ajuda do global_obj objeto ao arquivo JavaScript associado.

1
function playground_scripts_and_styles() {
2
    ...
3
    if ( is_page_template( 'page-templates/tabs.php' ) ) :
4
        wp_enqueue_script( 'playground-script-multiple-charts', $theme_uri . '/assets/js/multiple-charts.js', array(), null, true );
5
        wp_localize_script(
6
            'playground-script-multiple-charts',
7
            'global_obj',
8
            array(
9
                'charts' => get_multiple_charts(),
10
            )
11
        );
12
    endif;
13
}
14
add_action( 'wp_enqueue_scripts', 'playground_scripts_and_styles' );

A seguir, no multiple-charts.js arquivo, pegaremos os dados PHP usando o global_obj.charts propriedade e imprima os gráficos de barras verticais com o mesmo código que usamos no tutorial anterior.

1
const tabEls = document.querySelectorAll('button[data-bs-toggle="tab"]');
2

3
Chart.defaults.font.family = "Poppins, sans-serif";
4
Chart.defaults.color = "#073b4c";
5

6
initializeSingleChart(0);
7

8
tabEls.forEach(function (tabEl) {
9
  tabEl.addEventListener("shown.bs.tab", function (event) {
10
    const index = Array.from(tabEls).indexOf(event.target);
11
    initializeSingleChart(index);
12
  });
13
});
14

15
function initializeSingleChart(index) {
16
  const chart = global_obj.charts[index];
17
  const chartEl = `myChart${++index}`;
18
  const chartInstance = Chart.getChart(chartEl);
19
  
20
  if (chartInstance !== undefined) {
21
    chartInstance.destroy();
22
  }
23

24
  const data = {
25
    labels: chart.labels,
26
    conjuntos de dados: [
27
      {
28
        label: chart.legends.legend1,
29
        data: chart.bars.bar1,
30
        backgroundColor: "#dc3545"
31
      },
32
      {
33
        label: chart.legends.legend2,
34
        data: chart.bars.bar2,
35
        backgroundColor: "#198754"
36
      }
37
    ]
38
  };
39

40
  const config = {
41
    type: "bar",
42
    data,
43
    options: {
44
      plugins: {
45
        title: {
46
          display: true,
47
          text: chart.title,
48
          position: "top",
49
          font: {
50
            size: 25
51
          },
52
          padding: {
53
            top: 15,
54
            bottom: 15
55
          }
56
        },
57
        legend: {
58
          position: "bottom",
59
          labels: {
60
            padding: 30,
61
            font: {
62
              size: 14
63
            }
64
          }
65
        },
66
        tooltip: {
67
          enabled: false
68
        }
69
      },
70
      scales: {
71
        y: {
72
          ticks: {
73
            crossAlign: "left",
74
            callback: function (val) {
75
              return `${val}%`;
76
            }
77
          }
78
        }
79
      }
80
    }
81
  };
82

83
  const ctx = document.getElementById(chartEl).getContext("2d");
84
  new Chart(ctx, config);
85
}

Conclusão

Feito! Esse foi um tutorial muito grande, pessoal, mas espero que vocês tenham aprendido muito e agora tenham um bom entendimento de como incorporar gráficos Chart.js no WordPress em layouts personalizados sem ter que incorporar um plugin de gráfico do WordPress.

Claro, aqui trabalhamos com o framework Bootstrap e o plugin ACF, mas a metodologia permanece a mesma independente do framework front-end/CSS ou plugin de campos que você vai usar.

Como sempre, muito obrigado pela leitura!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *