クイックスタート

全て展開

すべて折りたたむ

このクイックスタートでは、HTML マークアップおよび jQuery スクリプトを使用して、wijtreemap ウィジェットを HTML プロジェクトに追加する方法を学習します。

テキストエディタで新規の HTML ページを作成するには、下記コードを追加して文章を .html の拡張子で保存します。
ドロップダウンしてマークアップをコピーします
テキストエディタに張り付けます
コードのコピー

<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

テキストエディタに張り付けます	コードのコピー
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

依存ファイルへのリンクを HTML ページの <head> タグ内に追加します。最新の依存ファイルについては、「 wijmo cdn」のコンテンツ配信ネットワーク（CDN）ファイルを参照してください。

ドロップダウンして参照コードをコピーし、head タグ内に貼り付けます。

参照	コードのコピー
<!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" /> <!--RequireJs--> <script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script> <script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20173.128", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min" } }); </script>

<body> タグ内に次のマークアップを追加して、ウィジェットを作成します。<div> 要素によってウィジェットが作成され、その高さと幅が設定されます。

ドロップダウンしてマークアップをコピーし、body タグ内に貼り付けます。

マークアップ	コードのコピー
<h3 style="text-align: center">Area in Square Kilometers</h3> <div id="treemap" style="width:800px;height:400px;"></div> <p>The above treemap uses statistics provided by <a href = http://simple.wikipedia.org/wiki/List_of_countries_by_area> Wikipedia </a> </p>

<head> タグ内の参照の後に、次のスクリプトを追加します。このスクリプトはウィジェットを初期化し、表示するデータを追加します。

ドロップダウンしてマークアップコードをコピーし、head タグ内に貼り付けます。

マークアップ	コードのコピー
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijtreemap"], function () { $(document).ready(function () { $("#treemap").wijtreemap({ showTooltip: true, maxColor: "#FF3300", minColor: "#FFFF66", midColor: "#99FF33", maxColorValue: 45000000, minColorValue: 950000, midColorValue: 4000000, 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>

マークアップ

コードのコピー

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijtreemap"], function () {
        $(document).ready(function () {
            $("#treemap").wijtreemap({
                showTooltip: true,

                maxColor: "#FF3300",
                minColor: "#FFFF66",
                midColor: "#99FF33",
                maxColorValue: 45000000,
                minColorValue: 950000,
                midColorValue: 4000000,

                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>

作成されたウィジェットは、実際には次のように表示されます。領域をクリックすると、その子ノードが表示されます。右クリックすると、親ノードに戻ります。この例に使用されている各統計値は、ウィキペディアで公開されているデータです。

関連トピック

参照