php+mysql折線圖

來源:互聯網
上載者:User

標籤:

 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折線圖

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.