如何使用 amcharts 从 mongodb 显示 getdata

Question

我是 mean-stack 的新手，我正在尝试使用 amchartsJS 从 mongodb 显示我的值，我使用 api.js 获取我的数据，然后控制器将变量传递给我的 html。我的 table 工作正常并显示来自 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}}

这是我获取值的代码：

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; ?>
  ]

Answer 1

您正在将其用作 angular 表达式。您可以直接访问 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
  }
} );

Answer 2

您必须从控制器初始化图表，根据需要修改 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
                }
            });
    }
}

如何使用 amcharts 从 mongodb 显示 getdata

How to display getdata from mongodb using amcharts

mongodb

amcharts

node.js

mean-stack