Angularjs 当数据源改变时，Devextreme 组件不刷新

Question

我正在使用 Angularjs 框架开发离子应用程序。我面临一个问题，当我的下拉值更改时，我的 devextreme (dx-chart) 组件没有刷新。当我控制该值时，我发现我的参数已成功传递给该函数。但是，我的 devextreme (dx-charts) 组件没有根据新数据源进行更新。有什么解决办法吗？

以下是我的源代码。

控制器代码

.controller('DashCtrl', function($scope,  $http, $filter) {
        var defaultYear = 2017;
        var defaultMonth = 11;
        getPieChatsData(defaultYear, defaultMonth);

        $scope.showSelectYear = function(mySelectYear) {
            getPieChatsData(mySelectYear, defaultMonth);
        }

        $scope.showSelectMonth = function(mySelectMonth){
            getPieChatsData(defaultYear, mySelectMonth);
        }

        function getPieChatsData(defaultYear, defaultMonth)
        {
            $http.get('lib/stcust.json').then(function(response) {
                    var sales_targeted_year = ($filter('filter')(response.data, {caL_YEAR: defaultYear }));
                    var sales_targeted = ($filter('filter')(sales_targeted_year, {caL_MONTH: defaultMonth }));
                    var data_Source = new DevExpress.data.DataSource({
                        load: function () {
                            return VitalSignsDataService.ShowDataTable();
                        }
                    });
                    console.log(sales_targeted);

                    $scope.chartOptions = {
                        palette: "bright",
                        dataSource: sales_targeted,
                        title: "Targeted Sales",
                        legend: {
                            orientation: "horizontal",
                            itemTextPosition: "right",
                            horizontalAlignment: "center",
                            verticalAlignment: "bottom",
                            columnCount: 4
                        },
                        series: [{
                            argumentField: "cusT_CD",
                            valueField: "saleS_TARGET",
                            label: {
                                visible: true,
                                connector: {
                                    visible: true,
                                    width: 0.5
                                }
                            }
                        }]
                    };
            });
        }
})

HTML代码

<ion-view view-title="Pie Chats">
  <ion-content>
        <label class = "item item-input item-select">
            <div class = "input-label">
              Select Year
            </div>
            <select ng-model="mySelectYear" ng-change="showSelectYear(mySelectYear)">
                 <option>2016</option>
                 <option>2017</option>
                 <option>2018</option>
            </select>
        </label>
        <label class = "item item-input item-select">
            <div class = "input-label">
              Select Month
            </div>
            <select ng-model="mySelectMonth" ng-change="showSelectMonth(mySelectMonth)">
                 <option>1</option>
                 <option>2</option>
                 <option>3</option>
                 <option>4</option>
                 <option>5</option>
                 <option>6</option>
                 <option>7</option>
                 <option>8</option>
                 <option>9</option>
                 <option>10</option>
                 <option>11</option>
                 <option>12</option>
            </select>
        </label>
        <ion-item>     
            <div id="pie" dx-pie-chart="chartOptions"></div>
        </ion-item>
  </ion-content>
</ion-view>

Answer 1

您正在调用一个 JS 函数，它可能不会更新您的 angularjs 作用域

尝试在$scope.chartOptions = { .. };之后添加这行代码

$scope.$apply();

Answer 2

将 sales_targeted 变量移动到 angularjs 范围并使用 bindingOptions 将其绑定到图表的数据源。请参阅下面的代码片段。

 
$scope.sales_targeted = [];

$scope.chartOptions = {
    palette: "bright",
    bindingOptions: {
        "dataSource": "sales_targeted"
    },
    title: "Targeted Sales",
    legend: {
        orientation: "horizontal",
        itemTextPosition: "right",
        horizontalAlignment: "center",
        verticalAlignment: "bottom",
        columnCount: 4
    },
    series: [{
        argumentField: "cusT_CD",
        valueField: "saleS_TARGET",
        label: {
            visible: true,
            connector: {
                visible: true,
                width: 0.5
            }
        }
    }]
};

function getPieChatsData(defaultYear, defaultMonth) {
    $http.get('lib/stcust.json').then(function(response) {
        var sales_targeted_year = ($filter('filter')(response.data, { caL_YEAR: defaultYear }));
        $scope.sales_targeted = ($filter('filter')(sales_targeted_year, { caL_MONTH: defaultMonth }));
    });
}

Angularjs 当数据源改变时，Devextreme 组件不刷新

Angularjs Devextreme component is not refreshing when dataSource is changed

html

javascript

angularjs

devextreme

ionic-framework