WordPressのショートコードで誰でも簡単にブログでグラフ描画が出来たらいいなと思い、ChartJS というライブラリを利用してグラフを描画するプラグインを作成しました。
例えば、ショートコードにいくつかの設定をすることで下のようなグラフを表示することができます。
個人の趣味範囲で作成しているため必要最低限の機能しかありません。
Plugin by tarovlog.com Plugin by tarovlog.com対応しているグラフ
- デフォルト
- 折れ線グラフ
- 円グラフ
- 棒グラフ
デフォルト
Plugin by tarovlog.com[display_graph_single]| オプション | 説明 | オプションのデフォルト値 |
|---|---|---|
| type（必須） | グラフの種類 | line |
| x_data（必須） | x軸のデータ | 1月, 2月, 3月, 4月, 5月 |
| y_data（必須） | y軸のデータ | 10, 30, 60, 150, 280 |
| title（任意） | タイトル | ブランク |
| y_top（任意） | y軸メモリの最大 | 300 |
| bordercolor（任意） | 線の色 | #FF6928 |
| backgroundcolor（任意） | 背景色 | rgba(0,0,0,0) |
| y_label（任意） | ラベル | ブランク |
| height（任意） | 高さ | 300 |
折れ線グラフ
Plugin by tarovlog.com[display_graph_single type="line" x_data="2021年1月, 2021年2月, 2021年3月, 2021年4月, 2021年5月" y_data="15, 87, 870, 1550, 2760" title="PV数" y_top="4000" bordercolor="#55c500" y_label="PV数" height="400" comma="true"]| オプション | 説明 | 入力例 |
|---|---|---|
| type（必須） | グラフの種類 | line |
| x_data（必須） | x軸のデータ | 2021年1月, 2021年2月, 2021年3月, 2021年4月, 2021年5月 |
| y_data（必須） | y軸のデータ | 15, 87, 870, 1550, 2760 |
| title（任意） | タイトル | PV数 |
| y_top（任意） | y軸メモリの最大 | 4000 |
| y_min（任意） | y軸メモリの最小値 | 0 |
| bordercolor（任意） | 線の色 | #FF6928 |
| y_label（任意） | ラベル | PV数 |
| height（任意） | 高さ | 400 |
| comma（任意） | カンマ区切りの数値 | true（非表示にする場合はfalse） |
円グラフ
Plugin by tarovlog.com[display_graph_single type="pie" x_data="KO, MO, T, NIO" y_data="25, 25, 25, 25" title="PF" backgroundcolor=" #FF6384, #FF9F40, #F0F0F0, #36A2EB " height="400" labelson="true" unit="%"]| オプション | 説明 | 入力例 |
|---|---|---|
| type（必須） | グラフの種類 | pie |
| x_data（必須） | x軸のデータ | KO, TSLA, MO, NIO |
| y_data（必須） | y軸のデータ | 15, 87, 470, 550, 760 |
| title（任意） | タイトル | PF |
| backgroundcolor（任意） | 背景色 | #FF6384, #FF9F40, #F0F0F0, #36A2EB |
| height（任意） | 高さ | 400 |
| labelson（任意） | グラフ上のラベル | true（非表示にする場合はfalse） |
| unit(任意) | 単位 | % |
棒グラフ
Plugin by tarovlog.com[display_graph_single type="bar" x_data="Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec" y_data="10, 30, 5, 50, 90, 32, 48, 46, 120, 200,103, 30" title="契約数" y_top="250" bordercolor="#4BC0C0" backgroundcolor="#4BC0C0" y_label="契約数" height="400" labelson="true" unit="件"]| オプション | 説明 | 入力例 |
|---|---|---|
| type（必須） | グラフの種類 | pie |
| x_data（必須） | x軸のデータ | Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec |
| y_data（必須） | y軸のデータ | 10, 30, 5, 50, 90, 32, 48, 46, 120, 200,103, 30 |
| title（任意） | タイトル | 契約数 |
| y_top（任意） | y軸メモリの最大 | 250 |
| bordercolor（任意） | ボーダー色 | #4BC0C0 |
| backgroundcolor（任意） | 背景色 | #4BC0C0 |
| height（任意） | 高さ | 400 |
| labelson（任意） | グラフ上のラベル | true（非表示にする場合はfalse） |
| unit(任意) | 単位 | 件 |
棒グラフ&折れ線グラフ
Plugin by tarovlog.com[display_graph_multi type="oresen_and_bar" height=400 title="収益とPV" x_data="2021/01, 2021/02, 2021/03, 2021/04, 2021/05, 2021/06, 2021/07" label_data1="PV数" y_data1="100, 310, 550, 120, 90, 820, 930" color_data1="#9AA2EB" label_data2="収益" y_data2="1200, 3300, 1000, 9000, 4000, 3500, 13000" color_data2="#FF6384" data1_max=1000 data1_step=100 data2_max=15000 data2_step=1000 comma="true"]| オプション | 説明 | 入力例 |
|---|---|---|
| type（必須） | グラフの種類 | oresen_and_bar |
| height（任意） | 高さ | 400 |
| title（任意） | タイトル | 収益とPV |
| x_data（必須） | x軸のデータ | 2021/01, 2021/02, 2021/03, 2021/04, 2021/05, 2021/06, 2021/07 |
| label_data1（任意） | 凡例 | PV数 |
| y_data1 | y軸折れ線 データ | 100, 310, 550, 120, 90, 820, 930 |
| color_data1（任意） | 折れ線 ボーダー色 | 9AA2EB |
| label_data2（任意） | 凡例 | 収益 |
| y_data2 | y軸棒グラフ データ | 1200, 3300, 1000, 9000, 4000, 3500, 13000 |
| color_data2（任意） | 棒グラフ ボーダー色 | #FF6384 |
| data1_max（任意） | 折れ線グラフ メモリ最大値 | 1000 |
| data1_min（任意） | 折れ線グラフ メモリ最小値 | 0 |
| data1_step（任意） | 折れ線グラフ メモリの間隔 | 100 |
| data2_max（任意） | 棒グラフ メモリ最大値 | 15000 |
| data2_step | 棒グラフ メモリの間隔 | 1000 |
| comma（任意） | カンマ区切りの数値 | true（非表示にする場合はfalse） |
折れ線グラフ&折れ線グラフ
Plugin by tarovlog.com[display_graph_multi type="oresen_and_oresen" height=400 title="フォロワー数推移" x_data="2021/01, 2021/02, 2021/03, 2021/04, 2021/05, 2021/06, 2021/07" label_data1="Twitter" y_data1="100, 310, 550, 120, 90, 820, 930" color_data1="#1DA1F2" label_data2="Instagram" y_data2="120, 330, 100, 900, 400, 350, 1300" color_data2="#CF2E92" data1_max=1500 data1_step=100 comma="true"]| オプション | 説明 | 入力例 |
|---|---|---|
| type（必須） | グラフの種類 | oresen_and_oresen |
| height（任意） | 高さ | 400 |
| title（任意） | タイトル | フォロワー数推移 |
| x_data（必須） | x軸のデータ | 2021/01, 2021/02, 2021/03, 2021/04, 2021/05, 2021/06, 2021/07 |
| label_data1（任意） | 凡例 | |
| y_data1 | y軸折れ線 データ１ | 100, 310, 550, 120, 90, 820, 930 |
| color_data1（任意） | 折れ線1つ目 ボーダー色 | 1DA1F2 |
| label_data2（任意） | 凡例 | |
| y_data2 | y軸折れ線 データ２ | 120, 330, 100, 900, 400, 350, 1300 |
| color_data2（任意） | 折れ線２つ目 ボーダー色 | #CF2E92 |
| data1_max（任意） | メモリ最大値 | 1500 |
| data1_min（任意） | メモリ最小値 | 0 |
| data1_step（任意） | メモリの間隔 | 100 |
| comma（任意） | カンマ区切りの数値 | true（非表示にする場合はfalse） |
折れ線グラフ&折れ線グラフ&折れ線グラフ
Plugin by tarovlog.com[display_graph_three type="oresen_3graph" height=400 title="フォロワー数推移" x_data="2021/01, 2021/02, 2021/03, 2021/04, 2021/05, 2021/06, 2021/07" label_data1="Twitter" y_data1="100, 210, 350, 420, 590, 620, 730" color_data1="#1DA1F2" label_data2="Instagram" y_data2="120, 330, 700, 900, 1400, 1750, 1812" color_data2="#CF2E92" label_data3="LINE" y_data3="220, 330, 420, 500, 600, 1350, 1500" color_data3="#00B900" max=2000 min=100 step=100 comma="true"]| オプション | 説明 | 入力例 |
|---|---|---|
| type（必須） | グラフの種類 | oresen_3graph |
| height（任意） | 高さ | 400 |
| title（任意） | タイトル | フォロワー数推移 |
| x_data（必須） | x軸のデータ | 2021/01, 2021/02, 2021/03, 2021/04, 2021/05, 2021/06, 2021/07 |
| label_data1（任意） | 凡例 | |
| y_data1 | y軸折れ線 データ１ | 100, 210, 350, 420, 590, 620, 730 |
| color_data1（任意） | 折れ線1つ目 ボーダー色 | 1DA1F2 |
| label_data2（任意） | 凡例 | |
| y_data2 | y軸折れ線 データ２ | 120, 330, 700, 900, 1400, 1750, 1812 |
| color_data2（任意） | 折れ線２つ目 ボーダー色 | #CF2E92 |
| label_data3（任意） | 凡例 | LINE |
| y_data3 | y軸折れ線 データ３ | 220, 330, 420, 500, 600, 1350, 1500 |
| color_data3（任意） | 折れ線３つ目 ボーダー色 | 00B900 |
| max（任意） | メモリ最大値 | 2000 |
| min（任意） | メモリ最小値 | 100 |
| step（任意） | メモリの間隔 | 100 |
| comma（任意） | カンマ区切りの数値 | true（非表示にする場合はfalse） |
リリース
「zip」 をクリックするとZipファイルをダウンロードできます。
ワードプレスの管理画面にアクセスしプラグインのページから新規追加でZipファイルを追加してください。
| バージョン | 日付 | 内容 | ZIP |
|---|---|---|---|
| 1.1.4 | 2021/5/18 | 折れ線グラフ３本表示 | zip |
| 1.1.2 | 2021/4/14 | 数値の表現にカンマ区切りを追加 | zip |
| 1.1.1 | 2021/3/24 | 折れ線グラフと折れ線グラフを追加 引数名を変更 | zip |
| 1.1.0 | 2021/3/21 | 棒グラフと折れ線グラフを一つのグラフ上に表示 | |
| 1.0.2 | 2021/2/16 | カラーコードの選択不具合の修正 | zip |
| 1.0.1 | 2021/2/10 | 円グラフを追加 | zip |
| 1.0.0 | 2021/2/9 | 折れ線グラフ 円グラフ | zip |
リリース内容
2021/5/18 v1.1.4
・折れ線グラフ３本表示に対応しました。
2021/4/23 v1.1.3
・y軸の最小値を追加しました。
2021/4/14 v1.1.2
・数値の表現にカンマ区切りを追加しました。
例：15000→15,000
2021/3/24 v1.1.1
・折れ線グラフと折れ線グラフを１つのグラフで表示する関数を追加しました。
・変数名を変更しました（1.1.0を廃止）
2021/3/21 v1.1.0
・折れ線グラフと棒グラフを１つのグラフで表示するショートコードを追加しました。
2021/2/10 v1.0.1
・棒グラフを追加しました
・円グラフと棒グラフのラベル表示のスイッチを追加しました。
・各グラフの細かいバグを修正しました。
2021/2/9 v1.0.0
・ショートコードで ChartJS グラフを表示するプラグインを公開しました。
機能要望
Twitter にて受け付けていますので連絡をいただければと思います。
要望リスト
- 折れ線グラフをN本表示（複数表示できるように改善）