データ連結

wijtreemap ウィジェットは JSON データ連結をサポートしており、OData サービスを使用してリモートデータをロードします。たとえば、次のサンプルは、Northwind データベデータ連結ース内のさまざまな製品およびカテゴリとのデータ連結を示します。

ライブウィジェット
スクリプト

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijtreemap", "wijmo.wijtooltip"], function () { $.support.cors = true; var dataCount = 0, treemapData = []; $(document).ready(function () { //set url of the data source $.ajax({ url: "http://services.odata.org/Northwind/Northwind.svc/Categories?$format=json&$expand=Products", crossOrigin: true, success: function (result) { $.each(result.value, function (idx, r) { var data = { name: r.CategoryName, count: 0, items: [] }; $.each(r.Products, function (i, p) { var count = p.UnitsInStock, d = { name: p.ProductName, count: count }; data.items[i] = d; data.count += count; }); treemapData.push(data); }); createTreemap(); } }); }); function createTreemap() { $("#treemap").wijtreemap({ //set tooltip option to true showTooltip: true, //set value to bind value valueBinding: "count", //set value to bind label labelBinding: "name", //set data source data: treemapData }); } }); </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
     require(["wijmo.wijtreemap", "wijmo.wijtooltip"], function () {
        $.support.cors = true;
        var dataCount = 0,
          treemapData = [];
        $(document).ready(function () {
     //set url of the data source
              $.ajax({
                 url: "http://services.odata.org/Northwind/Northwind.svc/Categories?$format=json&$expand=Products",
                 crossOrigin: true,
                 success: function (result) {
                   $.each(result.value, function (idx, r) {
                       var data = {
                           name: r.CategoryName,
                           count: 0,
                           items: []
                        };
                   $.each(r.Products, function (i, p) {
                       var count = p.UnitsInStock,
                           d = {
                             name: p.ProductName,
                             count: count
                               };
                             data.items[i] = d;
                             data.count += count;
                          });
                     treemapData.push(data);
                        });
                     createTreemap();
                    }
                });
            });
             function createTreemap() {
                 $("#treemap").wijtreemap({
    //set tooltip option to true
                     showTooltip: true,
    //set value to bind value
                     valueBinding: "count",
    //set value to bind label
                     labelBinding: "name",
    //set data source
                data: treemapData
                });
            }
        });
</script>

関連トピック

参照