googlechartでグラフを表示は出来たんですが、表示したグラフにマウスオーバーすることで表示されるTooltipに、Mysqlテーブルにある文字列を表示させたいんですが、その方法が分かりません。
グラフのx軸とy軸の要素をTooltipに表示することは出来たのですが、そこにMysqlテーブル内の文字列を表示するためのTooltipの記述が分かりません。
MysqlのデータをTooltipに持ってくる方法もよく分かりません。
分かる方いましたらどうかご教示くださいm(_ _)m
実際のコードから色々省略はしていますが参考程度に載せておきます。
php
1<?php 2////////////////////////////////////////////////////////////// 3 4 //dbとテーブル作成と値挿入処理 5 $link = new mysqli('localhost', 'user', 'pass', ''); 6 7 if ($mysqli->connect_error){ 8 echo "接続失敗:" . $link->connect_error; 9 exit(); 10 } 11 // データベースtestdbがなければ作成 12 $result = $link->query("CREATE DATABASE IF NOT EXISTS testDB"); 13 14 $result=$link->query("CREATE TABLE IF NOT EXISTS testDB.testTable( 15 cnt int(5) PRIMARY KEY AUTO_INCREMENT, 16 moji nvarchar(32768), 17 time int(10),) 18 "); 19 20 $link = mysqli_connect('localhost', 'user', 'pass', 'testDB'); 21 22 if (!mysqli_set_charset($link, "utf8")) { 23 printf("Error loading character set utf8: %s\n", mysqli_error($link)); 24 exit(); 25 } else { 26 printf("Current character set: %s\n", mysqli_character_set_name($link)); 27 } 28 29for ($i=0; $i < count($no); $i++) { 30 31 $stmt = mysqli_prepare($link, "INSERT INTO testTable VALUES (?, ?, ?)"); 32 mysqli_stmt_bind_param($stmt, 'isi', $cnt_no[$i], $moji_no[$i], $time_no[$i]); 33 34 // プリペアドステートメントを実行します 35 mysqli_stmt_execute($stmt); 36 //printf("%d Row inserted.\n", mysqli_stmt_affected_rows($stmt)); 37 // ステートメントと接続を閉じます 38 mysqli_stmt_close($stmt); 39 } 40 41?> 42 43<!DOCTYPE html> 44<html lang="ja"> 45<head> 46 <meta charset="UTF-8"/> 47 <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css"> 48 <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script> 49 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 50 51 <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> 52 <link href="http://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" type="text/css"> 53 <link rel="stylesheet" href="css/style.css"> 54 55 <title>test</title> 56 57 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 58 <script type="text/javascript"> 59 60 google.charts.load('current', {'packages':['line']}); 61 google.charts.setOnLoadCallback(drawChart); 62 63 function drawChart() { 64 65 var data = new google.visualization.DataTable( 66 jsonTable 67 , 0.6); 68 data.addColumn('string', '文字列'); 69 data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}}); 70 data.addColumn('number', '時間'); 71 72 var options = { 73 chart: { 74 title: 'graphtest', 75 subtitle: 'sub' 76 }, 77 78 79 tooltip: {isHtml: true} 80 81 82 width: 700, 83 height: 500, 84 legend: {position: 'none'} 85 }; 86 87 var chart = new google.charts.Line(document.getElementById('commentLinechart_material')); 88 89 chart.draw(data, options); 90 } 91 </script> 92</head> 93 94<body style="background-color: #fff"> 95 <div id="commentLinechart_material" align="center"></div> 96 97 <div class="mdl-layout mdl-js-layout"> 98 <main class="mdl-layout__content"> 99 <div class="card-wide mdl-card"> 100 101 <div class="mdl-card__title"> 102 <h2 class="mdl-card__title-text"> 103 </h2> 104 </div> 105 106 <div class="mdl-card__supporting-text"> 107 <div class="mdl-card__supporting-text"> 108 <div> 109?> 110 </div> 111 </div> 112 </div> 113 114 <div class="mdl-card__actions mdl-card--border"> 115 </div> 116 </div> 117 </main> 118 </div> 119</body> 120 121</html>
回答2件
あなたの回答
tips
プレビュー