googlechart tooltipの表示設定について

概要

googlechartを利用してScatterChart(散布図)の作成をしています。

<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','scatter']});
google.charts.setOnLoadCallback(drawChart);

function drawChart () {

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Hours Studied');
  data.addColumn('number', 'Final');
  data.addColumn('number', 'Semi-Final');
  data.addColumn('number', 'Quarter-Final');
  data.addColumn({type: 'string', role: 'tooltip'});

  data.addRows([
    [0,67, null, null,'ac'],
    [1,88, null, null,'bg'],
    [2,77, null, null,'ca'],
    [0,null, null, 86,'dl'],
    [3,null, 55, null,'er'],
    [4,null, null, 95,'fp'],
    [2, 50, null, null,'gu'],
    [2, null, 60, null,'hp'],
  ]);

  var options = {
    series: {
      0: {pointShape: 'square', pointSize: 15},
      1: {pointShape: 'diamond', pointSize:15},
      2: {pointShape: 'circle', pointSize:15}
    },
    colors: ['red', 'blue', 'orange'],
    title: 'Students\' Final Grades',
    titleTextStyle:{
      fontSize: 24,
      fontName: 'Meiryo UI',
    },
    backgroundColor: '#f0f8ff',
    hAxis: {title: 'Class', titleTextStyle:{fontSize:18, bold:true}},
    vAxis: {title: 'Score', titleTextStyle:{fontSize:18, bold:true}},
    legend: 'none',
  };
  var chart = new google.visualization.ScatterChart(document.getElementById('scatterchart_material'));

  chart.draw(data, google.charts.Scatter.convertOptions(options));
}
</script>
</head>
<body>
       <div id="scatterchart_material"></div>
</body>
</html>

のhtmlソースで

の図を表示させる所までできています。

想定外の現象内容

今回質問したいのはtooltipの表示設定に関する内容になります。
図でいう"Quarter-Final"となるポイントの
[0,null, null, 86,'dl'],
[4,null, null, 95,'fp'],
についてはツールチップがそれぞれ’dl’,’fp’と、自分が今実装したhtmlファイルとしては
想定どおりの表示がされるのですが、
それ以外のポイントについては想定どおりの表示がされません。例えば

リスト[0,67, null, null,'ac']のツールチップの表示は「Final 0,67」
リスト[1,88, null, null,'bg']のツールチップの表示は「Final 1,88」
リスト[2, null, 60, null,'hp']のツールチップの表示は「Semi-Final 2,60」
リスト[3,null, 55, null,'er']のツールチップの表示は「Semi-Final 3,55」

とツールチップ表示されてしまいます。

質問

全ポイントでツールチップ列の文字列を表示させるには
どこの実装内容がまずいのかを御教授いただきたいです。

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

回答1件

自己解決

自己解決できました。

addColumnメソッドとaddRowsメソッドの実装を変更する事で
狙っていた処理を実現する事ができました。

-  data.addColumn('number', 'Hours Studied');
-  data.addColumn('number', 'Final');
-  data.addColumn('number', 'Semi-Final');
-  data.addColumn('number', 'Quarter-Final');
-  data.addColumn({type: 'string', role: 'tooltip'});

-  data.addRows([
-    [0,67, null, null,'ac'],
-    [1,88, null, null,'bg'],
-    [2,77, null, null,'ca'],
-    [0,null, null, 86,'dl'],
-    [3,null, 55, null,'er'],
-    [4,null, null, 95,'fp'],
-    [2, 50, null, null,'gu'],
-    [2, null, 60, null,'hp'],
-  ]);

// pointの各シリーズに対してtooltip列を追加するようにした
+  data.addColumn('number', 'Hours Studied');
+  data.addColumn('number', 'Final');
+  data.addColumn({type: 'string', role: 'tooltip'});
+  data.addColumn('number', 'Semi-Final');
+  data.addColumn({type: 'string', role: 'tooltip'});
+  data.addColumn('number', 'Quarter-Final');
+  data.addColumn({type: 'string', role: 'tooltip'});

+  data.addRows([
+    [0, 67, 'ac', null, null, null, null],
+    [1, 88, 'bg', null, null, null, null],
+    [2, 77, 'ca', null, null, null, null],
+    [0, null, null, null, null, 86, 'dl'],
+    [3, null, null, 55, 'er', null, null],
+    [4, null, null, null, null, 95, 'fp'],
+    [2, 50, 'gu', null, null, null, null],
+    [2, null, null, 60, 'hp', null, null],
+  ]);

投稿2022/05/03 14:34

keyakisakura

総合スコア26