剑道UI图表不会使用角度更新

Question

我使用Kendo DataViz和Angular指令在饼图上使用k-数据源。当我更改$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>

Answer 1

您需要创建一个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"
}
]
});
}

Answer 2

对我来说，这看起来像是角度剑道中的一个错误。一个问题是toDataSource的参数顺序错误。然而，即使修复了这个问题，小部件也不会使用新的数据源进行更新。为了完成这项工作，我对剑道角脚本做了一些修改(但我不知道这是否符合它的其他功能)：

// 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);

演示