Не в состоянии загружать термоядерные диаграммы с angularjs - PullRequest
Новая
       28

Не в состоянии загружать термоядерные диаграммы с angularjs

0 голосов
/ 07 марта 2019

Я пытаюсь загрузить фьюжн-диаграммы на мою веб-страницу с помощью AngularJS.

У меня есть следующий код контроллера в AngularJs. 

angular.module('myApp').controller('myCenter',myCenter);
myCenter.$inject = ['$scope','myCentre','$rootScope'];
function myCenter($scope, myCentre,$rootScope) {
    $scope.myData = [];
    $scope.myDataSource = {
                "chart": {
                    "caption": "Dummy Data",
                    "subCaption": "Dummy Data",
                    "xAxisName": "Dummy Data",
                    "yAxisName": "Dummy Data",
                    "numberSuffix": "K",
                    "theme": "fusion",
                },
                "data": [{
                    "label": "Venezuela",
                    "value": "290"
                }, {
                    "label": "Saudi",
                    "value": "260"
                }, {
                    "label": "Canada",
                    "value": "180"
                }, {
                    "label": "Iran",
                    "value": "140"
                }, {
                    "label": "Russia",
                    "value": "115"
                }, {
                    "label": "UAE",
                    "value": "100"
                }, {
                    "label": "US",
                    "value": "30"
                }, {
                    "label": "China",
                    "value": "30"
                }]
            };
}

Я получил следующие ошибки на консоли.

Error Image

Следующий HTML добавлен. 

<div fusioncharts id="my-chart-id" width="700" height="400" type="column2d" dataSource="{{myDataSource}}">
</div>

Я не могу распознать ошибку.

РЕДАКТИРОВАТЬ 1: -

Мне удалось устранить эту проблему, просто изменив массив myDataSource в одну строку, а затем добавив одинарные кавычки вокруг него, как показано ниже. 

$scope.myDataSource = '{ "chart": { "caption": "Dummy Data", "subCaption": "Dummy Data", "xAxisName": "Dummy Data", "yAxisName": "Dummy Data", "numberSuffix": "K" }, "theme": "fusion", "data": [{ "label": "Venezuela", "value": "290" }, { "label": "Saudi", "value": "260" }, { "label": "Canada", "value": "180" }, { "label": "Iran", "value": "140" }, { "label": "Russia", "value": "115" }, { "label": "UAE", "value": "100" }, { "label": "US", "value": "30" }, { "label": "China", "value": "30" }]}';

И редактирование HTML следующим образом 

<fusioncharts id="chartcontainer" chartid="chart1" width="100%" height="450" type="column2d" dataFormat= "json" dataSource="{{myDataSource}}"></fusioncharts>

После этого редактирования вместо диаграммы появилось сообщение Загрузка диаграммы, пожалуйста, подождите .

В чем может быть проблема в данных.

Ответы [ 2 ]

0 голосов
/ 07 марта 2019

Вот рабочий образец на основе ваших данных выше

View 

<html ng-app="HelloApp">

  <body ng-controller="MyController">

    <fusioncharts id="mychartcontainer" chartid="mychart" width="{{width}}" height="400" type="{{type}}" dataSource="{{dataSource}}"></fusioncharts>


  </body>

</html>

Контроллер 

var app = angular.module('HelloApp', ["ng-fusioncharts"])
app.controller('MyController', function($scope) {
  $scope.type = "column2d";
  $scope.width = 600;
  $scope.dataSource = {
    "chart": {
      "caption": "Dummy Data",
      "subCaption": "Dummy Data",
      "xAxisName": "Dummy Data",
      "yAxisName": "Dummy Data",
      "numberSuffix": "K",
      "theme": "fusion",
    },
    "data": [{
      "label": "Venezuela",
      "value": "290"
    }, {
      "label": "Saudi",
      "value": "260"
    }, {
      "label": "Canada",
      "value": "180"
    }, {
      "label": "Iran",
      "value": "140"
    }, {
      "label": "Russia",
      "value": "115"
    }, {
      "label": "UAE",
      "value": "100"
    }, {
      "label": "US",
      "value": "30"
    }, {
      "label": "China",
      "value": "30"
    }]
  };


});

Вот демоверсия - http://jsfiddle.net/1k07wvop/

0 голосов
/ 07 марта 2019

Основная причина, которую я могу догадаться, заключается в том, что модуль ng-fusioncharts не загружается в этом состоянии в html:

Что вы используете для создания сценариев / html?Если это глоток, вы можете использовать это: https://www.npmjs.com/package/gulp-angular-filesort Если вы делаете это вручную, просто измените порядок. Если вы будете использовать веб-пакет, я верю, что он сделает это автоматически для вас ..

Заказ в htmlДолжно быть схематично: 

AngularJS
fusioncharts
ng-fusioncharts
myApp
...