Kendo UI，将饼图绑定到分层远程数据

Question

我有来自排序网格的下拉列表。我想管理与饼图相同的网格，但我无法将远程数据绑定到饼图。饼图必须显示类别（同样的作用，像下拉列表），但我不能绑定到分层远程数据。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="project">
    <div id="grid"></div>
    <div id="chart"></div>
    <script type="text/x-kendo-template" id="template">
        <div class="toolbar">
            <label class="category-label" for="category">Show products by category:</label>
            <input type="search" id="category" style="width: 150px"/>
         </div>
    </script>
    <script>
        $(document).ready(function() {
            //Grid displays all products or products from one category, which set from dropdown list
            var grid = $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
                    },
                    pageSize: 20,
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true
                },
                toolbar: kendo.template($("#template").html()),
                height: 550,
                sortable: true,
                pageable: true,

                dataBound:function(){
                    var grid = this;
                    $.each(grid.tbody.find('tr'),function(){
                        var model = grid.dataItem(this);
                        if(model.Discontinued==true){
                            $('[data-uid='+model.uid+']').addClass('k-state-selected');
                        }                          
                    });
                },

                columns: [
                   // { field: "ProductID", title: "Product ID", width: 100 },
                    { field: "ProductName", title: "Product Name", template: '#=kendo.format(ProductName.toUpperCase())#' },
                    { field: "UnitPrice", title: "Price", width: 150, template: 'EUR #: kendo.format("{0:c}", UnitPrice)#' },
                    { field: "UnitsInStock", title: "In Stock", width: 150 },
                    { field: "Discontinued", title: "Discontinued", width:50 },
                    { field: "QuantityPerUnit", title: "Quantity" }
                ]
            });
            //DropDown list for sorting by the category
            var dropDown = grid.find("#category").kendoDropDownList({
                dataTextField: "CategoryName",
                dataValueField: "CategoryID",
                autoBind: false,
                optionLabel: "All",
                dataSource: {
                    type: "odata",
                    severFiltering: true,
                    transport: {
                        read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
                    }
                },
                change: function() {
                    var value = this.value();
                    if (value) {
                        grid.data("kendoGrid").dataSource.filter({ field: "CategoryID", operator: "eq", value: parseInt(value) });
                    } else {
                        grid.data("kendoGrid").dataSource.filter({});
                    }
                }
            });

            var data = [
                {
                  "source": "Hydro",
                  "percentage": 20,
                },
                {
                  "source": "Hydro",
                  "percentage": 20
                },
                {
                  "source": "Solar",
                  "percentage": 10
                },
                {
                  "source": "Nuclear",
                  "percentage": 30            
                }
            ];

            var dataSource = new kendo.data.DataSource({
               data: data,
                group: {field: "source", aggregates: [{
                 field: "percentage", aggregate: "sum"
               }]}
            });
            dataSource.read();

            function getChartData() {
                var chartData = [];
                var view = dataSource.view();
                for(var idx = 0; idx < view.length; idx++) {
                    chartData.push({
                    source: view[idx].value,
                    percentage: view[idx].aggregates.percentage.sum
                    });
                }
                return chartData;
              } 
            //From This piechart I want to sorting grid
            var chart = $("#chart").kendoChart({
                title: {
                  text: "Categories and Products"
                },
                legend: {
                  position: "bottom"
                },

                dataSource: {
                    transport: {
                        read: function(e) {
                          e.success(getChartData());
                        }
                    }
                },
                series: [{
                    type: "pie",
                    field: "percentage",
                    categoryField: "source",
                    explodeField: "explode",
                    aggregate: "count",
                    labels: {
                        visible: true,
                        background: "transparent",
                        template: "#= category #: \n #= value#%"
                    }
                }],

                seriesClick: function(e){
                    $.each(e.sender.dataSource.view(), function() {
                        // Clean up exploded state
                        this.explode = false;
                    });

                    // Disable animations
                    e.sender.options.transitions = false;

                    // Explode the current slice
                    e.dataItem.explode = true;
                    e.sender.refresh();
                }
            });
        });
    </script>
    <style>
        #grid .k-grid-toolbar
        {
            padding: .6em 1.3em;
        }
        .category-label
        {
            vertical-align: middle;
            padding-right: .5em;
        }
        #category
        {
            vertical-align: middle;
        }
        .toolbar {
            float: center;
        }
    </style>
</div>

Answer 1

可以绑定一个kendo饼图和远程数据，我以前做过很多次了。查看以下 link 示例，了解如何实现此目的。

Kendo pie chart - remote binding

Kendo UI，将饼图绑定到分层远程数据

Kendo UI, Bound a Piechart to hierarchical remote data

html

javascript

kendo-ui

pie-chart