Chart XKCD
https://github.com/timqian/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 :
<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
{{< 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
{{< 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
{{< 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
{{< 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
{{< 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 >}}