Shortcode ChartJS

Attention cette article date depuis plus d'un an (625 jours).

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 >}}