標籤:
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title>Highcharts Example</title> 5 6 <?php 7 $conn=mysql_connect("localhost","root","") or die ("串連失敗"); 8 mysql_query("set names utf8",$conn); 9 mysql_select_db("office",$conn);10 $sql="SELECT convert(SUM(`total2`) ,decimal(10,2)) as total,`payment_date`as day FROM `toa_order`WHERE TIMESTAMPDIFF(DAY,`payment_date`,DATE(NOW()))<7 group by `payment_date`";11 $result=mysql_query($sql,$conn);12 $day[] = array();13 $count[] =array();14 15 while($row = mysql_fetch_array($result))16 {17 $day[]=$row[‘day‘];18 $count[]=intval($row[‘total‘]);19 }20 $day = json_encode($day);21 22 $data1 = array(array("name"=>"day","data"=>$count));23 $data1 = json_encode($data1); //把擷取的資料對象轉換成json格式24 ?>25 26 <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>27 <script src="js/highcharts.js"></script>28 <script src="js/modules/exporting.js"></script>29 <script type="text/javascript">30 $(function () {31 $(‘#container‘).highcharts({32 title: {33 text: ‘Publish times‘,34 x: -20 //center35 },36 subtitle: {37 text: ‘write by:DongGe‘,38 x: -2039 },40 xAxis: {41 categories: <?php echo $day; ?>42 },43 yAxis: {44 title: {45 text: ‘金 額‘46 },47 plotLines: [{48 value: 0,49 width: 1,50 color: ‘#808080‘51 }]52 },53 tooltip: {54 valueSuffix: ‘元‘55 },56 legend: {57 layout: ‘vertical‘,58 align: ‘right‘,59 verticalAlign: ‘middle‘,60 borderWidth: 061 },62 series: <?php echo $data1; ?>63 });64 });65 </script>66 67 </head>68 <body>69 70 <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>71 72 </body>73 </html>
需引用的js:highcharts.js、jquery.highchartTable.js、jquery-1.8.2.min.js
php+mysql折線圖