Wijmo UI for the Web
ツールチップのカスタマイズ
Wijmo ユーザーガイド > ウィジェット > TreeMap > 主な機能 > ツールチップのカスタマイズ

wijtreemap ウィジェットでは、ツールチップの各オプションを使用して、画像やテキストを表示するようにツールチップをカスタマイズできます。 showTooltip オプションを true に設定すると、デフォルトでラベルと値から成るツールチップが表示されます。ツールチップに画像を表示することもできます。

たとえば、次のスクリプトでは、showTooltip オプションを true に設定して、マウスのポイント時にラベルと値を表示します。

スクリプト
コードのコピー 
<script type="text/javascript">
    require(["wijmo.wijtreemap"], function () {
        $(document).ready(function () {
            $("#treemap").wijtreemap({
                showTooltip: true,
                //set tooltip option to customize tooltip
                tooltipOptions: {
                    content: function (data) {
                        if (data.label === "Others") {
                            //add image to the tooltip
                            return "<img src='../images/livewidgets/Others.png' alt='Others' style='width:150px;height:150px;' />";
                        } else
                            //add text to the tooltip
                            return data.label + "<br/>" + "Area" + ":" + data.value + " sq. km.";
                    }
                },
                //set color values
                maxColor: "#FF3300",
                minColor: "#FFFF66",
                midColor: "#99FF33",
                maxColorValue: 45000000,
                minColorValue: 950000,
                midColorValue: 4000000,
                //add data value and label
                data: [{
                    label: "Asia",
                    value: 44579000,
                    minColor: "#B2E0FF",
                    maxColor: "#0099FF",
                    midColor: "#66C2FF",
                    items: [{
                        label: "Central Asia",
                        value: 4003451
                    }, {
                        label: "Eastern Asia",
                        value: 11839074,
                        items: [{
                            label: "China",
                            value: 9596961
                        }, {
                            label: "Japan",
                            value: 377944
                        }, {
                            label: "Others",
                            value: 1864169
                        }]
                    }, {
                        label: "South-East Asia",
                        value: 4500000
                    }, {
                        label: "Western Asia",
                        value: 6255160
                    }, {
                        label: "Southern Asia",
                        value: 17981315,
                        items: [{
                            label: "India",
                            value: 3287590
                        }, {
                            label: "Others",
                            value: 14693725
                        }]
                    }]
                }, {
                    label: "Africa",
                    value: 30221532,
                    minColor: "#FFFFC2",
                    maxColor: "#CCCC52",
                    midColor: "#FFFF75",
                    items: [{
                        label: "Northern Africa",
                        value: 8935659,
                        items: [{
                            label: "Egypt",
                            value: 1002450
                        }, {
                            label: "Morocco",
                            value: 33250000
                        }]
                    }, {
                        label: "Central Africa",
                        value: 6612667
                    }, {
                        label: "Western Africa",
                        value: 5112903
                    }, {
                        label: "Southern Africa",
                        value: 1221037
                    }, {
                        label: "Eastern Africa",
                        value: 8339266
                    }]
                }, {
                    label: "Americas",
                    value: 42549000,
                    minColor: "    #C2FFC2",
                    maxColor: "    #52CC52",
                    midColor: "    #94FF94",
                    items: [{
                        label: "South America",
                        value: 17840000,
                        items: [{
                            label: "Brazil",
                            value: 8515767
                        }, {
                            label: "Argentina",
                            value: 2780400
                        }, {
                            label: "Peru",
                            value: 1285216
                        }, {
                            label: "Colombia",
                            value: 1141748
                        }, {
                            label: "Others",
                            value: 4116869
                        }]
                    }, {
                        label: "North America",
                        value: 24709000,
                        items: [{
                            label: "Canada",
                            value: 9984670
                        }, {
                            label: "United States",
                            value: 9629091
                        }, {
                            label: "Greenland",
                            value: 2166086
                        }, {
                            label: "Mexico",
                            value: 1972550
                        }, {
                            label: "Others",
                            value: 956603
                        }]
                    }]
                }, {
                    label: "Europe",
                    value: 10180000,
                    minColor: "#FFCC99",
                    maxColor: "#E68A2E",
                    midColor: "#FFAD5C",
                    items: [{
                        label: "Ukraine",
                        value: 603628
                    }, {
                        label: "Spain",
                        value: 504645
                    }, {
                        label: "France",
                        value: 640679
                    }, {
                        label: "Sweden",
                        value: 449964
                    }, {
                        label: "Others",
                        value: 7981084
                    }]
                }, {
                    label: "Oceania",
                    value: 8525989,
                    minColor: "#00FFFF",
                    maxColor: "#4DFFFF",
                    midColor: "#33FFFF",
                    items: [{
                        label: "Australia",
                        value: 7692024
                    }, {
                        label: "NewZealand",
                        value: 268021
                    }, {
                        label: "others",
                        value: 565944
                    }]
                }, {
                    label: "Antartica",
                    value: 14000000
                }]
            });
        });
    })
   </script>

関連トピック

参照

wijtreemap メソッド

 

 

Copyright © GrapeCity inc. All rights reserved.