質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.78%

グラフにマウスオーバーすることで文字列を表示したい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,223

score 19

googlechartでグラフを表示は出来たんですが、表示したグラフにマウスオーバーすることで表示されるTooltipに、Mysqlテーブルにある文字列を表示させたいんですが、その方法が分かりません。
グラフのx軸とy軸の要素をTooltipに表示することは出来たのですが、そこにMysqlテーブル内の文字列を表示するためのTooltipの記述が分かりません。
MysqlのデータをTooltipに持ってくる方法もよく分かりません。

分かる方いましたらどうかご教示くださいm(_ _)m

実際のコードから色々省略はしていますが参考程度に載せておきます。

<?php
//////////////////////////////////////////////////////////////

            //dbとテーブル作成と値挿入処理
    $link = new mysqli('localhost', 'user', 'pass', '');

    if ($mysqli->connect_error){
        echo "接続失敗:" . $link->connect_error;
        exit();
    }
    // データベースtestdbがなければ作成
    $result = $link->query("CREATE DATABASE IF NOT EXISTS testDB");

    $result=$link->query("CREATE TABLE IF NOT EXISTS testDB.testTable(
        cnt int(5) PRIMARY KEY AUTO_INCREMENT,
        moji nvarchar(32768),
        time int(10),)
        ");

    $link = mysqli_connect('localhost', 'user', 'pass', 'testDB');

    if (!mysqli_set_charset($link, "utf8")) {
        printf("Error loading character set utf8: %s\n", mysqli_error($link));
        exit();
    } else {
        printf("Current character set: %s\n", mysqli_character_set_name($link));
    }

for ($i=0; $i < count($no); $i++) {

        $stmt = mysqli_prepare($link, "INSERT INTO testTable VALUES (?, ?, ?)");
        mysqli_stmt_bind_param($stmt, 'isi', $cnt_no[$i], $moji_no[$i], $time_no[$i]);

        // プリペアドステートメントを実行します
        mysqli_stmt_execute($stmt);
        //printf("%d Row inserted.\n", mysqli_stmt_affected_rows($stmt));
        // ステートメントと接続を閉じます
        mysqli_stmt_close($stmt);
    }

?>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
    <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <link href="http://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/style.css">

    <title>test</title>

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

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

        function drawChart() {

            var data = new google.visualization.DataTable(
                jsonTable
                , 0.6);
                data.addColumn('string', '文字列');
                data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
                data.addColumn('number', '時間');

                var options = {
                chart: {
                    title: 'graphtest',
                    subtitle: 'sub'
                },


                tooltip: {isHtml: true}


                width: 700,
                height: 500,
                legend: {position: 'none'}
            };

            var chart = new google.charts.Line(document.getElementById('commentLinechart_material'));

            chart.draw(data, options);
        }
    </script>
</head>

<body style="background-color: #fff">
    <div id="commentLinechart_material" align="center"></div>

    <div class="mdl-layout mdl-js-layout">
        <main class="mdl-layout__content">
            <div class="card-wide mdl-card">

                <div class="mdl-card__title">
                    <h2 class="mdl-card__title-text">
                    </h2>
                </div>

                <div class="mdl-card__supporting-text">
                    <div class="mdl-card__supporting-text">
                        <div>
?>
                        </div>
                    </div>
                </div>

                <div class="mdl-card__actions mdl-card--border">
                </div>
            </div>
        </main>
    </div>
</body>

</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kunai

    2016/11/24 13:52

    何がわからないのかもう少し詳細に教えてください。JavaScriptにPHPのデータを渡す方法がわからない?GoogleGraphのTooltipの記述がわからない?などなど

    キャンセル

  • sdnco

    2016/11/24 14:40

    ご指摘ありがとうございます。更新しました。

    キャンセル

回答 2

checkベストアンサー

+4

ここに書いてあるようにすれば、Tooltipに表示されるものを自由に変更することができると思います。

Tooltips | Charts | Google Developers
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

後はMySQLから取得したデータをはめ込めば良いでしょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

-1

マイエスキューエルのデータを一度取得して、エイジャックスでデータを渡して要素ホバー時に表示すれば良いです。

DBからPHPで引っ張ってきたデータをjQueryで扱う際はエイジャックスを利用するのが開発側の指針ですから。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る