Загрузить графики google в проект ember-cli

Я попытался загрузить пример Google chart в шаблон handlebar следующим образом

<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

  // 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);
  }
</script>
<br>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
{{outlet}}

в консоли, я получил следующую ошибку,

VM15593:4 Uncaught ReferenceError: google is not defined
at <anonymous>:4:7
at TreeConstruction.insertBefore (ember.debug.js:50096)
at ElementStack.appendText (ember.debug.js:44985)
at TextOpcode.evaluate (ember.debug.js:47601)
at VM.execute (ember.debug.js:53440)
at Object.render (ember.debug.js:53014)
at RootState.render (ember.debug.js:11335)
at runInTransaction (ember.debug.js:22298)
at InteractiveRenderer._renderRoots (ember.debug.js:11600)
at InteractiveRenderer._renderRootsTransaction (ember.debug.js:11638)

Что нужно сделать, чтобы избежать этой ошибки?

Есть ли какой-либо другой метод для загрузки диаграмм google в проектах ember-cli внутри файлов шаблонов.

1 ответ

  1. Прежде всего спасибо @kumkanillam,

    В соответствии с его инструкциями я сначала добавил код скрипта, чтобы загрузить графики/загрузчик.js, в индексе.html-файл в папке App,

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    

    Затем я создал компонент ggl-chrt с помощью следующей командной строки

    ember g component ggl-chrt
    

    затем внутри ggl-chrt.JS-файл в разделе компоненты вставлен следующий код:

    import Ember from 'ember';
    
    export default Ember.Component.extend({
    didInsertElement() {
    google.charts.load('upcoming', {'packages':['geochart']});
    google.charts.setOnLoadCallback(drawRegionsMap);
    
      function drawRegionsMap() {
    
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);
    
        var options = {};
    
        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
    
        chart.draw(data, options);
      }
     }
       });
    

    затем внутри ggl-chrt.HBS-файл, вставлен следующий код:

    <div id="regions_div" style="width: 900px; height: 500px;"></div>
    {{yield}}
    

    затем в главный файл шаблона вставляется следующий код:

    {{ggl-chrt}}
    {{outlet}}
    

    конечный результат получен