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

Я новичок в mean-stack, и я пытаюсь отобразить свои значения из 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}}

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

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

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, но я не знаю, как это сделать в среднем стеке:

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

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

  <?php endwhile; ?>
  ]

Есть несколько диаграмм, верно? Не могли бы вы рассказать больше HTML, как вы получаете все эти диаграммы

Jitendra Khatri 21.12.2018 06:22

что вы имеете в виду под несколькими диаграммами, я использовал для этого amchartsJS версии 3, а затем для отображения только что использованного div диаграммы <div id = "chartdiv"> </div>

Godshand 21.12.2018 06:26
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
2
158
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

вы используете его как угловое выражение. вы можете напрямую получить доступ к значению в конфигурации 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
  }
} );

Я пробовал, но это дает мне ReferenceError: person is not defined

Godshand 21.12.2018 06:05

плохо, вы обращаетесь к человеку из своей модели ref blooddonationmanagement.blooddonations, вам нужно создать dataProvider, перебирая app.blooddonations и создавая массив объектов {"donor":, "count"} и то же самое, что вы можете использовать в конфигурации

Divya Parashar 21.12.2018 06:13

Я тоже об этом думаю, но не знаю, куда поставить и как это назвать

Godshand 21.12.2018 06:27
Ответ принят как подходящий

Вам необходимо инициализировать диаграмму с вашего контроллера, изменить свойства 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
                }
            });
    }
}

Другие вопросы по теме