Угловой 5 загрузить Google Google - PullRequest
Новая
       5

Угловой 5 загрузить Google Google

0 голосов
/ 26 мая 2018

Я пытаюсь добавить гугл чарт в свой угловой проект.Я пытаюсь использовать диаграмму Google, добавив диаграмму Google js.

Итак, я создал угловое приложение, и мне добавили диаграмму Google в мой index.html: 

 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>BiharEconomy</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

</head>
<body>
  <app-root></app-root>
</body>
</html>

Язагружая loader.js внутри index.html и в мой и внутри component.html я добавляю: 

   <div id="chart_div"></div>

И я могу показать диаграмму Google, используя этот код внутри моего component.ts, например: 

 ngOnInit() {


      // Load the Visualization API and the corechart package.
       google.charts.load('current', {'packages':['corechart']});

       // Set a callback to run when the Google Visualization API is loaded.
       google.charts.setOnLoadCallback(drawChart);

       // Callback that creates and populates a data table,
       // instantiates the pie chart, passes in the data and
       // draws it.
       function drawChart() {

         // Create the data table.
         var data = new google.visualization.DataTable();
         data.addColumn('string', 'Topping');
         data.addColumn('number', 'Slices');
         data.addRows([
           ['Mushrooms', 3],
           ['Onions', 1],
           ['Olives', 1],
           ['Zucchini', 1],
           ['Pepperoni', 2]
         ]);

         // Set chart options
         var options = {'title':'How Much Pizza I Ate Last Night',
                        'width':400,
                        'height':300};
         // Instantiate and draw our chart, passing in some options.
         var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
         chart.draw(data, options);
       }

С помощью этих кодов я могу показать гугл чарт.Поэтому мой вопрос заключается в том, как использовать коды JavaScript в машинописи.Можно ли добавить эти коды JavaScript внутри машинописного текста, когда я добавляю этот код вне ngOnInit () Я получаю ошибки.Как лучше всего вызвать этот код в функции

1 Ответ

0 голосов
/ 24 июля 2018

заменить var на let и объявить google let. 

import { Component, OnInit } from '@angular/core';
declare let google: any;
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
    constructor() {
    }
    ngOnInit() {
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {

            let data = google.visualization.arrayToDataTable([
                ['Task', 'Hours per Day'],
                ['Work',     11],
                ['Eat',      2],
                ['Commute',  2],
                ['Watch TV', 2],
                ['Sleep',    7]
            ]);

            let options = {
                title: 'My Daily Activities'
            };

            let chart = new google.visualization.PieChart(document.getElementById('piechart'));

            chart.draw(data, options);
        }
    }

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...