API визуализации Google - Диаграмма не показана

У меня проблемы с использованием API визуализации Google.API визуализации Google - Диаграмма не показана

Итак, я не вижу, где я ошибаюсь.

Вот HTML-код (я просто оставил важные части):

<html> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- Arquivo CSS --> 
    <link rel="stylesheet" type="text/css" href="style.css"> 


     <!-- Arquivo js externo --> 
    <script type="text/javascript" src="script.js"></script> 

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

    <!-- Arquivos Bootstrap --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 

    <div id="line_chart"> <!— The chart should appear here!! —> </div> 

</body>

Вот файл script.js:

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

function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Year', 'Goiania', 'Jataí', 'Catalão', 'Goiás', 'Total'], 
      ['2005', 58, 11,  9,  1,  79 ], 
      ['2006', 63, 15,  14,  1,  93 ], 
      ['2007', 66, 18,  16,  1,  101 ], 
      ['2008', 66, 20,  19,  1,  106 ], 
      ['2009', 81, 21,  24,  3,  129 ], 
      ['2010', 85, 23,  25,  3,  136 ], 
      ['2011', 86, 23,  25,  3,  137 ], 
      ['2012', 86, 24,  25,  3,  138 ], 
      ['2013', 89, 24,  25,  5,  143 ], 
      ['2014', 90, 25,  26,  6,  147 ], 
      ['2015', 90, 25,  26,  7,  148 ] 
      ]); 

     var options = { 
      title: 'Testando Gráfico de Anos', 
      legend: { position: 'bottom' } 
     }; 

     var chart = new google.visualization.LineChart(document.getElementById('line_chart')); 

     chart.draw(data, options); 
     }

Я попытался назвать свой файл внешних .js в конце тела, но и успеха. Я знаю, что я не вызываю функцию drawChart в любом месте в html-коде, но я думаю, что функция задана так называемой onload в файле script.js, по крайней мере, это то, что я понял.

Спасибо всем. :) (Прошу прощения, если код может быть трудно понять, я попытался сделать его как можно более чистым).

источник

2017-01-17 Michael Sampietro

Войдите в консоль JS и вызовите функцию. Что это делает? похоже, что script.js получает 404'd – nkconnor

кажется, работает хорошо здесь ...

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

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Year', 'Goiania', 'Jataí', 'Catalão', 'Goiás', 'Total'], 
 
    ['2005', 58, 11,  9,  1,  79 ], 
 
    ['2006', 63, 15,  14,  1,  93 ], 
 
    ['2007', 66, 18,  16,  1,  101 ], 
 
    ['2008', 66, 20,  19,  1,  106 ], 
 
    ['2009', 81, 21,  24,  3,  129 ], 
 
    ['2010', 85, 23,  25,  3,  136 ], 
 
    ['2011', 86, 23,  25,  3,  137 ], 
 
    ['2012', 86, 24,  25,  3,  138 ], 
 
    ['2013', 89, 24,  25,  5,  143 ], 
 
    ['2014', 90, 25,  26,  6,  147 ], 
 
    ['2015', 90, 25,  26,  7,  148 ] 
 
    ]); 
 

 
    var options = { 
 
    title: 'Testando Gráfico de Anos', 
 
    legend: { position: 'bottom' } 
 
    }; 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('line_chart')); 
 

 
    chart.draw(data, options); 
 
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="line_chart"> <!— The chart should appear here!! —> </div>

источник

2017-01-17 12:54:08 WhiteHat

Мм, я нашел ошибку. Я вызывал сценарии в неправильном месте. Я назвал свой файл script.js и визуализацию google в конце тела, и теперь он отлично работает. Спасибо всем, кто помогал (или пытался)! ;)

источник

2017-01-17 13:39:17

API визуализации Google - Диаграмма не показана

ответ

Смежные вопросы