棒グラフ

概要

Google の棒グラフは、SVG または VML のいずれかを使用してブラウザに表示され、他の Google グラフと同様に、ユーザーがデータにカーソルを合わせると、ツールチップが表示されます。この縦棒グラフについては、縦棒グラフをご覧ください。

塗り絵

4 つの貴金属の密度をグラフで見てみましょう。

上の色はすべてデフォルトの青色です。これらはすべて同じシリーズの一部であるためです。2 つ目のシリーズがあれば、赤色で表示されます。スタイルロールを使用して、次の色をカスタマイズできます。

色を選択する方法は 3 通りあります。データテーブルには、RGB 値、英語の色名、CSS に似た宣言のすべてが表示されます。

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],
         ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

バーのスタイル

スタイルロールでは、CSS に似た宣言で次のようなバーの外観を制御できます。

  • color
  • opacity
  • fill-color
  • fill-opacity
  • stroke-color
  • stroke-opacity
  • stroke-width

グラフ内では、自由にスタイルを混在させないでください(特定のスタイルのみを使用し、それを維持してください)。ただし、すべてのスタイル属性を示すために、次のようなサンプラーを使用します。

最初の 2 つのバーは、それぞれ特定の color を使用します(1 つ目は英語の名前、2 つ目は RGB 値)。opacity が選択されていないため、デフォルトの 1.0(完全に不透明)が使用されています。そのため、2 番目のバーが背後のグリッド線を隠しています。3 本目のバーでは、0.2 の opacity が使用されており、グリッド線が表示されています。4 本目のバーでは、stroke-colorstroke-width の 3 つのスタイル属性を使用して境界線を描画しています。fill-color は内側の長方形の色を指定しています。さらに、右端のバーでは、stroke-opacityfill-opacity を使用して、枠線と塗りつぶしの不透明度を選択しています。

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

ラベルバー

グラフには、ティックラベル、凡例ラベル、ツールチップのラベルなど、数種類のラベルがあります。このセクションでは、棒グラフの内側または外側にラベルを配置する方法を確認します。

各バーに適切な化学記号のアノテーションを付けるとします。これを行うには、アノテーション ロールを使用します。

データテーブルで、棒のラベルを保持する { role: 'annotation' } を含む新しい列を定義します。

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

ユーザーがバーにカーソルを合わせるとデータ値を確認でき、棒グラフ自体に値を含めることもできます。

DataView を作成して各棒のアノテーションを指定するため、これは若干複雑になります。

  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="barchart_values" style="width: 900px; height: 300px;"></div>

値を別の形式にする場合は、フォーマッタを定義し、次のような関数でラップします。

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

その後、calc: getValueAt.bind(undefined, 1) という名前を付けます。

ラベルが大きすぎて棒の中に収まらない場合は、外に表示されます。

積み上げ棒グラフ

積み上げ棒グラフは、関連する値を重ねて表示する棒グラフです。負の値がある場合は、グラフの軸のベースラインの下に逆の順序で積み重ねられます。一般に、積み上げ棒グラフは、カテゴリが自然にコンポーネントに分割される場合に使用します。たとえば、仮に書籍の販売をジャンルで分類し、経時的に比較してみましょう。

積み上げ棒グラフを作成するには、isStacked オプションを true に設定します。

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

積み上げ棒グラフでは 100% 積み上げ型がサポートされています。各ドメイン値の要素を重ねた結果、合計が 100% になるように再調整されます。このオプションのオプションは、各値を 100% の割合でフォーマットする isStacked: 'percent' と、各値を 1 の割合でフォーマットする isStacked: 'relative' です。isStacked: 'absolute' オプションもあります。これは isStacked: true と機能的に同等のオプションです。

右側の 100% スタック チャートでは、ティック値は 0 ~ 1 の相対的なスケールに 1 の割合で表されますが、軸の値はパーセンテージで表示されます。これは、パーセント軸のティックは、相対的な 0 ~ 1 のスケール値に「#.##%」の形式を適用した結果であるためです。isStacked: 'percent' を使用する場合は、必ず 0 ~ 1 の相対的なスケールでティックを指定してください。

積み上げ
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
    
100% スタック
        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    

マテリアル 棒グラフを作成する

2014 年、Google は、Google プラットフォームで実行されるプロパティとアプリ(Android アプリなど)で一般的なデザインをサポートすることを目的としたガイドラインを発表しました。Google ではこの取り組みをマテリアル デザインと呼んでいます。Google はすべてのコアチャートの「マテリアル」バージョンを提供しますが、見た目が気に入ったら自由に使用できます。

マテリアル 棒グラフの作成は、「クラシック」棒グラフと呼ばれるものの作成と似ています。Google Visualization API を読み込み('corechart' パッケージではなく 'bar' パッケージを使用します)、datatable を定義してから、オブジェクトを作成します(ただし、google.visualization.BarChart クラスではなく google.charts.Bar クラスです)。

注: マテリアル チャートは、旧バージョンの Internet Explorer では動作しません。(IE8 以前のバージョンは Material Chart に必要な SVG をサポートしていません)。

マテリアル 棒グラフは、カラーパレットの改善、角の丸み、ラベルの書式設定の改善、シリーズ間のデフォルト間隔の縮小、ソフトなグリッド線とタイトル(字幕の追加)など、従来の棒グラフよりも多くの細かい改善を行っています。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          },
          bars: 'horizontal' // Required for Material Bar Charts.
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="barchart_material" style="width: 900px; height: 500px;"></div>
  </body>
</html>

マテリアル チャートはベータ版です。外観とインタラクティビティはほぼ最終的なものですが、従来のグラフで使用できるオプションの多くはまだ利用できません。この問題では、まだサポートされていないオプションのリストを確認できます。

また、オプションが宣言する方法は最終版ではないため、次のオプションのいずれかを使用してクラシック オプションを使用している場合は、マテリアル オプションに変換する必要があります。

chart.draw(data, options);

...以下に置き換えます。

chart.draw(data, google.charts.Bar.convertOptions(options));

google.charts.Bar.convertOptions() を使用すると、hAxis/vAxis.format プリセット オプションなど、特定の機能を利用できます。

Dual-X チャート

注: デュアル X 軸は、マテリアル チャート(bar パッケージを含む)でのみ使用できます。

2 つの系列(棒グラフで 1 つの上軸、もう 1 つで下軸)という 2 つの独立した x 軸でグラフを表示できます。