ツールチップのカスタマイズ

「クイックスタート」の例を基に、tooltipContent オプションを使用して、オブジェクト配列のラベルをツールチップテキストに追加できます。

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを、以下のスクリプトに置き換えます。このスクリプトは、2 つのフィールドから成る複合配列にデータを変更します。また、tooltipContent オプション内の関数により、score フィールドをスパークラインにバインドし、month の値、コロン、スペース、および score の値を連結します。

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijsparkline"], function () { $(document).ready(function () { var data = [{ month: "January", score: 73 }, { month: "February", score: 95 }, { month: "March", score: 89 }, { month: "April", score: 66 }, { month: "May", score: 50 }, { month: "June", score: 65 }, { month: "July", score: 70 }, { month: "August", score: 43 }, { month: "September", score: 65 }, { month: "October", score: 27 }, { month: "November", score: 77 }, { month: "December", score: 58 }]; $("#wijsparkline").wijsparkline({ data: data, bind: "score", tooltipContent: function(){ return this.month + ': ' + this.score; } }); }); }); </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
require(["wijmo.wijsparkline"], function () {
    $(document).ready(function () {
        var data = [{ month: "January", score: 73 }, { month: "February", score: 95 }, { month: "March", score: 89 },
            { month: "April", score: 66 }, { month: "May", score: 50 }, { month: "June", score: 65 },
            { month: "July", score: 70 }, { month: "August", score: 43 }, { month: "September", score: 65 },
            { month: "October", score: 27 }, { month: "November", score: 77 }, { month: "December", score: 58 }];
        $("#wijsparkline").wijsparkline({
            data: data,
            bind: "score",
            tooltipContent: function(){
                return this.month + ': ' +  this.score;
            }
        });
    });
});
</script>

HTML ファイルの <body> セクションでは、スパークラインとテキストをインライン表示できるように、

<div> タグを <table> タグに変更します。

マークアップ	コードのコピー
<table> <tr> <td>Scores this year were all over the place:</td> <td><div id="wijsparkline" style="height:20px;width:100px" /></td> </tr> </table>

HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のようになります。スパークラインのさまざまな場所にマウスポインタを合わせると、月名とその月のデータを示すツールチップテキストが表示されます。

関連トピック

参照