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 //center 35 }, 36 subtitle: { 37 text: 'write by:DongGe', 38 x: -20 39 }, 40 xAxis: { 41 categories: <?php echo $day; ?> 42 }, 43 yAxis: { 44 title: { 45 text: '金 额' 46 }, 47 plotLines: [{ 48 value: 0, 49 1, 50 color: '#808080' 51 }] 52 }, 53 tooltip: { 54 valueSuffix: '元' 55 }, 56 legend: { 57 layout: 'vertical', 58 align: 'right', 59 verticalAlign: 'middle', 60 borderWidth: 0 61 }, 62 series: <?php echo $data1; ?> 63 }); 64 }); 65 </script> 66 67 </head> 68 <body> 69 70 <div id="container" style="min- 310px; height: 400px; margin: 0 auto"></div> 71 72 </body> 73 </html>
需引用的js:highcharts.js、jquery.highchartTable.js、jquery-1.8.2.min.js