검도 UI 차트가 각도를 사용하여 업데이트되지 않습니다

Question

저는 Kendo DataViz와 Angular 지시어를 사용하여 원형 차트에서 k-data-source를 사용하고 있습니다. $ scope에서 datasource 객체를 변경하면 업데이트되지 않고 오류가 발생합니다. 각도 지시문을이 방법으로 사용하려고 했습니까? 여기

는 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

그것을 위해 작동합니다. 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); 

demo here