<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title> <?php
$conn=mysql_connect("localhost","root","") or die ("连接失败");
mysql_query("set names utf8",$conn);
mysql_select_db("office",$conn);
$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`";
$result=mysql_query($sql,$conn);
$day[] = array();
$count[] =array(); while($row = mysql_fetch_array($result))
{
$day[]=$row['day'];
$count[]=intval($row['total']);
}
$day = json_encode($day); $data1 = array(array("name"=>"day","data"=>$count));
$data1 = json_encode($data1); //把获取的数据对象转换成json格式
?> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
title: {
text: 'Publish times',
x: -20 //center
},
subtitle: {
text: 'write by:DongGe',
x: -20
},
xAxis: {
categories: <?php echo $day; ?>
},
yAxis: {
title: {
text: '金 额'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '元'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: <?php echo $data1; ?>
});
});
</script> </head>
<body> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> </body>
</html>

需引用的js:highcharts.js、jquery.highchartTable.js、jquery-1.8.2.min.js

php+mysql折线图的更多相关文章

  1. highcharts实例教程一:结合php与mysql生成折线图

    Highcharts是一款纯javascript和html5编写的图表库,不仅几乎能兼容所有pc浏览器,而且对ios和android手机端的兼容 性也不错,它能够很简单便捷的在Web网站或Web应用中 ...

  2. C# 实时折线图,波形图

    此Demo是采用VS自带的Chart图表控件,制作实时动态显示的折线图,和波形图. 涉及到知识如下: Chart 控件,功能强大,可以绘制柱状图,折线图,波形图,饼状图,大大简化了对图的开发与定制. ...

  3. Android开发学习之路-自定义控件(天气趋势折线图)

    之前写了个天气APP,带4天预报和5天历史信息.所以想着要不要加一个折线图来显示一下天气变化趋势,难得有空,就写了一下,这里做些记录,脑袋不好使容易忘事. 先放一下效果: 控件内容比较简单,就是一个普 ...

  4. react-echarts之折线图的显示

    react中想要实现折线图和饼图的功能,需要引入react-echarts包,然后再实现折线图的功能.我这里引用的版本是:0.1.1.其他的写法参echarts官网即可.下面详细讲解的是我在react ...

  5. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. MPAndroidChart 3.0——LineChart(折线图)

    显示效果 MPAndroidChart每一种图表的基本使用方式都基本相同 了解一种图表的实现 参考项目源码其他的图表也就差不多哩 在布局文件中定义 <com.github.mikephil.ch ...

  7. echart折线图小知识

    1)在折线图中,有时我们不想让太多折线显示,那么就隐藏,点击legend区域文字再显示. 比如我们要隐藏的折线叫"联盟广告",代码如下 var selected = {}; sel ...

  8. hellocharts的折线图与柱状图的结合之ComboLineColumnChartView

    哼哼,网上找了半天都不全,所以决定自己写一个完整的可以直接贴代码的 test.xml <?xml version="1.0" encoding="utf-8&quo ...

  9. Android自定义折线图

    老师布置了个作业:http://www.cnblogs.com/qingxu/p/5316897.html 作业中提到的 “玩了几天以后,大家发现了一些很有意思的现象,比如黄金点在逐渐地往下移动.” ...

随机推荐

  1. 好用的在线pdf转化器

    https://smallpdf.com/cn/compress-pdf

  2. EF to linq 左连接

    如果连接的数据不存在用 null 表示,则可以左连接查询,但是如果数据类型为 int 则会出错. var ng = (from g in _db.NET_NEWS_GROUP join z in _d ...

  3. 洛谷 P2387 [NOI2014]魔法森林 解题报告

    P2387 [NOI2014]魔法森林 题目描述 为了得到书法大家的真传,小 E 同学下定决心去拜访住在魔法森林中的隐 士.魔法森林可以被看成一个包含 n 个节点 m 条边的无向图,节点标号为 1,2 ...

  4. [USACO Hol10] 臭气弹 图上期望概率dp 高斯

    记住一开始和后来的经过是两个事件因此概率可以大于一 #include<cstdio> #include<iostream> #include<cstdlib> #i ...

  5. D. Sorting the Coins

    Recently, Dima met with Sasha in a philatelic store, and since then they are collecting coins togeth ...

  6. Python爬虫学习笔记之爬取新浪微博

    import requests from urllib.parse import urlencode from pyquery import PyQuery as pq from pymongo im ...

  7. 请把<ul><li>第1行</li><li>第2行</li>...</ul>(ul之间有10个li元素)插入body里面,注意:需要考虑到性能问题。

    var html = [],i;for(i = 0; i < 10; i++){ html.push('<ul><li>第' + (i+1) + '行</li> ...

  8. 修复ios上第三方输入法弹出时输入键盘盖住网页没有进行相应滚动从而盖住表单输入框的问题

    fixIME(); function fixIME(){ scroll_y = 100;  // 如果键盘弹起后 网页window对象的卷起小于此值,说明没有自动卷起 单位:px timer = 50 ...

  9. bzoj1855: [Scoi2010]股票交易 单调队列优化dp ||HDU 3401

    这道题就是典型的单调队列优化dp了 很明显状态转移的方式有三种 1.前一天不买不卖: dp[i][j]=max(dp[i-1][j],dp[i][j]) 2.前i-W-1天买进一些股: dp[i][j ...

  10. bzoj 2819 博弈论

    我们可以把 n为偶数的时候,n*n的棋盘看成若干个不相交的2*1的格子,那么对于每个2*1的格子,如果先手选了其中的一个,另一个人都可以选另一个,所以最后使先手没有可以选的格子,先手必败(这里的先手并 ...