通过 AngularJS 中的模型绑定更改 Kendo 图表类型
Posted
技术标签:
【中文标题】通过 AngularJS 中的模型绑定更改 Kendo 图表类型【英文标题】：Changing Kendo chart type by model binding in AngularJS 【发布时间】：2016-05-18 06:04:05 【问题描述】：编辑：我在这里复制了这个问题..http://dojo.telerik.com/@Salmal/OcALi
我是 Kendo UI 的新手，我在我的 Angular 应用程序中使用了 kendo 指令。我需要使用事件更改图表的类型。举个例子，当用户单击一个按钮时，我想将图表从条形图更改为饼图。请参考我下面的代码。
Controller.js
$scope.chartData = [
"name": "Books",
"amount": 200
,
"name": "Newspapers",
"amount": 320
,
"name": "Magazines",
"amount": 225
,
"name": "Shoes",
"amount": 400
];
$scope.update = function ()
$scope.ChartType = type: 'pie' ;
;
$scope.ChartType = type: 'bar' ;
查看.html
<div class="demo-section k-content wide">
<div>
<h4>Hover some series</h4>
<div kendo-chart
k-legend=" position: 'bottom' "
k-series-defaults="ChartType"
k-series="[ field: 'amount', categoryField: 'name']"
k-data-source="chartData"
k-rebind="chartData">
</div>
</div>
</div>
<button kendo-button ng-click="update()">
Update from code
</button>
在上述代码中，update() 函数成功执行，同时将“饼图”图表类型分配给$scope.ChartType 变量。但这并没有反映在视图中。这意味着 Angular 模型绑定不起作用。我在这里遗漏了一些基本的东西？任何帮助将不胜感激..
【问题讨论】：
【参考方案1】：我很确定 $scope.ChartType 没有被监视。您将需要为您的图表执行某种重绘功能（我认为，我不熟悉 kendo ui）或找到更新图表的方法。基本上，它应该是这样的：
$scope.$watch("ChartType", function(newValue, oldValue)
if(newValue !== oldValue)
//redraw the chart
, true);
编辑 我在编辑器中使用您的代码修复了它。这里是：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<style>
html
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
</style>
</head>
<body>
<div ng-app="app" ng-controller="MyCtrl">
<div class="demo-section k-content wide">
<div>
<h4>Hover some series</h4>
<div kendo-chart
k-legend=" position: 'bottom' "
k-series-defaults="options.chartType"
k-series="[ field: 'amount', categoryField: 'name']"
k-data-source="options.dataSource"
k-rebind="options">
</div>
</div>
</div>
<button kendo-button ng-click="update()">
Update from code
</button>
<br/>
<br/>
ChartType
</div>
<script>
angular.module("app", ["kendo.directives"]).controller("MyCtrl", function($scope)
$scope.chartData = [
"name": "Books",
"amount": 200
,
"name": "Newspapers",
"amount": 320
,
"name": "Magazines",
"amount": 225
,
"name": "Shoes",
"amount": 400
];
$scope.update = function ()
console.log("doing update");
$scope.ChartType = type: 'bar' ;
;
$scope.ChartType = type: 'pie' ;
$scope.options =
chartType: $scope.ChartType,
dataSource: $scope.chartData
;
$scope.$watch("ChartType", function(newValue)
$scope.options.chartType = newValue;
);
);
</script>
</body>
</html>
如果你把它粘贴到那个 dojo 编辑器中，它就可以工作。你确实需要看，我只是不知道如何处理剑道指令。我找到了剑道指令更改here 的答案。很抱歉原始答案中的解释有误。
解释一下：我做了一个新的变量选项。我将选项放在 k-rebind 上，因为该指令似乎正在观察 k-rebind 的变化。但我希望 kendo 指令监视数据更改和类型更改。然后你需要观察chartType，当它发生变化时，将更改应用于绑定到k-rebind的变量的属性。
【讨论】：
感谢您的回复。但我认为我不需要使用“手表”来使用绑定。当您从 view 更改范围变量时，它也应该在 ctrl 中更新它。但这里的问题是，当呈现剑道时，chartType 变量失去了与原始 chartType 变量的连接。这里提到了。 docs.telerik.com/kendo-ui/AngularJS/… 你是对的。我完全解释错了。但我修复了它 感谢您的简洁解释。 k-bind 成功了 :) 可惜他们没有完整的文档。以上是关于通过 AngularJS 中的模型绑定更改 Kendo 图表类型的主要内容，如果未能解决你的问题，请参考以下文章
angularjs 的模型无法绑定到隐藏域(input hidden)