【Google Charts】複数系列で色分けしたバブルチャートを作る配列データ形式

SHARE

WordPressにプラグインなしでグラフや図を描くことができる

Google ChartsはWordPressにプラグインなしでインタラクティブなグラフや図を描くことができます。

誰でも無償で会員登録なしに利用できるのも魅力の一つです。

例えば今回の例のバブルチャートの場合、カーソルを合わせたときに吹き出しで詳細な情報を確認できるといった良い点があります。

今回は2種類のバブルチャートの作り方を解説します。

以下の書籍はGoogle ChartのHTMLファイルのサンプルをインターネットからダウンロードできるのでおすすめです。

同様の書籍は、現時点で筆者の知る限りありません。

Google Chartsのサンプル

横軸、縦軸、バブルのサイズ、バブルの色の濃さで定量化するバブルチャート

1種類目のバブルチャートは横軸、縦軸、バブルのサイズ、バブルの色の濃さで4つの変数を定量化するバブルチャートです。

ソースコードは次のようになっています。

<!-- Ajax API の読み込み（Googleが提供しているライブラリまでのパス） -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<!-- チャート実装 -->
<script type="text/javascript">
  // Google Visualization APIと“corechart”パッケージの読み込み
    google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

function drawChart(){
        // ==================== データ指定(桁区切りはなし) ====================
var data = google.visualization.arrayToDataTable([
[' 企業名     ','     2011～2015年の研究開発費合計(百万円) ','     2016～2020年の投資効率 ','     研究開発比率(%)       ','     総売上高(百万円)       '],
[' 武田薬品工業                  ',      1677504 ,       3.0     ,       14.3    ,       3197812 ],
[' 大塚ホールディングス              ',      974464  ,       2.1     ,       15.2    ,       1422826 ],
[' アステラス製薬                 ',      1018694 ,       2.7     ,       18.0    ,       1249528 ],
[' 第一三共                    ',      957199  ,       1.9     ,       23.6    ,       962516  ],
[' 中外製薬                    ',      349843  ,       4.1     ,       15.0    ,       786946  ],
[' エーザイ                    ',      630277  ,       2.0     ,       23.3    ,       645942  ],
[' 大日本住友製薬                 ',      339875  ,       2.7     ,       25.7    ,       515952  ],
[' 田辺三菱製薬                  ',      352069  ,       1.1     ,       19.2    ,       377800  ],
[' 協和キリン                   ',      235792  ,       2.7     ,       16.4    ,       318352  ],
[' 小野薬品工業                  ',      223502  ,       3.3     ,       20.2    ,       309284  ],
[' 塩野義製薬                   ',      257201  ,       3.9     ,       18.3    ,       297177  ],
[' 大正製薬ホールディングス    ',      112758  ,       2.8     ,       7.2     ,       281980  ],
[' 参天製薬                    ',      90451   ,       4.2     ,       9.7     ,       249605  ],
[' ツムラ                             ',      27638   ,       5.6     ,       5.1     ,       130883  ],
[' 日本新薬                    ',      46700   ,       4.1     ,       13.2    ,       121885  ],
[' 久光製薬                    ',      70027   ,       2.8     ,       9.4     ,       114510  ],
[' 持田製薬                    ',      63670   ,       2.1     ,       10.5    ,       102995  ],
[' キョーリン製薬ホールディングス ',      62915   ,       1.9     ,       9.4     ,       102904  ],
[' 科研製薬                    ',      33437   ,       5.3     ,       9.0     ,       74979   ],
[' キッセイ薬品工業                ',      60247   ,       1.7     ,       13.9    ,       69044   ],
[' ゼリア新薬工業                 ',      36864   ,       2.0     ,       9.8     ,       55442   ]






        ]);
        // ================= オプションの指定 =================
        var options = {
                title: '研究開発費対売上比(%)',
                titleTextStyle: {fontSize:16},
　　　　　　　　legend :{ position: 'top'},
                bubble: {
                        opacity:0.6,
                        stroke:'#060',
                        textStyle: {fontSize:10}
                },
                sizeAxis: {maxSize:20, maxValue:1422826, minSize:3, minValue:55442},
                hAxis: {
                        title: '2011～2015年の研究開発費合計(USD Mil)'
                },
                vAxis: {
                        title: '2016～2020年の投資効率(倍)',
                        format: '#,###倍'
                }
        };
        // =================== グラフの描画 ===================
        var chart = new google.visualization.BubbleChart(document.getElementById('graph1'));
        chart.draw(data, options);
}

</script>

<!--  グラフの描画エリア -->
<center><div id="graph1" style="width:100%; height:600pt;overflow: auto;">
                    <!-- ここにチャートが描画されます。 -->
</div></center>

複数系列で色分けしたバブルチャート

2種類目のバブルチャートは横軸、縦軸、バブルのサイズで3つの変数を定量化するという点では通常のバブルチャートと同様ですが、日本、アメリカ、欧州と系列の違いでバブルの色分けをしています。

ソースコードは次のようになっています。

<!-- Ajax API の読み込み（Googleが提供しているライブラリまでのパス） -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<!-- チャート実装 -->
<script type="text/javascript">
  // Google Visualization APIと“corechart”パッケージの読み込み
    google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

function drawChart(){
        // ==================== データ指定(桁区切りはなし) ====================
        var data = google.visualization.arrayToDataTable([
['企業名              ','2011～2015年の研究開発費合計(USD Mil)','2016～2020年の投資効率(倍)','地域','時価総額(USD Mil)'],
['武田薬品工業           ',      17578   ,       2.2     ,'      日本              ',      58347   ],
['アステラス製薬  ',      10673   ,       2.4     ,'      日本              ',      29538   ],
['第一三共             ',      10081   ,       1.7     ,'      日本              ',      57876   ],
['大塚ホールディングス       ',      10250   ,       1.7     ,'      日本              ',      22440   ],
['エーザイ             ',      3607    ,       2.7     ,'      日本              ',      19918   ],
['大日本住友製薬  ',      6670    ,       1.4     ,'      日本              ',      7170    ],
['塩野義製薬            ',      3714    ,       1.8     ,'      日本              ',      16805   ],
['Pfizer           ',      39743   ,       3.4     ,'      アメリカ    ',      204605  ],
['Johnson & Johnson     ',     40936   ,       4.5     ,'      アメリカ    ',      414310  ],
['Merck (USA)           ', 38022   ,       3.3     ,'      アメリカ    ',      206957  ],
['AbbVie           ',      15833   ,       6.0     ,'      アメリカ    ',      189171  ],
['Gilead Sciences       ', 10977   ,       9.3     ,'      アメリカ    ',      73031   ],
['Amgen                    ',      18997   ,       4.1     ,'      アメリカ    ',      133852  ],
['Eli Lilly             ', 25360   ,       2.3     ,'      アメリカ    ',      161509  ],
['Bristol-Myers Squibb  ', 21928   ,       3.0     ,'      アメリカ    ',      140172  ],
['Novartis         ',      47826   ,       2.5     ,'      欧州              ',      217771  ],
['Roche                    ',      50319   ,       3.2     ,'      欧州              ',      281458  ],
['Sanofi           ',      31628   ,       2.7     ,'      欧州              ',      112936  ],
['GlaxoSmithKline  ',      29932   ,       2.9     ,'      欧州              ',      86326   ],
['AstraZeneca              ',      27163   ,       2.1     ,'      欧州              ',      130987  ],
['Bayer                    ',      21764   ,       3.4     ,'      欧州              ',      54036   ],
['Novo Nordisk             ',      10239   ,       4.9     ,'      欧州              ',      150808  ]



        ]);
        // ================= オプションの指定 =================
        var options = {
                title: '製薬企業の研究開発投資効率',
                titleTextStyle: {fontSize:16},
　　　　　　　　legend :{ position: 'top'},
                bubble: {
                        opacity:0.6,
                        stroke:'#060',
                        textStyle: {fontSize:10}
                },
                sizeAxis: {maxSize:20, maxValue:414310, minSize:3, minValue:7170},
                hAxis: {
                        title: '2011～2015年の研究開発費合計(USD Mil)'
                },
                vAxis: {
                        title: '2016～2020年の投資効率(倍)',
                        format: '#,###倍',minValue:0,maxValue:10,gridlines: {count:6}
                }
        };
        // =================== グラフの描画 ===================
        var chart = new google.visualization.BubbleChart(document.getElementById('graph2'));
        chart.draw(data, options);
}

</script>

<!--  グラフの描画エリア -->
<center><div id="graph2" style="width:100%; height:600pt;overflow: auto;">
                    <!-- ここにチャートが描画されます。 -->
</div></center>

配列データの作り方の違いでバブルチャートの種類が変わる

先程の2種類のバブルチャートの違いは配列データの作り方の違いによって種類が分かれます。

ポイントは3列目に数値データを入力するか、文字データを入力するかが分かれ目になります。

横軸、縦軸、バブルのサイズ、バブルの色の濃さで定量化するバブルチャートの場合

横軸、縦軸、バブルのサイズ、バブルの色の濃さで定量化するバブルチャートの場合、以下のようなデータ形式でコードを入力しています。

3列目に数値データを入力した場合、3列目に入力した数値データの違いがバブルの色の濃さの違いとして表現されます。

ラベル
（0列目）		 横軸
（1列目）		 縦軸
（2列目）		 バブルの色の濃さ
（3列目）		 バブルのサイズ
（4列目）
0行目 ラベル ラベル ラベル ラベル ラベル
1行目 文字 数値 数値 数値 数値
2行目 文字 数値 数値 数値 数値
3行目 文字 数値 数値 数値 数値
・
・
・		 ・
・
・		 ・
・
・		 ・
・
・		 ・
・
・		 ・
・
・

複数系列で色分けしたバブルチャートの場合

横軸、縦軸、バブルのサイズで定量化する複数系列のバブルチャートの場合、以下のようなデータ形式でコードを入力しています。

3列目に文字データを入力した場合、3列目に入力した文字データの違いが系列の違いとして表現され、バブルの色が分かれます。

ラベル
（0列目）		 横軸
（1列目）		 縦軸
（2列目）		 系列名
（3列目）		 バブルのサイズ
（4列目）
0行目 ラベル ラベル ラベル ラベル ラベル
1行目 文字 数値 数値 文字 数値
2行目 文字 数値 数値 文字 数値
3行目 文字 数値 数値 文字 数値
・
・
・		 ・
・
・		 ・
・
・		 ・
・
・		 ・
・
・		 ・
・
・

折れ線グラフや散布図など複数の系列を指定する場合、Y軸の数字になる列を複数設定し、テーブルの各行は同じX軸の値を持つデータポイントのセットを指定していました。

一方で複数系列のバブルチャートの場合、列の違いで系列を区別するのではなく、3列目に入力された文字の違いによって系列を区別することになります。

逆に、3列目に数値を入力すると系列を分類することができなくなります。

まとめ

まとめるとGoogle Chartsではバブルチャートを作る際、配列データの作り方の違いによって「横軸、縦軸、バブルのサイズ、バブルの色の濃さで定量化するバブルチャート」か「横軸、縦軸、バブルのサイズで定量化する複数系列のバブルチャート」かに分かれます。

3列目に数値データを入力した場合、「横軸、縦軸、バブルのサイズ、バブルの色の濃さで定量化するバブルチャート」になります。

3列目に文字データを入力した場合、「横軸、縦軸、バブルのサイズで定量化する複数系列のバブルチャート」になります。

今回の内容が参考になれば幸いです。

2 COMMENTS

NoWay

バブルの色自体を編集したい場合同のようにしたらいいかご存知でしょうか？

返信する

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


前の記事

【Google Charts】目盛線の間隔設定

次の記事

【Google Charts】バブルチャートのバブルの大きさ変…