AMCHARTS+MYSQL+PHP的使用实例

最新推荐文章于 2021-05-02 11:54:33 发布

ashokawuanshou

最新推荐文章于 2021-05-02 11:54:33 发布

阅读量2.2k

点赞数

分类专栏： MYSQL JAVASCRIPT PHP基础统计文章标签： mysql php stylesheet graph function api

本文链接：https://blog.csdn.net/ashokawuanshou/article/details/7680077

版权

PHP基础同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

MYSQL

10 篇文章 0 订阅

订阅专栏

JAVASCRIPT

9 篇文章 0 订阅

订阅专栏

这是我写的统计曲线实例。欢迎交流。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<link rel="stylesheet" media="all" type="text/css" href="../../zhpt.css" />
<?php
if (!isset($_SESSION['ywclusername']))//判断是否登录
		{
			header("location:../../login.php");
			exit;
		}
?>

<?php //乡镇大气曲线显示
	
	include("../../configywcl.php");
	$xzapi=$jc;//大气监测站传值
	$sqlgroups="select rq,nian,yue,ri,$xzapi from xzdq order by rq";
	//echo $sqlgroups;
	$resultgroups=mysql_query($sqlgroups);
	$numrows=mysql_num_rows($resultgroups);
	if ($numrows>0)
	{		
		while($data=mysql_fetch_array($resultgroups))
		{
			$count++;
			$nian=$data['nian'];
			$yue=$data['yue']-1;
			$ri=$data['ri'];
			$api=$data["$xzapi"];
			$rq="{date: new Date($nian,$yue,$ri),api:$api}";
			//echo "$rq</br>";
			//$rq=$nian.','.$yue.','$ri;
			if ($count<$numrows)
			{				
				$shuju=$shuju."$rq,";
			}
			else
			{
				$shuju=$shuju."$rq";
			}
		}
	}
		$shuju="[$shuju];";
		//echo $shuju;

?>  
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title><?php echo $dqjcd;?>PM10质量曲线</title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="../amcharts/amcharts.js" type="text/javascript"></script>
        <script src="../amcharts/raphael.js" type="text/javascript"></script>
        <script type="text/javascript">
        
            var chart;
            
			var chartData = [];
			
            var chartCursor;
			var average = 100;
			
            AmCharts.ready(function () {
                // generate some data first
                generateChartData();

                // SERIAL CHART    
                chart = new AmCharts.AmSerialChart();
                chart.pathToImages = "../amcharts/images/";
                chart.zoomOutButton = {
                    backgroundColor: '#000000',
                    backgroundAlpha: 0.15
                };
                chart.dataProvider = chartData;
                chart.categoryField = "date";

                // listen for "dataUpdated" event (fired when chart is rendered) and call zoomChart method when it happens
                chart.addListener("dataUpdated", zoomChart);

                // AXES
                // category
                var categoryAxis = chart.categoryAxis;
                categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
                categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
                categoryAxis.dashLength = 1;
                categoryAxis.gridAlpha = 0.15;
                categoryAxis.axisColor = "#DADADA";
				
				

				
                // value                
                var valueAxis = new AmCharts.ValueAxis();
                valueAxis.axisAlpha = 0.2;
                valueAxis.dashLength = 1;
                chart.addValueAxis(valueAxis);
				
				 // GUIDE for average
                var guide = new AmCharts.Guide();
                guide.value = average;
                guide.lineColor = "#aa0000";
                guide.dashLength = 4;
                guide.label = "二级";
                guide.inside = true;
                guide.lineAlpha = 4;
                valueAxis.addGuide(guide);

                // GRAPH
                var graph = new AmCharts.AmGraph();
                graph.title = "空气质量曲线";
                graph.valueField = "api";
                graph.bullet = "round";
                graph.bulletBorderColor = "#FFFFFF";//统计图边的颜色
                graph.bulletBorderThickness = 2;
                graph.lineThickness = 2;
                graph.lineColor = "#0000aa";//折线颜色
                graph.negativeLineColor = "#0352b5"; 
                graph.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection
                chart.addGraph(graph);

                // CURSOR 鼠标手势
                chartCursor = new AmCharts.ChartCursor();
                chartCursor.cursorPosition = "mouse";
                chart.addChartCursor(chartCursor);

                // SCROLLBAR 上部-滚动选择条
                var chartScrollbar = new AmCharts.ChartScrollbar();
                chartScrollbar.graph = graph;
                chartScrollbar.scrollbarHeight = 40;
                chartScrollbar.color = "#ffffff";
                chartScrollbar.autoGridCount = true;
                chart.addChartScrollbar(chartScrollbar);

                // WRITE
                chart.write("chartdiv");
            });
			
			
            // 赋值
            function generateChartData() {
                chartData=<?php echo $shuju;?>;
            }
			

            // this method is called when chart is first inited as we listen for "dataUpdated" event
            function zoomChart() {
                // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
                chart.zoomToIndexes(chartData.length - 40, chartData.length - 1);
            }
            
            // changes cursor mode from pan to select
            function setPanSelect() {
                if (document.getElementById("rb1").checked) {
                    chartCursor.pan = false;
                    chartCursor.zoomable = true;
                    
                } else {
                    chartCursor.pan = true;
                }
                chart.validateNow();
            }            
        </script>
    </head>
    
    <body>
  <table width="100%" border="0">
  <tr>
    <td><h1 align="center"><a href="../../yw_jcz_xzdq.php"><img src="../../images/undo.png"class="t3"/></a><?php echo $dqjcd?> PM10曲线图</h1></td>
  </tr>
  </table>

<div id="chartdiv" style="width: 100%; height: 400px;"></div>
        <div id="chartdiv" style="margin-left:400px;">
            <input type="radio" checked="true" name="group" id="rb1" οnclick="setPanSelect()">选择
            <input type="radio" name="group" id="rb2" οnclick="setPanSelect()">拖拽
		</div>        
<?php
	include("../../foot.php")
?>

ashokawuanshou

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
AMCHARTS+MYSQL+PHP的使用实例

这是我写的统计曲线实例。欢迎交流。<?phpif (!isset($_SESSION['ywclusername']))//判断是否登录 { header("location:../../login.php"); exit; }?><?php //乡镇大气曲线显示 include("../../configywcl.php"); $xzapi=$jc;//
复制链接

扫一扫