ブログでのグラフ表示のやり方(Visualizerでのグラフ表示)

2. 稼ぐ - ブログ

ホーネットです。
私のブログはWordPressで作成していますが、ポートフォリオや資産の推移など、グラフを使う機会が多々あります。資産の内訳はスプレッドシートで管理しているので、そのソフトウェア上でグラフを作成し、スクリーンショットを掲載しています。

しかしながら細々とブログを継続している私でも、ちょっとこのやり方に対して疑問が出てきました。今回はグラフの掲載に対する現状の問題点や解決策について紹介していきたいと思います。

スポンサーリンク

グラフをスクリーンショットで運用する上での問題点

スクリーンショットを画像としてブログに載せるのは最も簡単かつ自由度の高い方法だと思いますが、長くブログ運用をしているといくつか問題点が出てきました。

スクリーンショットグラフの問題点
  • 似たような画像ファイルがどんどん増える。
  • 読者にとって最新でない情報を見せることになる。
  • グラフの中身(数値)を見ることができない。

中でも一番気になっているのが、同じような画像ファイルの乱立。サーバーの容量は無限ではないので、できる限り読者に有用な情報に容量を使い、不必要なところは節約したいところです。

そこで思い立ったが吉日!スクリーンショットを使わず、WordPress上のプラグインでグラフを作成する方法を調べましたので、紹介します。次回からこのブログではこれを使っていきます!!

スポンサーリンク

Visualizerを使ってグラフを描写する

まずはWordPressのプラグイン>新規追加で「Visualizer: Tables and Charts Manager for WordPress」を検索します。検索できたらインストールし、有効化します。これで事前準備は完了です。

次にWordPressメニューから「Visualizer」を選び、Add New Chartを選択します。作成するグラフの種類を選び、CSVファイルをアップデート(もしくは画面上でデータを入力)すればグラフはほぼ完成です。

あとは投稿作成の際にVisualizer Chartを選び、保存したグラフを表示するだけです。実際に私が作成した例を掲載しますね。

まずは米国株のポートフォリオです。

次に米国株からの配当金履歴です。

常に最新のデータが表示されますし、グラフにカーソルを乗せるとデータの内容も表示されると思います。スクリーンショットではできない芸当です。

ちなみにアップロードするCSVファイルは以下の制約があるので、作成の際は十分ご注意ください。あまり試していませんが、日本語もなるべく使わない方がいいかな。

ファイル形式:CSV
文字コード:UTF-8
1行目:タイトル
2行目:各項目のデータ系列
3行目以降:データ

データ系列は文字列ならString, 数値ならNumber, 日付ならDateといった具合です。基本的にStringとNumberだけ覚えておけば大丈夫だと思います。

ブロガーの方、是非試してみてください!

コメント