売上・経費・利益をシンプルにグラフ化する方法【プラグインなしコピペOK】

売上・経費・利益をグラフ化する方法

この記事を読めば、下のようなシンプルなグラフをブログに埋め込む方法がわかります。

売上と経費と利益のグラフ

売上
3,500 万円

グラフをクリックしたりタップすると詳細なデータが動的に表示されます。

このグラフを導入するのにプラグインは不要です。
Google Chartsのコードをコピペして、数値データなどを書きかえるだけでOKです。

色も簡単にカスタマイズできますので、自分のブログテーマにあったオリジナルデザインに仕上げることができちゃいます。

グラフを活用して、シンプルで分かりやすい記事を作りましょう。

コードをコピペする3ステップ

HTMLブロックを使ってGoogleChartsをブログに埋め込む方法

ステップ1

記事の中でグラフを表示したい場所にカスタムHTMLブロックを配置し、下のコードをコピペしてください。

HTMLブロック❶
<style>
  .chartWithOverlay {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto; 
  }
  .overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
  }
</style>
<div class="chartWithOverlay">
  <div id="pie_chart"></div>
  <div class="overlay">
  <div style="font-size: 12px; font-weight: bold; color: #3a3a3a;">売上<br><span style="font-size: 25px;">3,500</span><span style="font-size: 12px;"> 万円</span></div>
  </div>
</div>

ステップ2

記事の最後にカスタムHTMLブロックを配置し、下のコードをコピペしてください。

HTMLブロック❷
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

ステップ3

ステップ2で配置したカスタムHTMLブロックの次にもう1つカスタムHTMLブロックを配置し、下のコードをコピペしてください。

HTMLブロック❸
<!-- 売上・経費・利益のグラフ -->
<script type="text/javascript">

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  // グラフカラー
  var color = ['#EA4060', '#41C9B4'];
  
  var dataTable = new google.visualization.DataTable();
  // グラフデータ
  dataTable.addColumn('string', '項目');
  dataTable.addColumn('number', '金額');
  dataTable.addRows([
    ['利益', {v:1000, f:'1,000万円'}],
    ['経費', {v:2500, f:'2,500万円'}],
  ]);

  var options = {
    chartArea: {
      left: 30,
      right: 30,
      top: 30,
      bottom: 30,
    },
    height: 300,
    width: 300,
    legend: {
      position: 'none',
    },
    tooltip: {
      text: 'both',
      textStyle: {
        fontSize: 15,
      },
      showColorCode: 'true',
    },
    pieSliceText: 'label',
    pieHole: .6,
    slices: {
      0: {
        color: color[0],
	        textStyle: {
	          color: '#fff', 
	          fontSize: 13, 
	          bold: true, 
	        },
      },
      1: {
        color: color[1],
	        textStyle: {
	          color: '#fff', 
	          fontSize: 13, 
	        },
      },
    },
  };

  var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));

  chart.draw(dataTable, options);
}

</script>

コードのコピペができたら、記事をプレビューしてグラフが表示されていることを確認します。

グラフが表示されなければステップ1からやり直してください。

グラフデータを編集する方法

グラフデータのコードの場所

グラフのデータを編集するには、カスタムHTMLブロック❸のコードの中の、次の部分を編集します。

HTMLブロック❸の一部
   // グラフデータ
  dataTable.addColumn('string', '項目');
  dataTable.addColumn('number', '金額');
  dataTable.addRows([
    ['利益', {v:1000, f:'1,000万円'}],
    ['経費', {v:2500, f:'2,500万円'}],
  ]);
入力は原則「半角文字」で

ただし、シングルクォーテーション「’」で囲まれた部分は全角文字を使うことができます。

シングルクォーテーション「’」やカンマ「,」を間違って消さないよう注意してください。

データを編集したら、プレビューで表示を確認しましょう。

グラフデータ構造の解説

このグラフのデータ構造は、下の表のようなイメージです。

項目金額
利益v: 1000,
f: ‘1,000万円’
収益v: 2500,
f: ‘2,500万円’
「v:数値, f:’文字列’」の使い方

vで数値を指定し、fで表示用データを指定することができます。

fはグラフ要素をマウスオーバーまたはタップした時に表示される注釈(tooltip)に反映されます。

売上を編集する

ドーナツチャートの真ん中部分に表示している「売上」は、オーバーレイという方法を使っています。

htmlのブロック要素(div)を使って、Google Chartsの上に重ねて表示させています。

下のdivブロックがドーナツチャートの中央に重なるように、CSSで位置を調整しています。

HTMLブロック❶の一部
<div style="font-size: 12px; font-weight: bold; color: #3a3a3a;">売上<br><span style="font-size: 25px;">3,500</span><span style="font-size: 12px;"> 万円</span></div>

divブロックの中身は自由に編集できます。

文字が多くなる場合は、フォントサイズを小さくするなどしてドーナツチャートに収まるように調整してください。

色を編集する

色にこだわりがなければ、編集する必要はありません。

ドーナツチャートの色は、次の部分のコードを編集できます。

HTMLブロック❸の一部
  // グラフカラー
  var color = ['#EA4060', '#41C9B4'];

カンマ区切りの配列データで色情報をまとめています。

このグラフでは2つの色情報を使っています。

順番に、利益(赤色)、経費(緑色)の色に対応しています。

好きなカラーコードを上書きしてください。

このグラフを導入しているブロガーさん

ブログの記事で実際にこのグラフを使っているブロガーさんの記事を紹介します。

モサチキン「農民モサチキブログ」

東京ドーム14個分というスケールのデカイ農業を営まれているモサチキンさんのブログです。

ふだん目にすることのない小麦農家の売上・経費・利益をグラフ化していますので、ぜひご覧ください。

まとめ

この記事では、Google Chartsを使って売上・経費・利益をグラフ化する方法を解説しました。
シンプルなグラフを使うことで、分かりやすくなるだけでなく、記事の訴求力を高めることができます。

このグラフを活用したブログ記事との相互リンクを募集しています。
ご希望の方は、コメントまたはTwitterのDMでの連絡をお待ちしております。

また、Google Chartsを使うことで様々なグラフを表示することができます。
他のグラフの使い方やデザイン集は、以下の記事をご覧ください。

wordpressブログにグラフを埋めこむためのGoogleChartsの使い方WordPressブログにグラフを埋めこむためのGoogleChartsの使い方

コメントを残す