Это мой первый запрос здесь, и я прочитал многие другие связанные сообщения по этой же проблеме, но я ВСЕ ЕЩЕ ЗАПРЕЩАЮСЯ, и в значительной степени на мой взгляд на этом … Так что любая помощь очень ценится!
У меня есть следующий объект Highcharts на Page1.php, и я использую AJAX для получения данных из Page2.php при загрузке страницы, а также при изменении параметра выпадающего списка.
(усеченный для удобства чтения):
$(document).ready(function() { var e = document.getElementById("selOption"); //<--- This is the dropdown var domText = e.options[0].text; var domID = e.options[e.selectedIndex].value; var options = { chart: { renderTo: 'linechart', type: 'line' }, title: { text: 'Title for ' + domText }, subtitle: { text: '' }, xAxis: { type: 'datetime', dateTimeLabelFormats: { month: '%b %e, %Y', year: '%Y' } }, yAxis: { title: { text: 'Important Values' }, reversed: true, min: 0, max: 100 }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ Highcharts.dateFormat('%b %e', this.x) +': '+ this.y; } }, series: [] }; $.get('Page2.php?domID=' + domID,function(data) { $.each(data, function(key,value) { //var series = {}; //series.name.push(value); //series.data.push([value]); options.series.push(data); //alert(data); }); var linechart = new Highcharts.Chart(options); }); }); Page2.php имеет следующую отправку json:
$sqlSelect = "SELECT Item1,Item2,Item3 FROM... "; $result = mysql_query($sqlSelect); while ($item = mysql_fetch_assoc($result)) { $name = $item['Item1']; $date = str_replace("-",",",$item['Item2']); $pos = $item['Item3']; $arr = array("name"=>$name,"data"=>"[Date.UTC(".$date."), ".$pos." ],"); echo json_encode($arr); }
Мой ответ json выглядит так:
{"name":"Item1","data":"[Date.UTC(2011,11,08), 4 ],"} {"name":"Item1","data":"[Date.UTC(2011,11,08), 2 ],"}
Когда мой график загружается, он заполняет имена 135 Series (?!?!?!) Внизу и не отображает точки на линейном графике.
Если я удалю двойные кавычки и жесткий код результата в массив рядов, он отлично работает (хотя я заметил, что в примере нет запятой между объектами.
СПАСИБО за всю помощь … особенно быстрые ответы! 😉
РЕШИТЬ:
Я нашел ответ, который наконец-то сработал! Разочарование того, что это заняло у меня несколько дней, потому что это было плохо документировано Highcharts (и / или, может быть, мое понимание jQuert и JavaScript все еще на начальном уровне).
Ответ заключается не в отправке данных X / Y в виде предварительно сформированного массива в ваш json-объект, а вместо этого просто отправьте числа, которые составляют дату (значение x) и значение (значение y) в виде списка значений, разделенных запятыми, в объект json, а затем выполните разбор и нажатие на конец клиента.
Например: я изначально пытался заставить свой PHP отправить что-то вроде [{"name":"Name 1","data":["[Date.UTC(2011,11,08), 4 ]","[Date.UTC(2011,11,09), 4 ]","[Date.UTC(2011,11,10), 4 ]","[Date.UTC(2011,11,11), 4 ]","[Date.UTC(2011,11,14), 3 ]"]} …
но мне действительно нужно было отправить что-то вроде [{"name":"Name 1","data":["2011,11,08, 4","2011,11,09,4"....
Первый шаг – убедиться, что у вас есть опция «серия», заданная для пустой series: [] массивов series: []
(Я упоминаю это, потому что видел другие ответы, где это было сделано по-другому).
Затем в вашей функции getJSON вам необходимо создать новый объект для каждого объекта, который вы втягиваете, в который также входит пустой массив данных (см. Ниже раздел «var series»).
Затем вставьте несколько циклов $ .each, чтобы проанализировать и направить данные в их необходимые массивы и заполнить «имя» каждого объекта:
$.getJSON('http://www.mydomain.com/getdata.php?ID=' + id, function(data) { $.each(data, function(key,value) { var series = { data: []}; $.each(value, function(key,val) { if (key == 'name') { series.name = val; } else { $.each(val, function(key,val) { var d = val.split(","); var x = Date.UTC(d[0],d[1],d[2]); series.data.push([x,d[3]]); }); } }); options.series.push(series); });
После вышеуказанного кода вам нужно создать экземпляр диаграммы: var chart = new Highcharts.Chart(options);
И это должно быть!
Надеюсь, кто-то еще найдет этот ответ полезным и не должен бить себя по голове в течение нескольких дней, пытаясь понять это. 🙂
Поскольку метод Javascript UTC будет возвращаться с помощью Integer, лучше всего просто передать временную метку Unix как целое число, когда вы создаете JSON на сервере, вместо этого пытаетесь передать функцию (UTC.Date) в JSON, что делает весь JSON недействителен!
Так
Вместо этого
while ($item = mysql_fetch_assoc($result)) { $name = $item['Item1']; $date = str_replace("-",",",$item['Item2']); $pos = $item['Item3']; $arr = array("name"=>$name,"data"=>"[Date.UTC(".$date."), ".$pos." ],"); echo json_encode($arr); }
Сделай это:
while ($item = mysql_fetch_assoc($result)) { $name = $item['Item1']; $unix_date = date("Ymd", strtotime($item['Item2'])); $pos = $item['Item3']; $arr = array("name"=>$name,"data"=>"[".($unix_date*1000).", ".$pos." ],"); echo json_encode($arr); }
Обратите внимание, что мы умножаем временную метку unix PHP на 1000, чтобы сделать ее совместимой с JS.
series должны быть массивом объектов JSON, каждый из которых содержит {"name":"Item1","data":"[Date.UTC(2011,11,08), 4 ],"} и т.д.
Основная проблема заключается в том, что ваш вывод из страницы2 не является массивом.
Сначала вам нужно исправить ваш $ .each, вам нужно нажать value , а не data :
$.each(data, function(key,value) { options.series.push(value); });
Это будет правильно задавать каждый элемент последовательно для полного объекта json.
Затем исправить выход:
$output = []; while ($item = mysql_fetch_assoc($result)) { $name = $item['Item1']; $date = str_replace("-",",",$item['Item2']); $pos = $item['Item3']; //I don't think there's supposed to be a comma after this square bracket $arr = array("name"=>$name,"data"=>"[Date.UTC(".$date."), ".$pos." ]"); array_push($output, json_encode($arr)); } echo "["; foreach($output as $val){ echo $val; if($val != end($output)) echo ","; } echo "]";
И это должно сделать это.
Проверено в PHP5.5
Вы можете просто добавить это в json с серией данных
$date = '31-12-2015 00:00:00'; $datetimeUTC = (strtotime($date) * 1000); $data[] = [$datetimeUTC, (float) $value];
Я столкнулся с проблемой отправки временных меток, созданных mktime (), потому что highcharts ожидает UTC, в то время как PHP Timestamp не UTC. Данные могут отображаться в неправильный день на графике, поэтому вам также необходимо учитывать часовой пояс.
function _convertToUTC($timeStamp) { return (int)$timeStamp + (int)date('Z', $timeStamp); }
Пример кода:
$serie = array( 'name' => 'title', 'data' => array( // multiply timestamp by 1000 to get milliseconds array(_convertToUTC(mktime(0,0,0,1,1,2016)) * 1000, 15), array(_convertToUTC(mktime(0,0,0,2,1,2016)) * 1000, 18), array(_convertToUTC(mktime(0,0,0,3,1,2016)) * 1000, 13), ), ); echo json_encode($serie);