googlechartsのツールチップに文字列を追加したい

前提・実現したいこと

某サイトに投稿されていたjsonファイルを読み取り、googlechartでグラフ表示する
という内容を参考にさせて頂いております。このソースをカスタマイズしてツールチップの
表示内容を変更したいのですがなかなかうまくいきません。

実現したいのは、
man.jsonファイルへ"name":"〇〇"を追加し、そのnemeをツールチップへ表示したいです。

{"man":[
{"age":8,"weight":12,"name":"一郎"},
{"age":4,"weight":5.5,"name":"二郎"},
{"age":11,"weight":14,"name":"三郎"},
{"age":4,"weight":5,"name":"四郎"},
{"age":3,"weight":3.5,"name":"五郎"},
{"age":6.5,"weight":7,"name":"六郎"}
]}

ツールチップ表示例

一郎
age : 8
weight : 12

ソース及びjsonファイルは某サイト様より抜粋させて頂きました。

初めての質問でマナー違反等ご了承下さい。

該当のソースコード

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" content="">
    <title>google-chart 散布図</title>
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript" ></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    
    <!-- スクリプト部分 -->
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
 
      function drawChart() {
      var dataArray = [['Age','Weight']];
      var df = $.Deferred();
 
      $(function() {
          $.ajax({
          url: 'man.json',
          dataType : 'json',
          }).done(function(data){
          console.log("success");
          $(data.man).each(function(){
              var data_item = [this.age,this.weight];
              dataArray.push(data_item);
          });
          df.resolve();
          }).fail(function(){
          console.log("error");
          });
      });
 
      df.done(function(){
      var chartdata = google.visualization.arrayToDataTable(dataArray);
               
      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(chartdata, options);
      });
      }
    </script> 
  </head>
  
  <!-- HTML部分 -->
  <body>
    
    <h1>jsonファイルから散布図を表示</h1>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
 
  </body>
</html>

man.json
{"man":[
{"age":8,"weight":12},
{"age":4,"weight":5.5},
{"age":11,"weight":14},
{"age":4,"weight":5},
{"age":3,"weight":3.5},
{"age":6.5,"weight":7}
]}

行動規範の内容に同意します

回答1件

ベストアンサー

drawChart()の中身を下記のようにしてみてはいかがでしょうか。

jQuery
1function drawChart() {
2	var dataArray = [];
3	var df = $.Deferred();
4	
5	$(function() {
6		$.ajax({
7			url: 'man.json',
8			dataType : 'json'
9		}).done(function(data){
10			console.log("success");
11			$(data.man).each(function(){
12				var data_item = [this.age,this.weight,'name: ' + this.name + '<br>age:' + this.age + '<br>weight: ' + this.weight];
13				dataArray.push(data_item);
14			});
15			df.resolve();
16		}).fail(function(){
17			console.log("error");
18		});
19	});
20	
21	df.done(function(){
22		var chartdata = new google.visualization.DataTable();
23		chartdata.addColumn('number', 'Age');
24		chartdata.addColumn('number', 'Weight');
25		chartdata.addColumn({type: 'string', role: 'tooltip', p: {'html': true}});
26		chartdata.addRows(dataArray);
27		
28		var options = {
29			title: 'Age vs. Weight comparison',
30			hAxis: {title: 'Age', minValue: 0, maxValue: 15},
31			vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
32			tooltip: {isHtml: true},
33			legend: 'none'
34		};
35		var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
36		chart.draw(chartdata, options);
37	});
38}
39