Riebeckite
Menu
Color mode

Chart.js

データを Chart.js ベースのグラフとして表示する Plugin です。

導入

bash
npm install @riebeckite/plugin-chartjs

Plugin の export 名や設定項目は、実装と package README を一次情報として確認してください。Riebeckite の Plugin は riebeckite.config.ts の plugins に登録して利用します。

使用例

棒グラフや折れ線グラフなど、データ可視化を記事へ組み込みたい場合に利用します。具体的なデータ指定形式は package README の対応構文を確認してください。

ソース

markdown
```chart
{
  "type": "bar",
  "data": {
    "labels": ["Mon", "Tue", "Wed"],
    "datasets": [{ "label": "Visits", "data": [12, 19, 8] }]
  }
}
```

実行例

使いどころ

この Plugin が必要な場合だけ追加してください。Preset に含まれている場合は、同じ Plugin を重複して登録する必要はありません。

実際の表示例が用意されている場合は、Plugin Showcase でも確認できます。

詳細仕様

設定項目、公開 API、制約、追加の使用例は package README を参照してください。Plugin 全体の仕組みは Plugin System、Plugin を作る場合は Writing a Plugin を参照してください。

History

1 changesCollapseExpand
1 + # Chart.js
2 +
3 + データを Chart.js ベースのグラフとして表示する Plugin です。
4 +
5 + ## 導入
6 +
7 + ```bash
8 + npm install @riebeckite/plugin-chartjs
9 + ```
10 +
11 + Plugin の export 名や設定項目は、実装と package README を一次情報として確認してください。Riebeckite の Plugin は `riebeckite.config.ts` の `plugins` に登録して利用します。
12 +
13 + ## 使用例
14 +
15 + 棒グラフや折れ線グラフなど、データ可視化を記事へ組み込みたい場合に利用します。具体的なデータ指定形式は package README の対応構文を確認してください。
16 +
17 + ### ソース
18 +
19 + ````markdown
20 + ```chart
21 + {
22 + "type": "bar",
23 + "data": {
24 + "labels": ["Mon", "Tue", "Wed"],
25 + "datasets": [{ "label": "Visits", "data": [12, 19, 8] }]
26 + }
27 + }
28 + ```
29 + ````
30 +
31 + ### 実行例
32 +
33 + ```chart
34 + {
35 + "type": "bar",
36 + "data": {
37 + "labels": ["Mon", "Tue", "Wed"],
38 + "datasets": [{ "label": "Visits", "data": [12, 19, 8] }]
39 + }
40 + }
41 + ```
42 +
43 + ## 使いどころ
44 +
45 + この Plugin が必要な場合だけ追加してください。Preset に含まれている場合は、同じ Plugin を重複して登録する必要はありません。
46 +
47 + 実際の表示例が用意されている場合は、[Plugin Showcase](./showcase.md) でも確認できます。
48 +
49 + ## 詳細仕様
50 +
51 + 設定項目、公開 API、制約、追加の使用例は package README を参照してください。Plugin 全体の仕組みは [Plugin System](../framework/plugin-system.md)、Plugin を作る場合は [Writing a Plugin](./writing-a-plugin.md) を参照してください。
52 +
53 +