0

私がやろうとしていること: Angular UI-Router を使用して単一ページのアプリを構築しています。私のページの 1 つに折れ線グラフがあるため、angular-chart.jsを使用しています。

わからないこと: UI-Router 状態内でグラフを表示する方法がわかりません。単一ページのアプリにグラフを含めなくても、グラフを機能させることができます。$scope ラベル、シリーズ、およびデータを含む UI-Router 状態にコントローラーを追加する必要があると感じていますが、適切に機能させることができませんでした。

Angular-Chart.js コード

var chartApp = angular.module('myApp', ['chart.js']);

chartApp.controller("LineCtrl", function ($scope) {
    'use strict';   
    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
    $scope.series = ['Motivation', 'Workload'];
    $scope.data = [
        [65, 59, 80, 81, 56, 55, 40],
        [28, 48, 40, 19, 86, 27, 90]
    ];
    $scope.onClick = function (points, evt) {
        console.log(points, evt);
    };
});

UIルーターコード

var myApp = angular.module('myApp', ['ui.router']);

myApp.config(function($stateProvider, $urlRouterProvider) {
    'use strict';

    // For any unmatched url, redirect home
    $urlRouterProvider.otherwise('/home');

    $stateProvider

    // chart page
    .state('charts', {
        url: '/charts',
        templateUrl: 'app/charts.html'
    });
});
4

2 に答える 2

0

私は Immanuel のコードをうまく動作させることができませんでしたが、彼はビューを使用する正しい方向に私を導いてくれました。このリンクから UI Router を使用して複数のビューを読みました: https://scotch.io/tutorials/angular-routing-using-ui-router。ほとんどすぐに、私はそれを機能させることができました。

ui-view と呼ばれる charts.html ページ:

<div class="row"> <div class="col-md-6 col-sm-12" id="line-chart" ui-view="line-chart"></div> <div class="col-md-6 col-sm-12" id="bar-chart" ui-view="bar-chart"></div> </div> <div class="row"> <div class="col-md-6 col-sm-12" id="doughnut-chart" ui-view="doughnut-chart"></div> <div class="col-md-6 col-sm-12" id="radar-chart" ui-view="radar-chart"></div> </div>

私の app.js コード:

var myApp = angular.module('myApp', ['ui.router', 'chart.js']);
myApp.config(function($stateProvider, $urlRouterProvider) {
    'use strict';

    // For any unmatched url, redirect home
    $urlRouterProvider.otherwise('/home');

    $stateProvider

    // charts page
    .state('charts', {
        url: '/charts',
        views: {
            '': { templateUrl: 'app/charts.html', },
            'line-chart@charts': {
                templateUrl: 'app/charts-line.html',
                controller: 'lineController'
            },
            "bar-chart@charts": {
                templateUrl: 'app/charts-bar.html',
                controller: 'barController'
            },
            "doughnut-chart@charts": {
                templateUrl: 'app/charts-doughnut.html',
                controller: 'doughnutController'
            },
            "radar-chart@charts": {
                templateUrl: 'app/charts-radar.html',
                controller: 'radarController'
            }
        }
    })
});

次に、それぞれのコントローラーを呼び出しました。折れ線グラフは次のとおりです。

// Define the charts controller called from the charts state
myApp.controller('lineController', function($scope) {
    'use strict';
    $scope.message = 'There should be a line chart here:';
    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
    $scope.series = ['Motivation', 'Workload'];
    $scope.data = [
        [65, 59, 80, 81, 56, 55, 40],
        [28, 48, 40, 19, 86, 27, 90]
    ];
});

それだけでした！

于 2015-08-03T21:51:10.680 に答える