マークアップとスクリプティング

wijtreemap ウィジェットの HTML マークアップは、次のようになります。

マークアップ	コードのコピー
<div id="treemap" style="width: 800px; height: 400px;"></div>

ウィジェットを初期化し、データを追加するには、次の jQuery スクリプトを使用します。

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijtreemap"], function () { $(document).ready(function () { $("#treemap").wijtreemap({ showTooltip: true, maxColor: "#99FF66", minColor: "#FF6666", midColor: "#66FFFF", maxColorValue: 30, minColorValue: 15, midColorValue: 25, data: [{ label: "World", value: 100, items: [{ label: "Continent A", value: 70, minColor: "#D1A3FF", maxColor: "#3399FF", midColor: "#9494FF", items: [{ label: "Country A.1", value: 40, items: [{ label: "State A.1.1", value: 10 }, { label: "State A.1.2", value: 15 }, { label: "State A.1.3", value: 15 }] }, { label: "Country A.2", value: 30, items: [{ label: "State A.2.1", value: 20 }, { label: "State A.2.2", value: 10 }] }] }, { label: "Continent B", value: 30, minColor: "#D1A3FF", maxColor: "#3399FF", midColor: "#9494FF", items: [{ label: "Country B.1", value: 18, items: [{ label: "State B.1.1", value: 10 }, { label: "State B.1.2", value: 8 }] }, { label: "Country B.2", value: 12, items: [{ label: "State B.2.1", value: 7 }, { label: "State B.2.2", value: 5 }] }] }] }], labelFormatter: function () { return this.label; } }); }); }) </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijtreemap"], function () {
        $(document).ready(function () {          
            $("#treemap").wijtreemap({     
            showTooltip: true,
            maxColor: "#99FF66",
            minColor: "#FF6666",
            midColor: "#66FFFF",
            maxColorValue: 30,
            minColorValue: 15,
            midColorValue: 25,
            data: [{
                label: "World",
                value: 100,
                items: [{

                    label: "Continent A",
                    value: 70,
                    minColor: "#D1A3FF",
                    maxColor: "#3399FF",
                    midColor: "#9494FF",
                    items: [{
                        label: "Country A.1",
                        value: 40,
                        items: [{
                            label: "State A.1.1",
                            value: 10
                        }, {
                            label: "State A.1.2",
                            value: 15
                        }, {
                            label: "State A.1.3",
                            value: 15
                        }]
                    }, {
                        label: "Country A.2",
                        value: 30,
                        items: [{
                            label: "State A.2.1",
                            value: 20
                        }, {
                            label: "State A.2.2",
                            value: 10
                        }]
                    }]
                }, {
                    label: "Continent B",
                    value: 30,
                    minColor: "#D1A3FF",
                    maxColor: "#3399FF",
                    midColor: "#9494FF",
                    items: [{
                        label: "Country B.1",
                        value: 18,
                        items: [{
                            label: "State B.1.1",
                            value: 10
                        }, {
                            label: "State B.1.2",
                            value: 8
                        }]
                    }, {
                        label: "Country B.2",
                        value: 12,
                        items: [{
                            label: "State B.2.1",
                            value: 7
                        }, {
                            label: "State B.2.2",
                            value: 5
                        }]
                    }]
                }]
            }],
            labelFormatter: function () {
                return this.label;
            }
        });
    }); })
    </script>

ここで説明しているマークアップおよびスクリプトの結果、次のようなウィジェットが作成されます。領域をクリックすると、その子ノードが表示され、右クリックすると親ノードに戻ります。

関連トピック

参照