gpt4 book ai didi

javascript - 当数据源更改时,Angularjs Devextreme 组件不刷新

转载 作者:行者123 更新时间:2023-12-03 01:33:48 25 4
gpt4 key购买 nike

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

以下是我的源代码。

Controller 代码

.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>

最佳答案

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

 
$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 }));
});
}

关于javascript - 当数据源更改时,Angularjs Devextreme 组件不刷新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51170442/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com