Chart XKCD

Je suis tombé chart.xkcd parmi les flux RSS que je suis. J’ai trouvé l’idée amusante et le rendu agréable, j’en ai donc fait un micro shortcode pour Hugo :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div>
<svg class='{{ .Get "name" }}'></svg>
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1/dist/chart.xkcd.min.js"></script>
<script>
  const svg{{ .Get "name" | safeJS }} = document.querySelector('.{{ .Get "name" }}');
  new chartXkcd.{{ .Get "type" | safeJS }}(svg{{ .Get "name" | safeJS }}, {
    {{ .Inner | safeJS }}
  });
</script>
</div>

A caler dans layout/shortcodes/chart-xkcd.html.

Trois types de diagrammes sont dispos pour le moment : Line, Pie, Bar, XY, Radar.

Les options de chaque diagramme sont trouvables dans la doc.

Exemples

Line

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
{{< chart-xkcd name="line" type="Line" >}}
    title: 'A vs B',
    xLabel: 'Abscisse',
    yLabel: 'Ordonnee',
    data: {
      labels:['1', '2', '3', '4', '5', '6','7', '8', '9', '10'],
      datasets: [{
        label: 'A',
        data: [30, 2500, 200, 300, 250 ,800, 1500, 2900, 5000, 800],
      }, {
        label: 'B',
        data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
      }]
    },
    options: { // optional
      yTickCount: 10,
    }
{{< /chart-xkcd >}}

Pie

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{{< chart-xkcd name="pie" type="Pie" >}}
    title: 'A B C D E',
    data: {
      labels:[ 'A', 'B', 'C', 'D', 'E'],
      datasets: [{
        data: [200, 122, 60, 130, 44,],
      }]
    },
    options: {
      innerRadius: 0.5, // mettre à 0 pour obtenir un diagramme camembert (pie chart)
      legendPosition: chartXkcd.config.positionType.upRight,
    }
{{< /chart-xkcd >}}

Bar

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{{< chart-xkcd name="bar" type="Bar" >}}
    title: "A B C D",
    data: {
      labels:['A', 'B', 'C', 'D'],
      datasets: [{
        data: [20, 33, 5, 12],
      }]
    },
    options: { // optional
      yTickCount: 8,
    }
{{< /chart-xkcd >}}

XY

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
{{< chart-xkcd name="xy" type="XY" >}}
    title: 'A vs B',
    xLabel: 'Abscisse',
    yLabel: 'Ordonnee',
    data: {
      datasets: [{
        label: 'A',
        data: [{ x: 1, y: 30 }, { x: 3, y: 8 }, { x: 5, y: 45 }, { x: 7, y: 22 }, { x: 9, y: -4 }],
      }, {
        label: 'B',
        data: [{ x: -2, y: 12 }, { x: 4, y: -20 }, { x: 6, y: 53 }, { x: 8, y: 12 }, { x: 10, y: 20 }],
      }],
    },
    options: {
      xTickCount: 10,
      yTickCount: 10,
      showLine: false,
      dotSize: 1,
    }
{{< /chart-xkcd >}}

Avec options: {showLine: true} :

Radar

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
{{< chart-xkcd name="radar" type="Radar" >}}
    title: 'A vs B',
    data: {
      labels: ['a', 'b', 'c', 'd', 'e'],
      datasets: [{
        label: 'A',
        data: [4, 1, 3, 3, 2],
      }, {
        label: 'B',
        data: [1, 4, 2, 3, 1],
      }],
    },
    options: { 
      showLegend: true,
      dotSize: .7,
      showLabels: true,
    },
{{< /chart-xkcd >}}