2017-04-20 10 views
1

jsonを使用してハイチャートの折れ線グラフにmysql結果をロードします。以下のコードでは、xAxixは手動フィードです。どうすればmysqlデータベースから動的にフィードできますか? PHPコードとhtmlコードも見つかります。 おかげハイチャート線グラフのxAxisを動的にフィードする方法

<!DOCTYPE HTML> 
 
<html> 
 
\t <head> 
 
\t \t <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
\t \t <title>Highcharts Example</title> 
 

 
\t \t 
 
\t </head> 
 
\t <body> 
 
    
 

 
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
 

 

 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
    <script src="http://code.highcharts.com/highcharts.js"></script> 
 
    <script src="http://code.highcharts.com/modules/exporting.js"></script> 
 
\t \t <script type="text/javascript"> 
 
$(function() { 
 
    var chart; 
 
    $(document).ready(function() { 
 
     $.getJSON("data.php", function(json) { 
 
\t  
 
\t \t  chart = new Highcharts.Chart({ 
 
\t    chart: { 
 
\t     renderTo: 'container', 
 
\t     type: 'line', 
 
\t     marginRight: 130, 
 
\t     marginBottom: 25 
 
\t    }, 
 
\t    title: { 
 
\t     text: 'Revenue vs. Overhead', 
 
\t     x: -20 //center 
 
\t    }, 
 
\t    subtitle: { 
 
\t     text: '', 
 
\t     x: -20 
 
\t    }, 
 
\t    xAxis: { 
 
\t     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
 
\t    }, 
 
\t    yAxis: { 
 
\t     title: { 
 
\t      text: 'Amount' 
 
\t     }, 
 
\t     plotLines: [{ 
 
\t      value: 0, 
 
\t      width: 1, 
 
\t      color: '#808080' 
 
\t     }] 
 
\t    }, 
 
\t    tooltip: { 
 
\t     formatter: function() { 
 
\t       return '<b>'+ this.series.name +'</b><br/>'+ 
 
\t       this.x +': '+ this.y; 
 
\t     } 
 
\t    }, 
 
\t    legend: { 
 
\t     layout: 'vertical', 
 
\t     align: 'right', 
 
\t     verticalAlign: 'top', 
 
\t     x: -10, 
 
\t     y: 100, 
 
\t     borderWidth: 0 
 
\t    }, 
 
\t    series: json 
 
\t   }); 
 
\t  }); 
 
    
 
    }); 
 
    
 
}); 
 
\t \t </script> 
 

 
\t </body> 
 
</html>

<?php 
$con = mysqli_connect("localhost","root","","bdd"); 

if (!$con) { 
    die('Could not connect: ' . mysqli__connect_error()); 
} 

//mysqli_select_db($con,"bdd"); 
$query="SELECT revenue FROM projections_sample"; 
$sth = mysqli_query($con,$query); 
$rows = array(); 
$rows['name'] = 'Revenue'; 
while($r = mysqli_fetch_array($sth)) { 
    $rows['data'][] = $r['revenue']; 
} 
$query2="SELECT overhead FROM projections_sample"; 
$sth = mysqli_query($con,$query2); 
$rows1 = array(); 
$rows1['name'] = 'Overhead'; 
while($rr = mysqli_fetch_assoc($sth)) { 
    $rows1['data'][] = $rr['overhead']; 
} 

$result = array(); 
array_push($result,$rows); 
array_push($result,$rows1); 


print json_encode($result, JSON_NUMERIC_CHECK); 

mysqli_free_result($sth); 


mysqli_close($con); 
?> 

答えて

0

することはでき、あなたのチャート設定のX軸属性にちょうどechoあなたのJSONコード:

subtitle: { 
    text: '', 
    x: -20 
}, 
xAxis: <?php echo json_encode($result, JSON_NUMERIC_CHECK); ?>, 
yAxis: ... 

それとも、AJAXを使用してデータをretrive場合リクエストしてから、チャートを初期化する前にリクエストを実行し、同じ方法でリターンデータを使用します。