Question

编辑：我在这里重现了这个问题.. http://dojo.telerik.com/@Salmal/OcALi

我是Kendo UI的新手，我在我的角应用程序中使用了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' };

View.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模型绑定不起作用。我在这里缺少一些基本的东西？任何帮助将不胜感激..

Answer 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编辑器中，则可以正常工作。你需要观看，我只是不知道如何处理kendo指令。我发现kendo指令的答案改为here。对不起原答案中的错误解释。

解释一下：我做了一个新的变量选项。我把选项放在k-rebind上，因为该指令似乎正在观察k-rebind的变化。但我希望kendo指令能够监视数据更改和类型更改。然后，您需要观察chartType，当它更改时，将更改应用于绑定到k-rebind的变量的属性。

通过AngularJS中的模型绑定更改Kendo图表类型

1 个答案: