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

Question

编辑：我在这里重现了这个问题.. 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' };

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() 函数成功执行，同时将 "pie" 图表类型分配给 $scope.ChartType 变量。但这并没有反映在 view 中。这意味着 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 指令监视数据更改和类型更改。然后您需要观察图表类型，当它发生变化时，将更改应用到绑定到 k-rebind 的变量的属性。

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

Changing Kendo chart type by model binding in AngularJS

kendo-ui

angularjs

kendo-grid

angularjs-directive

kendo-chart