首页 > 技术文章 > php+mysql折线图

Dong-Ge 2015-10-12 16:35 原文

 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 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: 0
61 },
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

推荐阅读