Shortcode ChartJS

2023-06-07 Web
Temps de lecture: 2 minutes.

Table des matières

ChartJS est une bibliothèque JavaScript open source gratuite pour la visualisation de données (Wikipédia)

Le shortcode

J’ai trouvé le code ici.

Il y a un problème sur le code (voir ici)

src=“https://cdn.jsdelivr.net/npm/chart.js"

A placer dans le dossier themes/MONTHEME/layouts/shortcodes/ et à nommer chart.html

{{ $w := default "100" (.Get 0) }}
{{ $h := default "300" (.Get 1) }}
{{ $r := ( .Inner | chomp) }}
{{ $seed := "foo" }}
{{ $id := delimit (shuffle (split (md5 $seed) "" )) "" }}

<div style="width: {{ $w }}%;height: {{ $h }}px;margin: 0 auto">
    <canvas id="{{ $id }}"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript">
    var ctx = document.getElementById('{{ $id }}').getContext('2d');
    var options = {{ $r | safeJS }};
    new Chart(ctx, options);
</script>

Exemple

{{< chart 90 200 >}}
{
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: 'Bar Chart',
            data: [12, 19, 18, 16, 13, 14],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        maintainAspectRatio: false,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
}
{{< /chart >}}

Explications

On va prendre un exemple sur le site ChartJs.

Squelette de base

type: ‘radar’

{{< chart >}}
{
  type: 'radar',
  data: {},
  options: {}

}
{{< /chart >}}

Les données

Labels: 4 matières (Anglais,Français,Mathématique,Sport)
datasets: Les notes de l’élève, couleur de fond, fill(remplissage)
options: On rajoute un titre

{{< chart >}}
{
  type: 'radar',
  data: {
    labels: ['Anglais','Français','Mathématique','Sport'],
     datasets: [{
    label: 'Note éléve Ducobu',
    data: [12, 10, 14, 18],
    fill: true,
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    borderColor: 'rgb(255, 99, 132)',
 }]
},
  options: {},
}

{{< /chart >}}

On ajoute un élève

{{< chart >}}
{
  type: 'radar',
  data: {
    labels: ['Anglais','Français','Mathématique','Sport'],
     datasets: [{
    label: 'Note élève Ducobu',
    data: [12, 10, 14, 18],
    fill: true,
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    borderColor: 'rgb(255, 99, 132)',
 }]
},
  options: {},
}

{{< /chart >}}