読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

ツールチップでグラフ上の値をポップアップ表示する

<スポンサーリンク>

highchartsでグラフを描いていると、その値をポップアップで表示したい時があります。
そういうときは、プロパティに「tooltip」を指定すれば、グラフの上をマウスオーバーした時に値を表示することができます。

イメージとしては、こんな感じです。

f:id:sho322:20140515065814j:plain

このイメージを表示するのは以下のようなコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>highchartsのサンプル</title>

<style type="text/css">
.example-container {
    border: 1px solid #000;
    padding: 20px;
    float: left;
    margin: 10px;
}

.example {
    width: 300px;
    height: 300px;
    float: left;
}
.example + .example {
    margin-left: 60px;
}
</style>

<script src="js/jquery-1.11.1.js"></script>
<script src="js/highcharts.src.js"></script>
<script src="js/highcharts-more.src.js"></script>
<script>
$(document).ready(function() {
    var formatter = function() {
        var tooltipMessage = '';
        tooltipMessage += 'データ(' + (this.x + 1)+ ')<br>';
        for (var i=0; i < this.points.length; i++) {
            tooltipMessage += '値[' + i + '] value:' + this.points[i].y + '<br>'; 
        }

        return tooltipMessage;
    }

    var options = {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'ツールチップ表示してみる'
        },
        series: [{
            name: 'Sample #1',
            data: [2,4,6,8]
        }, {
            name: 'Sample #2',
            data: [3,5,7,9]
        }],
        tooltip: {
            formatter: formatter,
            borderColor: 'darkslateblue',
            backgroundColor: 'thistle',
            shared: true
        }
    };

    $('#example1').highcharts(options);

});
</script>

</head>
<body>

<div class='example-container'>
    <div class='example' id="example1"></div>
</div>

</body>
</html>

tooltipに渡したformatterは、

<b>,<strong>,<i>,<em>

などのタグもサポートしている。