Я пытаюсь сделать диаграмму, используя директиву Google-диаграммы. Но моя диаграмма не отображается - PullRequest
Новая
       18

Я пытаюсь сделать диаграмму, используя директиву Google-диаграммы. Но моя диаграмма не отображается

0 голосов
/ 14 февраля 2020

Я пытаюсь сделать pieCharts, Barcharts, используя angular диаграммы Google. Я создал colChartObject и назначил ему данные и несколько других параметров, таких как размер, цвета, но в браузере ничего не отображается. Я пытался сделать то же самое, используя свою пользовательскую директиву, но у меня возникла та же проблема. Может кто-нибудь, пожалуйста, дайте мне знать проблему в моем коде ?? 

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-chart/1.0.0-beta.1/ng-google-chart.min.js" type="text/javascript"></script>

</head>
<body ng-app = "ngapp">
    <div ng-controller="ChartController">
        <div google-chart chart="colChartObject"></div>
     </div>
</body>
</html>

JS

var app = angular.module('ngapp',[]);
app.controller('ChartController',function($scope){
    $scope.colChartObject={};
    $scope.colChartObject.type = "PieChart"; //setting chart type
    $scope.colChartObject.displayed = true;

    $scope.Colors = [
        ['#CB7472', '#A895BF', '#F8A769', '#A7514F', '#C0504D', '#9BBB59'],
        ['#7399C9', '#A8C472', '#8AC8D9', '#426690', '#4BACC6', '#8064A2'],
        ['#4F81BD', '#C0504D', '#9BBB59', '#A895BF', '#F8A769', '#A7514F'],
        ['#F79646', '#4BACC6', '#8064A2', '#A8C472', '#8AC8D9', '#426690']
    ];

   // $scope.colChartObject.data = $scope.data; //setting chart data
    //setting chart options
    $scope.colChartObject.options = {
        title: 'nothing special',              //chart title
        isStacked: 'true',        //chart is stacked or not
        titleTextStyle: { color: '#000000', 
        fontName: 'Open Sans', fontSize: 16, 
                     bold: true, italic: false },  //title style
        height: 250,  
        colors: $scope.Colors[Math.floor(Math.random() * $scope.Colors.length)]  //colors
    };

    $scope.colChartObject.data= {
        cols: [                
            {
                id: "month",
                label: "Month",
                type: "string"
            },
            {
                id: "Tables-id",
                label: "Tables",
                type: "number"
            },
            {
                id: "Chairs-id",
                label: "Chairs",
                type: "number"
            },
            {
                id: "Bed-id",
                label: "Bed",
                type: "number"
            },
            {
                id: "Desk-id",
                label: "Desk",
                type: "number"
            }
        ],
        rows: [             
            {
                c: [
                    {
                        v: "January"
                    },
                    {
                        v: 19,          //value required to plot chart
                        f: "19 Tables"  //description which is shown on mouse hover
                    },
                    {
                        v: 12,
                        f: "12 Chairs"
                    },
                    {
                        v: 7,
                        f: "7 Beds"
                    },
                    {
                        v: 4,
                        f: "4 Desks"
                    }
                ]
            },
            {
                c: [
                    {
                        v: "February"
                    },
                    {
                        v: 13
                    },
                    {
                        v: 1,
                        f: "only 1unit"
                    },
                    {
                        v: 12
                    },
                    {
                        v: 2
                    }
                ]
            },
            {
                c: [
                    {
                        v: "March"
                    },
                    {
                        v: 24
                    },
                    {
                        v: 5
                    },
                    {
                        v: 11
                    },
                    {
                        v: 6
                    }
                ]
            }
        ]
    }
});

1 Ответ

1 голос
/ 14 февраля 2020

Вы забыли объявить модуль "google-chart" как зависимость вашего модуля "ngapp".

Вы должны изменить 

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

на 

  var app = angular.module('ngapp', ['googlechart']);
...