1

我使用 Kendo DataViz 和 Angular 指令在饼图上使用 k-data-source。当我更改 $scope 上的数据源对象时，它不会更新并引发错误。是否打算以这种方式使用角度指令？

这是一个显示问题的 JSBin：http: //jsbin.com/OSudIzEH/9/edit

角码

var app = angular.module('chart-example', ['kendo.directives']);

function ChartController($scope) {
  $scope.pie = {
    title: {
        position: "bottom",
        text: "Share of Internet Population Growth, 2007 - 2012"
    },
    legend: {
        visible: false
    },
    chartArea: {
        background: ""
    },
    seriesDefaults: {
        labels: {
            visible: true,
            background: "transparent",
            template: "#= category #: #= value#%"
        }
    },
    series: [{
        type: "pie",
        field: "value",
        categoryField: "category"
    }],
    tooltip: {
        visible: true,
        format: "{0}%"
    }
  };

  $scope.updatePie = function() {
    $scope.countries = {
    data: [
        {
            category: "Asia2",
            value: 53.8,
            color: "#9de219"
        }, {
            category: "Europe2",
            value: 16.1,
            color: "#90cc38"
        }, {
            category: "Latin America2",
            value: 11.3,
            color: "#068c35"
        }, {
            category: "Africa2",
            value: 9.6,
            color: "#006634"
        }, {
            category: "Middle East2",
            value: 5.2,
            color: "#004d38"
        }, {
            category: "North America2",
            value: 3.6,
            color: "#033939"
        }
    ]
  };
  };

  $scope.countries = {
    data: [
        {
            category: "Asia",
            value: 53.8,
            color: "#9de219"
        }, {
            category: "Europe",
            value: 16.1,
            color: "#90cc38"
        }, {
            category: "Latin America",
            value: 11.3,
            color: "#068c35"
        }, {
            category: "Africa",
            value: 9.6,
            color: "#006634"
        }, {
            category: "Middle East",
            value: 5.2,
            color: "#004d38"
        }, {
            category: "North America",
            value: 3.6,
            color: "#033939"
        }
    ]
  };
}

HTML

<div ng-controller="ChartController">    
    <button ng-click="updatePie()">update</button>
    <div kendo-chart k-options="pie" k-data-source="countries" />

  </div>
4

2 回答 2

2

您需要创建一个 kendo 数据源，然后更新数据对象以使其工作。JSBin 已更新为工作代码。

var app = angular.module('chart-example', ['kendo.directives']);

function ChartController($scope) {
  $scope.pie = {
    title: {
        position: "bottom",
        text: "Share of Internet Population Growth, 2007 - 2012"
    },
    legend: {
        visible: false
    },
    chartArea: {
        background: ""
    },
    seriesDefaults: {
        labels: {
            visible: true,
            background: "transparent",
            template: "#= category #: #= value#%"
        }
    },
    series: [{
        type: "pie",
        field: "value",
        categoryField: "category"
    }],
    tooltip: {
        visible: true,
        format: "{0}%"
    }
  };

  $scope.updatePie = function() {
    $scope.countries.data([
        {
            category: "Asia2",
            value: 53.8,
            color: "#9de219"
        }, {
            category: "Europe2",
            value: 16.1,
            color: "#90cc38"
        }, {
            category: "Latin America2",
            value: 11.3,
            color: "#068c35"
        }, {
            category: "Africa2",
            value: 9.6,
            color: "#006634"
        }, {
            category: "Middle East2",
            value: 5.2,
            color: "#004d38"
        }, {
            category: "North America2",
            value: 3.6,
            color: "#033939"
        }
    ]
  );
  };

  $scope.countries = new kendo.data.DataSource({
    data: [
        {
            category: "Asia",
            value: 53.8,
            color: "#9de219"
        }, {
            category: "Europe",
            value: 16.1,
            color: "#90cc38"
        }, {
            category: "Latin America",
            value: 11.3,
            color: "#068c35"
        }, {
            category: "Africa",
            value: 9.6,
            color: "#006634"
        }, {
            category: "Middle East",
            value: 5.2,
            color: "#004d38"
        }, {
            category: "North America",
            value: 3.6,
            color: "#033939"
        }
    ]
  });
}
于 2014-01-07T22:23:34.503 回答
1

对我来说，这看起来像是 angular-kendo 中的一个错误。一个问题是参数toDataSource的顺序错误。但是，即使修复了该问题，小部件也不会使用新的数据源进行更新。我对 kendo-angular 脚本进行了一些更改以使其工作（但是我不知道这是否适合其其他功能）：

// Keep the element's data up-to-date with changes.
// this will have to be $watchCollection in >= 1.1.4
scope.$watch(attrs.kDataSource, function (mew, old) {
    if (mew !== old) {
        element.data('$kendoDataSource',
            toDataSource(mew, type));

        var role = element.data("role");
        var widgetType = role.charAt(0).toUpperCase() + role.slice(1);
        var w = element.data("kendo" + widgetType);

        if (!w) {
            w = kendo.widgetInstance(element, kendo.ui);
        }

        if (w && typeof w.setDataSource === "function") {
            w.setDataSource(element.data('$kendoDataSource'));
        }
    }
}, true);

演示在这里

于 2014-01-07T22:38:24.197 回答