バリュートラスト|価値を生む・未来を託す・投資を歩く

実践重視の投資と家計管理の記録、運用管理に役立つアセットツール、最新ニュースをお届けする投資ブログです。

アセットアロケーション円グラフメーカーの使い方

アセットアロケーション円グラフメーカーのサンプル

アセットアロケーション円グラフメーカーは、アセットアロケーションの円グラフを簡単に作成できるサービスです。

系列・割合・色を指定するだけで、グラフを作成できます。また、ブログでポートフォリオやアセットアロケーションを示す用途にグラフを最適化しています。

アセットアロケーション円グラフメーカーは、スマートフォンでも同様に操作できますので、どうぞご活用ください。

目次

作った動機

現在、投資ブロガーの方々の多くは、ファンドの海ポートフォリオグラフ メーカーを利用されています。

ファンドの海のポートフォリオグラフ メーカーのサンプル

また、わたしのインデックス資産配分ツールも、綺麗な円グラフを生成します。

わたしのインデックスの資産配分ツールのサンプル

しかし、前者は同系色の配色しか選択できず、後者はブログでの使用が考慮されていないという点が、私としては使い辛いと感じていました。

それに加えて、両者とも円グラフ(画像)の大きさを指定できず、本ブログには最適なサイズでない点も、何とかできないものかと考えていました。

これらのニーズをすべて満たすために作ったのが、このアセットアロケーション円グラフメーカーです。

画像グラフと多機能グラフ

アセットアロケーション円グラフメーカーでは、「画像グラフ」と「多機能グラフ」の2種類の円グラフを作成できます。

  • 画像グラフは、ごく一般的な、画像として表示するグラフです。
  • 多機能グラフは、JavaScriptなどの技術を使用し、マウスカーソルを合わせたりタップしたりすると反応するグラフです。

なお、多機能グラフは、ブログなどの環境によっては正しく表示できない可能性があります。その場合、画像グラフをご利用ください。

操作手順

アセットアロケーション円グラフメーカーを開きます。

アセットツール・オーガナイザーとのデータ連携

アセットツール・オーガナイザーで入力したデータを活用する場合、「データ連携を設定する」を選択します。元に戻す(アセットアロケーション円グラフメーカーを単体で使用する)には、「データ連携を解除する」を選択します。

入力フォーム

「入力方法」で「割合入力」を選択すると割合での入力が、「金額入力」を選択すると金額での入力が可能となります。

「グラフ表示項目」で「割合のみ」を選択すると、割合のみをグラフに表示します。また、「金額・割合」を選択すると、金額と割合の両方をグラフに表示します。

金額を入力するか、または割合の合計が100%となるように入力します。必要に応じて、系列名も修正できます。

なお、割合が0%の系列は、作成結果の円グラフに表示されませんので、その系列名は適当で構いません。

色を個別指定するか、同系色とするかを選択します。初期状態では、私のインデックスに近い色を個別指定しています。

入力フォーム

「作成する」を選択します。

作成結果の表示

入力フォームに戻る

入力をやり直したい場合、「入力フォームに戻る」を選択します。

グラフの調整

入力フォームに戻る

グラフの横幅と高さを調整します。横幅は320~960px、高さは180~540pxの範囲で指定できます。

また、「SS」「S」「M」「L」「LL」を選択すると、プリセットの横幅と高さを指定できます。

  • SSサイズ…横幅320px・高さ180px
  • Sサイズ…横幅480px・高さ270px
  • Mサイズ…横幅640px・高さ360px
  • Lサイズ…横幅800px・高さ450px
  • LLサイズ…横幅960px・高さ540px

色を調整できます。なお、個別指定の色を変更するには、「入力フォームに戻る」を選択し、そちらの画面で変更してください。

表示を調整できます。

  • 「中心を塗りつぶす」を選択すると、ドーナツ円グラフでなく、通常の円グラフとなります。
  • 「立体にする」を選択すると、円グラフを立体的に表示します。なお、通常の円グラフのみ、立体にできます。
  • 「凡例を引き出し線にする」を選択すると、系列名を円グラフからの引き出し線で表示します。なお、グラフの横幅や高さが小さい場合、一部の系列名を表示しない場合があります。

調整した内容を反映するには、「グラフを再作成する」を選択します。

画像グラフ

画像グラフ

画像グラフをダウンロードし、ブログに貼り付けることができます。

また、画像グラフをブログなどに表示するためのHTMLコードのサンプルを表示します。

多機能グラフ

多機能グラフ

多機能グラフをプレビュー表示します。

多機能グラフは、マウスカーソルを合わせたりタップしたりすると反応します。

多機能グラフの埋め込み用HTMLコード

多機能グラフをブログに埋め込むためのHTMLコードが表示されます。

複数の多機能グラフを同一ページに表示するには

同じページに複数の多機能グラフを表示する場合、HTMLコードのカスタマイズが必要となるため、その方法を説明しています。

なお、画像グラフの場合や、1ページにつき1つの多機能グラフを表示する場合、この手順は不要です。

初期状態の場合

初期状態の場合、上記のようなグラフを作成します。

「表示」で「凡例を引き出し線にする」を選択した場合

「表示」で「凡例を引き出し線にする」を選択した場合、上記のようなグラフを作成します。

「表示」で「中心を塗りつぶす」・「立体にする」を選択した場合、上記のようなグラフを作成します。

「色」で「水色系」を選択し、「表示」で「中心を塗りつぶす」・「凡例を引き出し線にする」を選択した場合、上記のようなグラフを作成します。

ソーシャルボタン

  • ツイート
  • シェア
  • LINE
  • ブックマーク
  • Pocket

関連記事

前後記事

前後の記事を表示します

コメント

コメント投稿時のメールアドレスは一般公開されませんのでご安心ください。

コメントを表示します

口座開設

相互リンク

  • 直近30日間の訪問数の多い順に表示します
  • 直近12時間の更新日時の新しい順に表示します

ツイート

  • ツイートの新しい順に表示します