Google Chartsの散布図でツールチップをカスタマイズする

2018年8月1日 2018年8月1日

admin

Google Chartsで散布図を書いた時、ツールチップをカスタマイズしたい場合があると思う。それについて説明する。

Google Charts公式の例をカスタマイズする

Google Charts公式ページの散布図のページはこちら。
更新された場合のために、魚拓もとっといた。こちら。

カスタマイズ前

身長と体重の散布図の例が載っている。しかし、このそれぞれの点にカーソルを当てた時のツールチップは装飾されておらず、全部「Weight」と出るだけだ。

ソースコードは下記の通り。

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var options = {
          title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
          legend: 'none'
        };

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

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

<html>

<head>

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

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

['Age', 'Weight'],

[ 8, 12],

[ 4, 5.5],

[ 11, 14],

[ 4, 5],

[ 3, 3.5],

[ 6.5, 7]

]);

var options = {

title: 'Age vs. Weight comparison',

hAxis: {title: 'Age', minValue: 0, maxValue: 15},

vAxis: {title: 'Weight', minValue: 0, maxValue: 15},

legend: 'none'

};

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

chart.draw(data, options);

}

</script>

</head>

<body>

</body>

</html>

カスタマイズ後

上記をカスタマイズすると、こんな感じになる。点にカーソルを当てると、名前が出るようになった。

このカスタマイズ後のソースコードは下記の通り。さっきの上の例の9～17行目のデータの入れ方を、下記では9～19行目あたりのように変えている。

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

      function drawChart2() {
        var data2 = new google.visualization.DataTable();
        data2.addColumn('number', 'Age');
        data2.addColumn('number', 'Weight');
        data2.addColumn({type: 'string', role:'tooltip'});
        
        data2.addRow([ 8,      12  , '両津勘吉くん']);
        data2.addRow([ 4,      5.5 , '中川圭一くん']);
        data2.addRow([ 11,     14 , '秋本・カトリーヌ・麗子さん']);
        data2.addRow([ 4,      5 , '大原大次郎くん']);
        data2.addRow([ 3,      3.5 , '寺井 洋一くん']);
        data2.addRow([ 6.5,    7 , '麻里愛さん']);

        var options2 = {
          title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
          legend: 'none'
        };

        var chart2 = new google.visualization.ScatterChart(document.getElementById('chart_div_2'));

        chart2.draw(data2, options2);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

<html>

<head>

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

google.charts.setOnLoadCallback(drawChart2);

function drawChart2() {

var data2 = new google.visualization.DataTable();

data2.addColumn('number', 'Age');

data2.addColumn('number', 'Weight');

data2.addColumn({type: 'string', role:'tooltip'});

data2.addRow([ 8, 12 , '両津勘吉くん']);

data2.addRow([ 4, 5.5 , '中川圭一くん']);

data2.addRow([ 11, 14 , '秋本・カトリーヌ・麗子さん']);

data2.addRow([ 4, 5 , '大原大次郎くん']);

data2.addRow([ 3, 3.5 , '寺井洋一くん']);

data2.addRow([ 6.5, 7 , '麻里愛さん']);

var options2 = {