剑道UI图将不会更新采用了棱角分明 [英] Kendo UI Chart won't update using Angular
本文介绍了剑道UI图将不会更新采用了棱角分明的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用的使用剑道DataViz公司和角指令的饼图上的K-数据源。当我改变在$范围的数据源对象时，它不会更新，并抛出错误。旨在角度指令来这样使用？
下面是一个JSBin显示问题： http://jsbin.com/OSudIzEH/9/edit
角code
VAR应用= angular.module（'排行榜例如'，['kendo.directives']）;功能ChartController（$范围）{
$ scope.pie = {
标题：{
位置：底，
文字：分享互联网人口增长，2007 - 2012
}，
传说：{
可见：假的
}，
chartArea：{
背景：
}，
seriesDefaults：{
标签： {
可见：真实，
背景：透明的，
模板：＃=类别＃：＃=值＃％
}
}，
系列：[{
类型：馅饼，
现场：值
categoryField：类别
}]，
提示：{
可见：真实，
格式为：{0}％
}
}; $ scope.updatePie =功能（）{
$ scope.countries = {
数据：[
{
类别：Asia2
值：53.8，
颜色：＃9de219
}，{
类别：欧洲2
值：16.1，
颜色：＃90cc38
}，{
类别：拉丁America2
值：11.3，
颜色：＃068c35
}，{
类别：Africa2
值：9.6，
颜色：＃006634
}，{
类别：中间East2
值：5.2，
颜色：＃004d38
}，{
类别：北America2
值：3.6，
颜色：＃033939
}
]
};
}; $ scope.countries = {
数据：[
{
类别：亚洲，
值：53.8，
颜色：＃9de219
}，{
类别：欧洲，
值：16.1，
颜色：＃90cc38
}，{
类别：拉丁美洲
值：11.3，
颜色：＃068c35
}，{
类别：非洲，
值：9.6，
颜色：＃006634
}，{
类别：中东，
值：5.2，
颜色：＃004d38
}，{
类别：北美
值：3.6，
颜色：＃033939
}
]
};
}
HTML
＆LT; DIV NG控制器=ChartController＆GT;
＆LT;按钮NG点击=updatePie（）＆GT;更新＆LT; /按钮＆GT;
＆LT; DIV剑道-K线图选项=馅饼K-数据源=国家/＆GT; ＆LT; / DIV＆GT;
解决方案
您需要创建一个数据源剑道，然后更新数据对象为它工作。 JSBin已经更新工作code。
VAR应用= angular.module（'排行榜例如'，['kendo.directives']）;功能ChartController（$范围）{
$ scope.pie = {
标题：{
位置：底，
文字：分享互联网人口增长，2007 - 2012
}，
传说：{
可见：假的
}，
chartArea：{
背景：
}，
seriesDefaults：{
标签： {
可见：真实，
背景：透明的，
模板：＃=类别＃：＃=值＃％
}
}，
系列：[{
类型：馅饼，
现场：值
categoryField：类别
}]，
提示：{
可见：真实，
格式为：{0}％
}
}; $ scope.updatePie =功能（）{
$ scope.countries.data（[
{
类别：Asia2
值：53.8，
颜色：＃9de219
}，{
类别：欧洲2
值：16.1，
颜色：＃90cc38
}，{
类别：拉丁America2
值：11.3，
颜色：＃068c35
}，{
类别：Africa2
值：9.6，
颜色：＃006634
}，{
类别：中间East2
值：5.2，
颜色：＃004d38
}，{
类别：北America2
值：3.6，
颜色：＃033939
}
]
）;
}; $ scope.countries =新kendo.data.DataSource（{
数据：[
{
类别：亚洲，
值：53.8，
颜色：＃9de219
}，{
类别：欧洲，
值：16.1，
颜色：＃90cc38
}，{
类别：拉丁美洲
值：11.3，
颜色：＃068c35
}，{
类别：非洲，
值：9.6，
颜色：＃006634
}，{
类别：中东，
值：5.2，
颜色：＃004d38
}，{
类别：北美
值：3.6，
颜色：＃033939
}
]
}）;
}
I am using k-data-source on a pie chart using Kendo DataViz and the Angular directives. When I change the datasource object on the $scope, it doesn't update and throws errors. Were the angular directives intended to be used this way?
Here's a JSBin showing the problem: http://jsbin.com/OSudIzEH/9/edit
Angular Code
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>
解决方案
You need to create a kendo datasource and then update the data object for it to work. JSBin has been updated with working code.
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"
}
]
});
}
这篇关于剑道UI图将不会更新采用了棱角分明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
