Added support for Chart.js (#2126)
Solved #460.  --------- Signed-off-by: George Araújo <george.gcac@gmail.com>
This commit is contained in:
George
GitHub
parent
1d84621f22
commit
a7d6b37d8f
|
|
@ -299,7 +299,7 @@ For more details on how to create distill-styled posts using `<d-*>` tags, pleas
|
|||
|
||||
#### Full support for math & code
|
||||
|
||||
**al-folio** supports fast math typesetting through [MathJax](https://www.mathjax.org/) and code syntax highlighting using [GitHub style](https://github.com/jwarby/jekyll-pygments-themes). Also supports [mermaid diagrams](https://mermaid-js.github.io/mermaid/#/) and [TikZ figures](https://tikzjax.com/).
|
||||
**al-folio** supports fast math typesetting through [MathJax](https://www.mathjax.org/) and code syntax highlighting using [GitHub style](https://github.com/jwarby/jekyll-pygments-themes). Also supports [chartjs charts](https://www.chartjs.org/), [mermaid diagrams](https://mermaid-js.github.io/mermaid/#/), and [TikZ figures](https://tikzjax.com/).
|
||||
|
||||
<p align="center">
|
||||
<a href="https://alshedivat.github.io/al-folio/blog/2015/math/" target="_blank"><img src="assets/img/readme_preview/math.png" width=400></a>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
{% if page.chart %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
var $canvas = null,
|
||||
$this = null,
|
||||
_ctx = null,
|
||||
_text = '';
|
||||
$('.language-chart').each(function () {
|
||||
$this = $(this);
|
||||
$canvas = $('<canvas></canvas>');
|
||||
_text = $this.text();
|
||||
$this.text('').append($canvas);
|
||||
_ctx = $canvas.get(0).getContext('2d');
|
||||
_ctx && _text && new Chart(_ctx, JSON.parse(_text)) && $this.attr('data-processed', true);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
|
|
@ -48,6 +48,7 @@
|
|||
{% include scripts/bootstrap.liquid %}
|
||||
{% include scripts/masonry.liquid %}
|
||||
{% include scripts/mermaid.liquid %}
|
||||
{% include scripts/chart.liquid %}
|
||||
{% include scripts/misc.liquid %}
|
||||
{% include scripts/badges.liquid %}
|
||||
{% include scripts/mathjax.liquid %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,187 @@
|
|||
---
|
||||
layout: post
|
||||
title: a post with chart.js
|
||||
date: 2024-01-26 01:04:00
|
||||
description: this is what included chart.js code could look like
|
||||
tags: formatting charts
|
||||
categories: sample-posts
|
||||
chart: true
|
||||
---
|
||||
|
||||
This is an example post with some chart.js code.
|
||||
|
||||
````markdown
|
||||
```chart
|
||||
{
|
||||
"type": "line",
|
||||
"data": {
|
||||
"labels": [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July"
|
||||
],
|
||||
"datasets": [
|
||||
{
|
||||
"label": "# of bugs",
|
||||
"fill": false,
|
||||
"lineTension": 0.1,
|
||||
"backgroundColor": "rgba(75,192,192,0.4)",
|
||||
"borderColor": "rgba(75,192,192,1)",
|
||||
"borderCapStyle": "butt",
|
||||
"borderDash": [],
|
||||
"borderDashOffset": 0,
|
||||
"borderJoinStyle": "miter",
|
||||
"pointBorderColor": "rgba(75,192,192,1)",
|
||||
"pointBackgroundColor": "#fff",
|
||||
"pointBorderWidth": 1,
|
||||
"pointHoverRadius": 5,
|
||||
"pointHoverBackgroundColor": "rgba(75,192,192,1)",
|
||||
"pointHoverBorderColor": "rgba(220,220,220,1)",
|
||||
"pointHoverBorderWidth": 2,
|
||||
"pointRadius": 1,
|
||||
"pointHitRadius": 10,
|
||||
"data": [
|
||||
65,
|
||||
59,
|
||||
80,
|
||||
81,
|
||||
56,
|
||||
55,
|
||||
40
|
||||
],
|
||||
"spanGaps": false
|
||||
}
|
||||
]
|
||||
},
|
||||
"options": {}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
This is how it looks like:
|
||||
|
||||
```chart
|
||||
{
|
||||
"type": "line",
|
||||
"data": {
|
||||
"labels": [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July"
|
||||
],
|
||||
"datasets": [
|
||||
{
|
||||
"label": "# of bugs",
|
||||
"fill": false,
|
||||
"lineTension": 0.1,
|
||||
"backgroundColor": "rgba(75,192,192,0.4)",
|
||||
"borderColor": "rgba(75,192,192,1)",
|
||||
"borderCapStyle": "butt",
|
||||
"borderDash": [],
|
||||
"borderDashOffset": 0,
|
||||
"borderJoinStyle": "miter",
|
||||
"pointBorderColor": "rgba(75,192,192,1)",
|
||||
"pointBackgroundColor": "#fff",
|
||||
"pointBorderWidth": 1,
|
||||
"pointHoverRadius": 5,
|
||||
"pointHoverBackgroundColor": "rgba(75,192,192,1)",
|
||||
"pointHoverBorderColor": "rgba(220,220,220,1)",
|
||||
"pointHoverBorderWidth": 2,
|
||||
"pointRadius": 1,
|
||||
"pointHitRadius": 10,
|
||||
"data": [
|
||||
65,
|
||||
59,
|
||||
80,
|
||||
81,
|
||||
56,
|
||||
55,
|
||||
40
|
||||
],
|
||||
"spanGaps": false
|
||||
}
|
||||
]
|
||||
},
|
||||
"options": {}
|
||||
}
|
||||
```
|
||||
|
||||
Also another example chart.
|
||||
|
||||
````markdown
|
||||
```chart
|
||||
{
|
||||
"type": "doughnut",
|
||||
"data": {
|
||||
"labels": [
|
||||
"Red",
|
||||
"Blue",
|
||||
"Yellow"
|
||||
],
|
||||
"datasets": [
|
||||
{
|
||||
"data": [
|
||||
300,
|
||||
50,
|
||||
100
|
||||
],
|
||||
"backgroundColor": [
|
||||
"#FF6384",
|
||||
"#36A2EB",
|
||||
"#FFCE56"
|
||||
],
|
||||
"hoverBackgroundColor": [
|
||||
"#FF6384",
|
||||
"#36A2EB",
|
||||
"#FFCE56"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"options": {}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
Which generates:
|
||||
|
||||
```chart
|
||||
{
|
||||
"type": "doughnut",
|
||||
"data": {
|
||||
"labels": [
|
||||
"Red",
|
||||
"Blue",
|
||||
"Yellow"
|
||||
],
|
||||
"datasets": [
|
||||
{
|
||||
"data": [
|
||||
300,
|
||||
50,
|
||||
100
|
||||
],
|
||||
"backgroundColor": [
|
||||
"#FF6384",
|
||||
"#36A2EB",
|
||||
"#FFCE56"
|
||||
],
|
||||
"hoverBackgroundColor": [
|
||||
"#FF6384",
|
||||
"#36A2EB",
|
||||
"#FFCE56"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"options": {}
|
||||
}
|
||||
```
|
||||
|
|
@ -1,7 +1,11 @@
|
|||
// create element for copy button in code blocks
|
||||
var codeBlocks = document.querySelectorAll("pre");
|
||||
codeBlocks.forEach(function (codeBlock) {
|
||||
if ((codeBlock.querySelector("pre:not(.lineno)") || codeBlock.querySelector("code")) && codeBlock.querySelector("code:not(.language-mermaid)")) {
|
||||
if (
|
||||
(codeBlock.querySelector("pre:not(.lineno)") || codeBlock.querySelector("code")) &&
|
||||
codeBlock.querySelector("code:not(.language-chart)") &&
|
||||
codeBlock.querySelector("code:not(.language-mermaid)")
|
||||
) {
|
||||
// create copy button
|
||||
var copyButton = document.createElement("button");
|
||||
copyButton.className = "copy";
|
||||
|
|
|
|||
Loading…
Reference in New Issue