Как отобразить getdata из mongodb с помощью amcharts - PullRequest
Новая
       15

Как отобразить getdata из mongodb с помощью amcharts

0 голосов
/ 21 декабря 2018

Я новичок в средних стеках и пытаюсь отобразить свои значения из mongodb с помощью amchartsJS, я использовал api.js для получения моих данных, затем контроллеры для передачи переменной в мой html.Моя таблица работает правильно и отображает значения из mongodb, но как я могу реализовать это в chartsJS?

Так что я попробовал это в моем html 

<script>

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "pie",
  "theme": "none",
  "dataProvider": [ {
  "donor": "{{person.donors_name}}",
  "count": 501.9
  } ],
  "valueField": "count",
  "titleField": "donor",
   "balloon":{
   "fixedPosition":true
  },
  "export": {
    "enabled": true
  }
} );
</script>

Норезультаты дают мне {{person.donors_name}}

enter image description here

Вот мой код для получения значений:

api.js 

router.get('/blooddonationmanagement', function(req, res) {

    Blooddonation.find({},function(err, blooddonations) {
        res.json({ success: true, blooddonations: blooddonations });
    });   
});

blooddonationCtrl.js 

angular.module('blooddonationControllers', [])
.controller('blooddonationCtrl', function(Blooddonation,$scope) {
    var app = this;
    function getBlooddonations() {

        Blooddonation.getUsers().then(function(data) {    
            app.blooddonations = data.data.blooddonations;  
    });
}

table.html 

<tr ng-repeat="person in blooddonationmanagement.blooddonations">
    <td>{{ person.donation_no }}</td>
    <td>{{ person.donors_name }}</td>    
</tr>

Я уже пробовал этоиспользуя php и работает с использованием mysqldb, но я не знаю, как это сделать в mean-stack: 

"dataProvider": 
  [
  <?php while($row = mysqli_fetch_array($result)): ?>

    {
      "TRENDX": "<?php echo $row['trendx'] ?>",
      "Values": <?php echo $row['counter']; ?>
    },

  <?php endwhile; ?>
  ]

Ответы [ 2 ]

0 голосов
/ 21 декабря 2018

Вы должны инициализировать диаграмму с вашего контроллера, изменить свойства dataProvider в соответствии с вашими потребностями: 

angular.module('blooddonationControllers', [])
    .controller('blooddonationCtrl', function(Blooddonation,$scope) {
        var app = this;

        function getBlooddonations() {
            Blooddonation.getUsers()
                .then(function(data) {
                    app.blooddonations = data.data.blooddonations;

                    initChart();

                    return true
                });
        }

        function initChart() {
            var data_series = [];

            for(let key in app.blooddonations) {
                data_series.push({
                    "donor": app.blooddonations[key].donors_name,
                    "count": 501.9
                });
            }
            
            var chart = AmCharts.makeChart( "chartdiv", {
                "type": "pie",
                "theme": "none",
                "dataProvider": data_series,
                "valueField": "count",
                "titleField": "donor",
                "balloon":{
                    "fixedPosition":true
                },
                "export": {
                    "enabled": true
                }
            });
    }
}
0 голосов
/ 21 декабря 2018

вы используете это как угловое выражение.вы можете напрямую получить доступ к значению в конфигурации Amchart, например: 

 AmCharts.makeChart( "chartdiv", {
  "type": "pie",
  "theme": "none",
  "dataProvider": [ {
  "donor": person.donors_name,
  "count": 501.9
  } ],
  "valueField": "count",
  "titleField": "donor",
   "balloon":{
   "fixedPosition":true
  },
  "export": {
    "enabled": true
  }
} );
...