1

我需要显示一个 Ignite UI igDataChart 并需要在新窗口中打开它。当新数据来自服务时，我需要在所有打开的实例中更新图表。任何人都可以提出一种方法。这是我的代码。我正在使用 ngStorage 在 Angular 中保存数据，所以我只需要更新该对象。

我的 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>

控制器是

   (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);
4

1 回答 1

3

igDataChart AngularJS 指令没有自动单向数据出价。您应该使用igDataChart.notifyInsertItem、igDataChart.notifyRemoveItem和igDataChart.dataSource API 来手动更新每个实例。要了解如何使用 API，请查看Binding Real-Time Data示例。

于 2016-07-28T13:51:22.623 回答