Highcharts / PHP / JS новичок здесь. У меня возникли проблемы с форматированием требуемого массива данных ($ data) для подачи в Highcharts. Вложенный PHP-код выводит массив данных datetime / decimal в форме
[1388680500000, 11215], [1388680800000, 11334], [1388681100000, 11487], [1388681400000, 11600], [1388681700000, 11641], [1388682000000, 11648], [1388682300000, 11692], [1388682600000, 11641], [1388682900000, 11715], [1388683200000, 11808], [1388683500000, 11845], [1388683800000, 11813], [1388684100000, 11771], [1388684400000, 11746], [1388684700000, 11808], [1388685000000, 11784], [1388685300000, 11727], [1388685600000, 11608], [1388685900000, 11648], [1388686200000, 11587], [1388686500000, 11555], [1388686800000, 11596], [1388687100000, 11541], [1388687400000, 11441], [1388687700000, 11393], [1388688000000, 11340], [1388688300000, 11152], [1388688600000, 11031], [1388688900000, 10920], [1388689200000, 10681], [1388689500000, 10221], [1388689800000, 9895] В настоящее время я вручную копирую эти данные (в []) в поле: data: field, которое успешно создает диаграмму (см. Ниже). Я попытался заменить поле данных серией: [{data: [], однако диаграмма больше не создана. (согласно http://www.highcharts.com/docs/working-with-data/preprocessing-data-from-a-database )
Я также пробовал много итераций json_encode ($ data) в php и JS, но безрезультатно. Я был бы очень благодарен всем, кто мог бы показать мне точный перевод выхода php в поле данных Highcharts, предпочтительно используя JSON.
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <?php //the usual stuff error_reporting(-1); $con = mysql_connect("localhost","root",""); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("test", $con); $result = mysql_query("SELECT unix_timestamp(DATETIMES), TEST FROM PT"); $data = array(); while ($row = mysql_fetch_array($result)) { extract($row); $row[0]=1000*$row[0]; $data[] = "[$row[0], $row[1]]"; } mysql_close($con); echo join($data, ', '); ?> <script> $(function() { Highcharts.setOptions({ chart: { backgroundColor: 'rgba(255, 255, 255, .9)', borderWidth: 2, plotBackgroundColor: 'rgba(255, 255, 255, .9)', plotShadow: true, plotBorderWidth: 1 } }); var chart1 = new Highcharts.Chart({ chart: { renderTo: 'container', }, xAxis: { type: 'datetime' }, series: [{ data: [[1388680500000, 11215], [1388680800000, 11334], [1388681100000, 11487], [1388681400000, 11600], [1388681700000, 11641], [1388682000000, 11648], [1388682300000, 11692], [1388682600000, 11641], [1388682900000, 11715], [1388683200000, 11808], [1388683500000, 11845], [1388683800000, 11813], [1388684100000, 11771], [1388684400000, 11746], [1388684700000, 11808], [1388685000000, 11784], [1388685300000, 11727], [1388685600000, 11608], [1388685900000, 11648], [1388686200000, 11587], [1388686500000, 11555], [1388686800000, 11596], [1388687100000, 11541], [1388687400000, 11441], [1388687700000, 11393], [1388688000000, 11340], [1388688300000, 11152], [1388688600000, 11031], [1388688900000, 10920], [1388689200000, 10681], [1388689500000, 10221], [1388689800000, 9895]], pointStart: 0, pointInterval: 3600 * 1000 // one hour }] }); }); </script> </head> <body> <div id="container" style="height: 300px"></div> </body> </html>
РЕДАКТИРОВАТЬ:
Я переработал скрипт в следующем формате, однако диаграмма больше не заходит на все … Я уверен, что формат JSON верен. Пожалуйста помоги!
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Highcharts Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var options = { chart: { renderTo: 'container', type: 'line', marginRight: 130, marginBottom: 25 }, title: { text: 'test', x: -20 //center }, subtitle: { text: '', x: -20 }, xAxis: { categories: [] }, yAxis: { title: { text: 'Amount' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y; } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0 }, series: [] } $.getJSON("data.php", function(json) { options.xAxis.categories = json['category']; options.series[0].name = json['name']; options.series[0].data = json['data']; chart = new Highcharts.Chart(options); }); }); </script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> </head> <body> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> </body> </html>