Wijmo UI for the Web
TreeMapのサイズの変更

Wijtreemap ウィジェットでは、resize オプションを使用して、ツリーマップの 高さ を実行時に変更できます。たとえば、次のスクリプトは、ツリーマップにサイズ変更ボタンと更新ボタンを追加します。

Wijtreemap ウィジェットでは、すべての要素が指定のキャンバスサイズ内に表示されるように、子ノードと同時に親の長方形も自動的にサイズ変更されます。ツリーマップノードのラベルテキストは、表示サイズに合わせて折り返して表示されます。

スクリプト
コードのコピー
<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijtreemap"], function () {
        $(document).ready(function () {          
            $("#treemap").wijtreemap({  
                showTooltip: true,
        //set color values for the treemap
                maxColor: "#FF3300",
                minColor: "#FFFF66",
                midColor: "#99FF33",
                maxColorValue: 45000000,
                minColorValue: 950000,
                midColorValue: 4000000,
        //add data to the treemap
                data: [{
        //create and add regions on level 0
                    label: "Asia",
                    value: 44579000,
                    minColor: "#B2E0FF",
                    maxColor: "#0099FF",
                    midColor: "#66C2FF",
                    items: [{
        //create and add regions on level 1
                        label: "Central Asia",
                        value: 4003451
                    }, {
                        label: "Eastern Asia",
                        value: 11839074,
                        items: [{
       //create and add regions on level 2
                            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
                }]

            });
    //add Resize button and set height and width of the treemap
            $("#btn_resize1").click(function () {
                $('#treemap').wijtreemap({
                    width: 350,
                    height: 350
                })
            })
    //add Refresh button and set height and width of the treemap
            $("#btn_refresh1").click(function () {
                $("#treemap").wijtreemap({
                    width: 800,
                    height: 400
                });
            });

        }); })
</script>

関連トピック

参照

 

 


Copyright © GrapeCity inc. All rights reserved.