添加對 ChartJS 雙模式的支持

[SeaYJ]

#1562

---

1. 增加了 ChartJS 圖表官方語法;
2. 新增了 ChartJS 的雙模式（淺色/深色模式）顯示功能;
3. 擴展了 ChartJS 的 config 語法，支援雙模式配置。
4. 修復了 ChartJS 在雙模式下預設樣式的問題，簡化使用者配置圖表過程。

---

主要說明

目前很完善地支援了 ChartJS，擴展力標籤外掛的語法。 同時該語法支援「淺色/深色模式」雙模式配置，並且對預設設置情況下的「淺色/深色模式」雙模式樣式支援良好。

語法簡介

下面是 ChartJS 的語法主體：

{% chartjs "canvas_id" %}
<!-- chart -->
{
  "type": "bar",
  "data": {},
  "options": {}
}
<!-- endchart -->
<!-- desc -->
<!-- enddesc -->
{% endchartjs %}

• 其中所有的內容需要用 {% chartjs "canvas_id" %} 與 {% endchartjs %} 進行包裹，chartjs.js 腳本會自動將其渲染為 div.chartjs-wrap HTML 標簽。註意，canvas_id 為需要指定 canvas 圖表頁面元素的 ID，便於用戶進行更精確的樣式控製。

• 然後，你可以在 <!-- chart --> 與 <!-- endchart --> 之間進行 ChartJS 的 config 對象屬性設置；也可以在 <!-- desc --> 與 <!-- enddesc --> 標簽之間進行說明文字設置。

註釋：<!-- chart --> 與 <!-- endchart --> 之間的內容不會被渲染，只會作為 ChartJS 的 config 參數進行傳遞；<!-- desc --> 與 <!-- enddesc --> 之間的內容支持 Markdown 語法，同時會被整體包裹於 div.chatjs-desc-{*} HTML 標簽（註意 {*} 可為 0、1、2、3、...這個序號完全由腳本按順序設置）。

問：為什麽要設置 <!-- desc --> 與 <!-- enddesc --> 的組合？
答：這是為了更方便的進行布局設置，用戶可以通過 class 對以下頁面結構進行布局：

div.chartjs-wrap
├── canvas#canvas_id
├── div.chatjs-desc-0
├── div.chatjs-desc-1
┈
└── div.chatjs-desc-n

如果沒有該功能，用戶需要自己編寫對應的 HTML 標簽進行包裹。那樣做不僅可重復性低（每個都幾乎要自己命名設置），而且很麻煩（自己設置每個chartjs-wrap 標簽裏的說明元素的 class 與 id）。
總之，支持 <!-- desc --> 與 <!-- enddesc --> 語法是為了方便統一設置，一勞永逸，對需要大量使用圖表的用戶百利無一害。對於需要個性化的圖表，也支持自己設置 HTML 標簽。所以，這個設計是良好的。

• ChartJS 的 config 對象屬性設置完全支持 ChartJS 的官方語法，具體可以參考 ChartJs 說明文檔。

註意：但是，ChartJS 官方不支持雙模式設置，所以 chartjs 腳本對其進行了擴展。你幾乎可以在 config 的任何地方進行雙模式配置，大概語法就像下面這樣：

"xxx": {
  "light-mode": yyy,
  "dark-mode": zzz
}

在淺色模式下，會被預處理為：

"xxx": yyy

在深色模式下，會被預處理為：

"xxx": zzz

而這個預處理過程是自動的，你不需要擔心具體的過程。你只需要保證 json 語法正確即可！

舉個詳細的例子：

{% chartjs "my-interests-chart" %}
<!-- desc -->
除了**計算機編程**外，我想不出還有其他讓我感興趣的工作。
我可以無中生有地創造出**精美的範式**和**結構**，
在此過程中也解決了無數的小謎團。
<span style="font-size:0.8em;color: var(--sep-secondtext);">I can't think of any other job other than **computer programming** that interests me.
I can create **beautiful paradigms** and **structures** out of nothing,
Countless small mysteries are also solved in the process.</span>
<!-- enddesc -->
<!-- chart -->
{
    "type": "pie",
    "data": {
        "labels": [
            "編程",
            "音樂",
            "閱讀",
            "遊戲",
            "健身",
            "旅遊"
        ],
        "datasets": [
            {
                "label": "喜愛指數",
                "data": [
                    30,
                    24,
                    19,
                    14,
                    9,
                    4
                ],
                "backgroundColor": {
                    "dark-mode": [
                        "rgba(255, 99, 132, 0.5)",
                        "rgba(54, 162, 235, 0.5)",
                        "rgba(255, 206, 86, 0.5)",
                        "rgba(75, 192, 192, 0.5)",
                        "rgba(153, 102, 255, 0.5)",
                        "rgba(255, 159, 64, 0.5)"
                    ],
                    "light-mode": [
                        "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": {
                    "dark-mode": [
                        "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)"
                    ],
                    "light-mode": [
                        "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)"
                    ]
                }
            }
        ]
    },
    "options": {
        "plugins": {
            "legend": {
                "labels": {
                    "color": {
                        "dark-mode": "rgba(255, 255, 255, 0.8)",
                        "light-mode": "rgba(0, 0, 0, 0.8)"
                    }
                }
            }
        }
    }
}
<!-- endchart -->
{% endchartjs %}

請註意，你甚至可以實現在深色模式和淺色模式下展示不同的圖表！而這一切，只需要你掌握這個 light-mode 與 dark-mode 的擴展設置語法！

當你看完上述一切，你可以參考我的博客使用該內容的頁面：關於作者 | SeaEpoch。

其他

如果有任何問題可以提 ISSUES，並@SeaYJ即可，我會盡力解決關於 ChartJS 相關的問題。

[jerryc127]

我還是之前那句話，你如果不是提前就提供一些功能，把 desc 寫在裏面沒有必要