Вот пытаюсь прикрутить диаграмму с помощью JS и API от goole. Пример беру от сюда:
https://developers.google.com/chart/...llery/piechart
Но задача стоит немного не тривиальная, сразу показываю что у меня есть.
Есть первый файл
1.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('#graf').load('2.html');
});
</script>
<div id='graf'></div>
</body>
</html>
В этом файле подгружаю в div содержимое второго файла, где и должна рисоваться диаграмма
2.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="./js/jquery.js"></script>
</head>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('statistic'));
chart.draw(data, options);
}
</script>
<body>
<div id='statistic'></div>
</body>
</html>
Открываю браузер, 1.html, пустота, нажимаю F12 для просмотра ошибок в консоле (ошибок нет), вкладка Elements (в ней обычно расписывается структура DOM) изменилась совсем на другую, даже моих div нет:
<html>
<head>
<script src="https://www.google.com/uds/?file=visualization&v=1.1&packages=corechart" type="text/javascript"></script>
<link href="https://www.google.com/uds/api/visualization/1.1/737afc8ce041665a74b6490aec432568/ui+ru.css" type="text/css" rel="stylesheet">
<script src="https://www.google.com/uds/api/visualization/1.1/737afc8ce041665a74b6490aec432568/webfontloader,format+ru,default+ru,ui+ru,corechart+ru.I.js" type="text/javascript">
</script>
</head>
</html>
Возможно вы скажете, подключай API во втором файле, тогда у меня возникает ошибка
Uncaught ReferenceError: google is not defined
При этом если я открою в браузере сразу 2.html, то все прекрасно рисуется.
Подскажите советом )
