デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

GoogleGraphでグラフを追加する方法

GoogleGraph5
WordPressのプラグイン「GoogleGraph」を使って
簡単にグラフを追加できましたので備忘録として残しておきます。

スポンサーリンク

プラグイン「GoogleGraph」をインストール

WordPressのプラグイン「GoogleGraph」をインストールします。
GoogleGraph1

WordPress管理画面のプラグイン->新規追加で、「GoogleGraph」を検索し、インストールします。
インストールが完了したら、有効化します。

グラフ追加方法

「GoogleGraph」をインストールしたら、編集画面の上にグラフ用のタグボタンが増えています。
GoogleGraph2

lineChart(折れ線グラフ)を追加してみます。
編集画面の上にある[lineChart]タグをクリックすると、タグのテンプレートが挿入されますので、
そこに、グラフの情報を追加していきます。(以下タグの例)

タグに指定する情報の説明
・width=”100%” ⇒画面の横幅にグラフが収まるように、widthには100%を指定しています。
・vaxis=”{title: ”}” ⇒グラフの縦軸の名称を記載します。
・haxis=”{title: ”}” ⇒グラフの横軸の名称を記載します。
・title=”” ⇒グラフのタイトルを指定します。

グラフの数値データの指定
以下のように、横軸、縦軸の各数値を記載していきます。
[‘横軸の値’, ‘縦軸の値(1)’, ‘縦軸の値(2)’],

これで、以下のようにlineChartが完成です。
GoogleGraph3

最後に

今回は、資格試験の勉強実績をグラフで表現するため、「GoogleGraph」を使ってみました。
以下、勉強実績サイトのリンク↓
GoogleGraph4

「GoogleGraph」では、他にも色んなグラフが追加できるようです。
今回はlineChartのみの紹介でしたが、他のグラフについても使い方をマスターしたら本記事に追記していこうと思います。
それでは、少しでも参考になれば幸いです。

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン