直接上代码
【官方文档请参见http://www.highcharts.com/docs/working-with-data/getting-data-across-domains-jsonp】
【实例http://highcharts-mzm.rhcloud.com/】
1、index.html
<!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.8.2/jquery.min.js"></script> <style type="text/css"> ${demo.css} </style> <script type="text/javascript"> $(document).ready(function() { var options = { chart: { renderTo: 'container', type: 'column' }, title: { text: 'Highcharts Chart PHP with MySQL Example', x: -20 //center }, subtitle: { text: 'Source: dongqiudi.com', x: -20 }, xAxis: { categories: [], title: { text: 'team' } }, yAxis: { title: { text: 'score' }, plotLines: [{ value: 0, 1, color: '#808080' }] }, tooltip: { valueSuffix: '个' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: [] }; var url = "http://yourip/getHighchartData.php?callback=?"; $.getJSON(url, function(data) { options.xAxis.categories = data[0]['data']; //xAxis: {categories: []} options.series[0] = data[1]; options.series[1] = data[2]; var chart = new Highcharts.Chart(options); }); }); </script> </head> <body> <script src="../../js/highcharts.js"></script> <script src="../../js/modules/exporting.js"></script> <div id="container" style="min- 310px; height: 400px; margin: 0 auto"></div> </body> </html>
2、getHighchartData.php
<?php /* * Following code will list all the products */ // array for JSON response $response = array(); // include db connect class require_once __DIR__ . '/db_connect.php'; // connecting to db $db = new DB_CONNECT(); // 查询主场进球及主场失球数据 $result = mysql_query("SELECT home_team, sum(score_home) as score_h, sum(score_visiting) as score_v FROM fbscore group by home_team") or die(mysql_error()); $bln = array(); $bln['name'] = 'team name'; $rows['name'] = 'home score'; $rows2['name'] = 'visiting score'; // check for empty result if (mysql_num_rows($result) > 0) { while ($r = mysql_fetch_array($result)) { // temp user array //$array = $row["score_home"]; array_push($array, $row[score_home]); $bln['data'][] = $r['home_team']; $rows['data'][] = $r['score_h']; $rows2['data'][] = $r['score_v']; } $rslt = array(); array_push($rslt, $bln); array_push($rslt, $rows); array_push($rslt, $rows2); // echoing JSON response echo $_GET['callback']. '('. json_encode($rslt, JSON_NUMERIC_CHECK) . ')'; //print json_encode($rslt, JSON_NUMERIC_CHECK); } else { echo "error!"; }
3、效果图
