1
我需要顯示Ignite UI igDataChart並需要在新窗口中打開它。當新數據來自服務時，我需要在所有打開的實例中更新圖表。任何人都可以提出一種方法這是我的代碼。我使用ngStorage在Angular中保存數據，所以我只需要更新該對象。如何使用AngularJS動態更新Ignite UI igDataChart
我的index.html是
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<!--CSS file specific for chart styling -->
<link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<!-- Ignite UI Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.dv.js"></script>
<script src="Scripts/app.js"></script>
<script src="Scripts/Controllers/maincontroller.js"></script>
<div ng-controller="maincontroller">
<div>
<div ng-click="openInNewWindow()"><img height="25" width="25" style="position:relative;margin:0 auto;clear:left;height:auto;z-index: 0; text-align:center" ; src="Icons/new_window_icon.png" />Open in New </div>
<table>
<tr>
<td id="columnChart"></td>
<td id="columnLegend" style="float: left"></td>
</tr>
</table>
</div>
<div style="width: 80%; min-width: 210px;">
<div id="chart"></div>
</div>
<div class="USCensus-attribution">
Population data from:<br />
<a href="http://www.census.gov/" target="_blank">U.S. Census Bureau</a>
</div>
</div>
和TH e控制器是
(function (app) {
app.controller("maincontroller", function ($scope, $localStorage, $interval) {
$localStorage.data = [
{ "CountryName": "China", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394 },
{ "CountryName": "India", "Pop1995": 920, "Pop2005": 1090, "Pop2015": 1251, "Pop2025": 1396 },
{ "CountryName": "United States", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351 },
{ "CountryName": "Indonesia", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277 },
{ "CountryName": "Brazil", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218 }
];
$("#chart").igDataChart({
width: "100%",
height: "400px",
title: "Population per Country",
subtitle: "Five largest projected populations for 2015",
dataSource: $localStorage.data,
axes: [
{
name: "NameAxis",
type: "categoryX",
title: "Country",
label: "CountryName"
},
{
name: "PopulationAxis",
type: "numericY",
minimumValue: 0,
title: "Millions of People",
}
],
series: [
{
name: "2015Population",
type: "column",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
xAxis: "NameAxis",
yAxis: "PopulationAxis",
valueMemberPath: "Pop2015"
}
]
});
$scope.data = [
{ "Subject": "Physics", "July": 100 },
{ "Subject": "Maths", "July": 88 },
{ "Subject": "English", "July": 96 },
{ "Subject": "History", "July": 110 },
{ "Subject": "Geography", "July": 92 }
];
$scope.dataChart = $scope.data;
$scope.$storage = $localStorage.$default({
name: 'jack'
});
$scope.openInNewWindow = function() {
$window.open('/newwindow.html', "_blank",
"toolbar=yes,scrollbars=yes, resizable=yes, top=100, left=500, width=800, height=800");
}
$interval(function() {
$localStorage.data = [
{ "CountryName": "China", "Pop1995": 500, "Pop2005": 100, "Pop2015": 2300, "Pop2025": 130 },
{ "CountryName": "India", "Pop1995": 1920, "Pop2005": 109, "Pop2015": 125, "Pop2025": 135 },
{ "CountryName": "United States", "Pop1995": 1266, "Pop2005": 1295, "Pop2015": 1322, "Pop2025": 1351 },
{ "CountryName": "Indonesia", "Pop1995": 1197, "Pop2005": 1229, "Pop2015": 1256, "Pop2025": 1277 },
{ "CountryName": "Brazil", "Pop1995": 1161, "Pop2005": 1186, "Pop2015": 1204, "Pop2025": 1218 }
];
}, 10000);
});
})(app);