Как создать диаграммы AngularJS с динамическими данными

Question

Привет, я пытаюсь создать веб-страницу, которая отображает настроения твитов политиков. Я пытаюсь создать диаграмму для статистики настроений. Я использую Zingchart, и я могу создать для статических данных, но я не могу создать для динамических данных.

Это код, который я использовал для вставки статических данных с данными диаграммы массива.

<div class="row"> 
    <div class="col-sm-12"> 
     <div ng-init="chartdata = [[1167],[456],[990]]"> 
     <zingchart id="chart-1" zc-values="chartdata" zc-json="myJson" 
     zc-width="100%" zc-height="568px"></zingchart> 
     </div> 
    </div> 
    </div> 

static pie chart

Он отлично работает, как это, но я хочу использовать данные из моих angularjs вместо статических значений. Например: Im пытается сделать что-то вроде этого, но он не работает

<div class="row"> 
     <div class="col-sm-12"> 
     <div ng-init="chartdata =[[{{politicianData.stats.total_positive}}],[{{politicianData.stats.total_negative}}],[{{politicianData.stats.total_neutral}}]]"> 
      <zingchart id="chart-1" zc-values="chartdata" zc-json="myJson" zc-width="100%" zc-height="568px"></zingchart> 
     </div> 
     </div> 
    </div> 

Как получить данные из данных Обещания массива из углового контроллера?

это мой политик-контроллер:

angular.module('myapp') 
    .controller('PoliticianController', function($scope, PoliticianData, Politician, searchService, utilService) { 
var politicianData = new Politician(PoliticianData); 

     politicianData.$promise.then(function (result) { 

      $scope.politicianData = result; 
    }); 
$scope.myJson = { 
          globals: { 
          shadow: false, 
          fontFamily: "Verdana", 
          fontWeight: "100" 
             }, 
             type: "pie", 
             backgroundColor: "#fff", 

             legend: { 
              layout: "x5", 
              position: "50%", 
              borderColor: "transparent", 
              marker: { 
               borderRadius: 10, 
               borderColor: "transparent" 
              } 
             }, 
             tooltip: { 
              text: "%v requests" 
             }, 
             plot: { 
              refAngle: "-90", 
              borderWidth: "0px", 
              valueBox: { 
               placement: "in", 
               text: "%npv %", 
               fontSize: "15px", 
               textAlpha: 1, 
              } 
             }, 
             series: [{ 
              text: "Positive", 
              backgroundColor: "#FA6E6E", 
             }, { 
              text: "Negative", 
              backgroundColor: "#D2D6DE" 
             }, { 
              text: "Neutral", 
              backgroundColor: "#28C2D1" 
             }] 
            }; 

    }); 

И это politician.html страница

<span>{{politician.first_name}} {{politician.last_name}}</span> 
        </td> 
        <td>{{politicianData.stats.total}}</td> 
        <td>{{politicianData.stats.twitter.total}}</td> 
        <td>{{politicianData.stats.rss.total}}</td> 
        <td>{{politicianData.stats.total_negative}}</td> 
        <td>{{politicianData.stats.total_positive}}</td> 
        <td>{{politicianData.stats.total_neutral}}</td> 

PoliticianData.stats.total_positive отображает количество правильно и я хочу использовать те же данные, что и входные значения для моей диаграммы. Как это сделать?

Answer 1

• Создание службы с завода
• Позвоните, что сервис для данных
• Используйте только zingchart директиву
• Когда данные сферы применения изменились, график будет открыт.

Пример:

var myModule = angular.module('myModule', []); 

myModule.controller('myController', function($scope, chartService) { 
    $scope.chartdata = chartService.getDataWithService(); 
}); 

myModule.factory('chartService', function($http) { 
    return { 
    getDataWithService: function() { 
     var url = "yourServiceURL"; 
     return $http.get(url); 
    }, 
    getData: function() { 
     return { 
     type: 'line', 
     series: [{ 
      values: [54, 23, 34, 23, 43] 
     }, { 
      values: [10, 15, 16, 20, 40] 
     }] 
     }; 
    } 
    }; 
}); 

HTML:

<zingchart id="chart-1" zc-values="chartdata" zc-json="myJson" zc-width="100%" zc-height="568px"></zingchart> 

Answer 2

Полное раскрытие, я являюсь членом команды ZingChart.

Эта точная функциональность, которую вы ищете, привязывает данные. У нас есть документация на нашей странице angularjs-charts для элементов привязки данных к диаграмме.

В вашем случае необходимо выполнить несколько шагов, чтобы достичь желаемого. Мое первое предложение состояло в том, чтобы вывести ненужную логику контроллера из вашего представления в ng-init и сохранить ее внутри директивы. Просто предложение, не нужно. Ради этого ответа в моем формате будет храниться большинство внутри контроллера.

HTML:

<body ng-app="myApp"> 
    <div ng-controller="MainController"> 
    <div zingchart id="chart-1" zc-json="myJson" zc-width="100%" zc-height="568px" zc-values="aValues"></div> 
    </div> 
</body> 

App Логика:

var app = angular.module('myApp',['zingchart-angularjs']); 

app.controller('MainController', function($scope, $timeout) { 

// mimick your promise 
(function(){ 
    $scope.data = {}; 
    $scope.data.valuesOne = [1,2,3,4,5]; 
    $scope.data.valuesTwo = [1,2,3,4,5]; 
    $scope.aValues = [$scope.data.valuesOne,$scope.data.valuesTwo]; 
})(); 

$scope.myJson = { 
    type : "bar", 
    title:{ 
    backgroundColor : "transparent", 
    fontColor :"black", 
    text : "Hello world" 
    }, 
    backgroundColor : "white", 
    series : [ 
    { 
     backgroundColor : '#00baf2' 
    }, 
    { 
     backgroundColor : '#4caf4f' 
    } 
    ] 
}; 

// automatically wraps code in $apply 
$timeout(function(){ 

    // wont reflect changes in aValues because its an object 
    $scope.data.valuesOne = [5]; 

    // must force the reflection of the changes 
    $scope.aValues = [$scope.data.valuesOne, $scope.data.valuesTwo]; 

    // will reflect changes with one line, not the above two lines 
    //$scope.aValues[0] = [5]; 

},1500); 

}); 

Вы можете видеть, что я поставил $ таймаут, чтобы отразить изменения графика после того, как 1,5 секунды. Этот $ timeout должен имитировать изменение какого-либо объекта из обновления БД. Есть два способа обновить значения, но чтобы понять, почему мы должны сначала узнать больше о директиве ZingChart Angular.

Вы должны использовать zc-values в HTML и не только потому, что zc-jsoncode имеет глубокие часы равенства на zc-values с помощью $watchCollection().

«Функция $ watchCollection() - это своего рода промежуточная точка между двумя конфигурациями $ watch() выше. Она более глубокая, чем функция ванили $ watch(), но она не так дорогая как функция $ watch() с глубоким равенством. Как функция $ watch(), функция $ watchCollection() работает путем сравнения ссылок на физические объекты, однако, в отличие от функции $ watch(), $ watchCollection() переходит на одноуровневый и выполняет дополнительную, мелкую контрольную проверку элементов верхнего уровня в коллекции ». - referenced here.

Вот почему это будет работать только в моем примере при изменении ссылок в массиве aValues.

Вы можете видеть, что внутри $ timeout есть два способа обновить значения диаграммы. Поскольку у вас есть массив массивов, вносящий изменения во внутренние массивы, они не будут отражены, потому что они являются глубокими свойствами объекта. Вы можете видеть, что обновление одного массива должно быть принудительно назначено обратно в родительское, чтобы отразить изменение. Изменение родителя напрямую обновит ссылку и будет отражать изменения в одной строке.

Codepen демо here.

Больше Угловая/ZingChart Ссылки

1. Angular Page
2. ZingChart Codepen