はじめに

前回と同じくGoogle Chart Toolsを使ってグラフを描いていきます。

今回はBarChartで人口ピラミッドのグラフを描きます。

今回の完成形

ただ積み上げ棒グラフでピラミッドを作ろうとするとmaleかfemaleの値がマイナス値になってしまいますのでその設定をしました。

それとtooltipを半透明にしてみました。
実際の動きは JSFiddle で確認できます。

コードの中身

html

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

css

.google-visualization-tooltip {
  opacity: 0.9;
}

javascript

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

function drawPyramid() {
      
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'City');
  data.addColumn('number', 'male');
  data.addColumn('number', 'female');
      
  data.addRows([
      ['A', 81750, -80080],
      ['B', 37920, -36940],
      ['C', 26950, -28960],
      ['D', 20990, -19530],
      ['E', 15260, -15170]
  ]);

  var options = {
    title: 'people',
    isStacked: true,
    hAxis: {
      format: ';',
      direction: -1
    },
    vAxis: {
      direction: -1
    },
    legend: {
      position: 'bottom',
      maxLines: 3
    },
    tooltip: {
      isHtml: true
    },
    focusTarget: 'category'
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

  var formatter = new google.visualization.NumberFormat({
      pattern: '#,###;'
  });
  formatter.format(data, 2);

  chart.draw(data, options);
}

Optionsについて

hAxis

formatで表示上も絶対値にしています。
directionでmaleとfemaleの伸びる方向を逆にしています。

hAxis: {
  format: ';',
  direction: -1
},

vAxis

directionでaddRowしたデータを下から設定するようにしています。

vAxis: {
  direction: -1
},

tooltip

isHtmlをtrueにすることでツールチップにCSSの設定が反映されます。

tooltip: {
  isHtml: true
},

NumberFormatについて

ツールチップで表示される値はこのフォーマットで設定しないとマイナス値を表示してしまうので、設定します。

var formatter = new google.visualization.NumberFormat({
  pattern: '#,###;'
});
formatter.format(data, 2);

Tooltipの半透明の設定

CSSで透明度を設定しています。グラフオプションのtooltip.isHtmlをtrueにしないと効かないので必ず設定が必要です。

.google-visualization-tooltip {
  opacity: 0.9;
}

最後に

今回はピラミッドのグラフを描画しました。
データにマイナス値を用意しないといけないのでCSVやJSONから値を入れるときは一度マイナス値にする関数を用意しないといけないなと思いました。