Компонент Angularjs Devextreme не обновляется при изменении источника данных - PullRequest
Новая
       13

Компонент Angularjs Devextreme не обновляется при изменении источника данных

0 голосов
/ 04 июля 2018

Я разрабатываю ионное приложение с использованием фреймворка 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>

Ответы [ 2 ]

0 голосов
/ 06 июля 2018

Переместите переменную 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 }));
    });
}
0 голосов
/ 04 июля 2018

Вы вызываете функцию JS, и она, вероятно, не обновляет вашу область видимости angularjs

Попробуйте добавить эту строку кода после $scope.chartOptions = { .. }; 

$scope.$apply();
...