2016-07-19 2 views
1

Я пытаюсь создать диаграмму с chart.js, и я хотел бы получить данные для диаграммы из бэкэнд, но сначала мне нужно вызвать функцию, которая существует в моем контроллере. Я пытаюсь вызвать эту функцию из index.html.Как писать с хорошей практикой?

ИНДЕКС:

var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
     labels: $scope.getChartLabels(), 
     datasets: [{ 
      label: '# of Votes', 
      data: $scope.getChartData(), 
      backgroundColor: [ 
       'rgba(54, 162, 235, 0.2)', 
       'rgba(255, 206, 86, 0.2)', 
       'rgba(75, 192, 192, 0.2)', 
       'rgba(153, 102, 255, 0.2)', 
       'rgba(255, 159, 64, 0.2)' 
      ], 
      borderColor: [ 
       'rgba(54, 162, 235, 1)', 
       'rgba(255, 206, 86, 1)', 
       'rgba(75, 192, 192, 1)', 
       'rgba(153, 102, 255, 1)', 
       'rgba(255, 159, 64, 1)' 
      ], 
      borderWidth: 1 
     }] 
    }, 
    options: { 
     responsive: true, 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero:true 
       } 
      }] 
     } 
    } 
}); 

CONTROLLER:

(...) 

.controller('DashboardController', function ($scope) { 
    $scope.getChartLabels = function() { 
     return ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]; 
    } 

    $scope.getChartData = function() { 
     return [12, 19, 3, 5, 2, 3]; 
    } 
} 

(...) 

Как назвать угловые функции getChartLabels() или getChartData() из index.html без плохих практик?

+0

Является ли ваш код правильно? Тогда сайт [codereview.se] будет лучше для вашего вопроса. –

+0

Да, все работает хорошо. – sgracki

ответ

2

В идеале вы должны сделать иначе и назвать JavaScript методы рисовать диаграммы с помощью angularJs

.controller('DashboardController', function ($scope) { 
    $scope.getChartLabels = function() { 
     return ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]; 
    } 

    $scope.getChartData = function() { 
     return [12, 19, 3, 5, 2, 3]; 
    } 

    drawCharts($scope.getChartLabels,$scope.getChartData); 
} 

    function drawCharts(d1,d2){ 
     // draw charts here. 
    } 
+0

Согласовано, должно быть задание углов для создания и поддержания гаек и болтов (и графиков) вашего пользовательского интерфейса, а не наоборот , –

+0

Работал очень хорошо, спасибо большое! – sgracki