Как нарисовать диаграмму столбца Google в проекте Angular 6? - PullRequest
Новая
       29

Как нарисовать диаграмму столбца Google в проекте Angular 6?

0 голосов
/ 01 сентября 2018

Я использую угловой 6 и хочу нарисовать гистограмму Google. Я нашел ниже коды из документации, но я не знаю, как использовать его в моем приложении?

HTML 

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <div id="top_x_div" style="width: 800px; height: 600px;"></div>

JS 

      google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawStuff);

  function drawStuff() {
    var data = new google.visualization.arrayToDataTable([
      ['Move', 'Percentage'],
      ["King's pawn (e4)", 44],
      ["Queen's pawn (d4)", 31],
      ["Knight to King 3 (Nf3)", 12],
      ["Queen's bishop pawn (c4)", 10],
      ['Other', 3]
    ]);

    var options = {
      width: 800,
      legend: { position: 'none' },
      chart: {
        title: 'Chess opening moves',
        subtitle: 'popularity by percentage' },
      axes: {
        x: {
          0: { side: 'top', label: 'White to move'} // Top x-axis.
        }
      },
      bar: { groupWidth: "90%" }
    };

    var chart = new google.charts.Bar(document.getElementById('top_x_div'));
    // Convert the Classic options to Material options.
    chart.draw(data, google.charts.Bar.convertOptions(options));
  };

1 Ответ

0 голосов
/ 13 декабря 2018

Вы должны сначала объявить в своем компоненте так: 

declare var google:any;

тогда ваш компонент будет знать, на что вы ссылаетесь, когда вы звоните 

google.charts.load..

Все остальное выглядит хорошо ..

...