GoogleGraphでグラフを追加する方法
WordPressのプラグイン「GoogleGraph」を使って
簡単にグラフを追加できましたので備忘録として残しておきます。
プラグイン「GoogleGraph」をインストール
WordPressのプラグイン「GoogleGraph」をインストールします。
WordPress管理画面のプラグイン->新規追加で、「GoogleGraph」を検索し、インストールします。
インストールが完了したら、有効化します。
グラフ追加方法
「GoogleGraph」をインストールしたら、編集画面の上にグラフ用のタグボタンが増えています。
lineChart(折れ線グラフ）を追加してみます。
編集画面の上にある[lineChart]タグをクリックすると、タグのテンプレートが挿入されますので、
そこに、グラフの情報を追加していきます。（以下タグの例）
|
1 2 3 4 5 6 7 8 9 10 |
[lineChart width="100%" vaxis="{title: '事例数'}" haxis="{title: '月'}" title="解いた事例数実績"] ['月', '解いた事例数', '目標事例数'], ['5月', 18, 15], ['6月', , 30], ['7月', , 45], ['8月', , 60], ['9月', , 80], ['10月', , 100], [/lineChart] |
タグに指定する情報の説明
・width=”100%” ⇒画面の横幅にグラフが収まるように、widthには100%を指定しています。
・vaxis=”{title: ”}” ⇒グラフの縦軸の名称を記載します。
・haxis=”{title: ”}” ⇒グラフの横軸の名称を記載します。
・title=”” ⇒グラフのタイトルを指定します。
グラフの数値データの指定
以下のように、横軸、縦軸の各数値を記載していきます。
[‘横軸の値’, ‘縦軸の値(1)’, ‘縦軸の値(2)’],
これで、以下のようにlineChartが完成です。
最後に
今回は、資格試験の勉強実績をグラフで表現するため、「GoogleGraph」を使ってみました。
以下、勉強実績サイトのリンク↓
「GoogleGraph」では、他にも色んなグラフが追加できるようです。
今回はlineChartのみの紹介でしたが、他のグラフについても使い方をマスターしたら本記事に追記していこうと思います。
それでは、少しでも参考になれば幸いです。
スポンサーリンク
