スポンサーリンク

ショートコードで誰でも簡単にChartJSの美しいグラフ表示ができるプラグイン

2021.02.09
スポンサーリンク

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_data1y軸折れ線
データ		100, 310, 550, 120, 90, 820, 930
color_data1（任意）折れ線
ボーダー色		9AA2EB
label_data2（任意）凡例収益
y_data2y軸棒グラフ
データ		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（任意）凡例Twitter
y_data1y軸折れ線
データ１		100, 310, 550, 120, 90, 820, 930
color_data1（任意）折れ線1つ目
ボーダー色		1DA1F2
label_data2（任意）凡例Instagram
y_data2y軸折れ線
データ２		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（任意）凡例Twitter
y_data1y軸折れ線
データ１		100, 210, 350, 420, 590, 620, 730
color_data1（任意）折れ線1つ目
ボーダー色		1DA1F2
label_data2（任意）凡例Instagram
y_data2y軸折れ線
データ２		120, 330, 700, 900, 1400, 1750, 1812
color_data2（任意）折れ線２つ目
ボーダー色		#CF2E92
label_data3（任意）凡例LINE
y_data3y軸折れ線
データ３		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.42021/5/18折れ線グラフ３本表示zip
1.1.22021/4/14数値の表現にカンマ区切りを追加zip
1.1.12021/3/24折れ線グラフと折れ線グラフを追加
引数名を変更		zip
1.1.02021/3/21棒グラフと折れ線グラフを一つのグラフ上に表示
1.0.22021/2/16カラーコードの選択不具合の修正zip
1.0.12021/2/10円グラフを追加zip
1.0.02021/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本表示（複数表示できるように改善）

導入事例

ホーム
タイトルとURLをコピーしました