googlecharts не загружает данные json при запуске на локальном сервере
Я планирую использовать googlecharts для составления диаграммы данных, которые хранятся в локальной базе данных — код googlecharts также будет храниться на локальном сервере. Я использовал XAMPP для создания локального каталога (‘Http: // Http: //127.0.0.1/). Прежде чем перейти к проекту, я тестирую пример скрипта (который я нашел в поиске Google), который берет данные из файла json (который вызывается из скрипта php) и затем передает их в функции рисования googlecharts. Все 3 файла хранятся в папке «C: \ xampp \ htdocs», как рекомендуется, но когда я загружаю страницу в браузере (http://127.0.0.1/test_php_long.html) страница выглядит пустой (в Chrome, IE и Firefox). Когда я запускаю скрипт googlecharts с данными, жестко закодированными в HTML, он работает нормально. Я искал онлайн в течение нескольких часов, но еще не нашел решение, которое работает.
Это основной HTML-файл (‘test_php_long.html’):
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.maxcdn.com/one//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
//fetchjson.php is a php script that will fetch the JSON data e generated using above php code
url: "fetchjson.php",
dataType:"json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var chart = new google.visualization.LineChart(document.getElementById('chart_flow'));
chart.draw(data, {width: 1200, height: 300, lineWidth: 1, pointSize: 1.3, pointWidth: 3});
}
</script>
</head>
<body>
<div id="chart_flow"></div>
</body>
</html>
Это файл php (‘fetchjson.php’)
<html>
<head>
<title></title>
</head>
<body>
<?php
//Fill the ‘string’ variable with JSON data from file we used as json container populated by php //code: ‘flow.json’
$string = file_get_contents("flow.json");
//push JSON data out
echo $string;
?>
</body>
</html>
И это файл json (‘flow.json’):
{ «смещ_по_столбцы»: [{ «ID»: «», «метка»: «Время», «образец»: «», «тип»: «строка»}, { «идентификатор»: «», «метка»: «Cache Hits», «pattern»: «», «type»: «number»}, {«id»: «», «label»: «Non Cache Hits», «pattern»: «», «type» : «число»}], «строки»: [{«c»: [{«v»: «2014-01-21 00:00:00»}, {«v»: 2}, {«v»: 23}]}, {«c»: [{«v»: «2014-01-21 01:00:00»}, {«v»: 2}, {«v»: 52}]},
…
, {«c»: [{«v»: «2014-01-23 01:00:00»}, {«v»: 0}, {«v»: 34}]},]}
Спасибо!
Решение
Ваша проблема может быть связана с тем фактом, что ваш запрос относится к разным источникам или, по крайней мере, рассматривается как один раз. Насколько мне известно, есть два способа решения этой проблемы: либо разрешить перекрестные запросы, добавив следующие строки в верхней части PHP-скрипта:
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
Хотя это потенциально небезопасно, и * следует заменить списком доверенных доменов, на данный момент это должно решить вашу проблему и не должно представлять большую угрозу безопасности, поскольку ваше приложение будет работать в интрасети.
ИЛИ, вы также можете запустить jsonp вместо json, обернув ваш объект json в обратный вызов:
echo $_GET['callback'] . '(' . json_encode($something_to_be_encoded) . ')';
Не забывайте, что ваш параметр url, передаваемый вашей функции ajax, теперь должен быть:
http://myawesomescript.php?callback=?
Другие решения
Других решений пока нет …