在写后台统计时,使用highcharts 作为数据视图化的工具

PHP端 拼接数据

1 首先分组查询出来数据

  

2 然后拼接出来想要的数据格式

$c_x ='';
foreach ($courierGroup as $key=>$val){
$c_x .= "['".$val['month']."-".$val['date']."',".$val['num']."],";
}

3 在页面渲染中是用highcharts

 //用户每日注册
$('#user').highcharts({
chart: {
type: 'line'
},
title: {
text: '每日注册人数'
},
subtitle: {
text: ''
},
xAxis: {
type:'category'
},
yAxis: {
title: {
text: '人数(人)'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true // 开启数据标签
},
enableMouseTracking: true // 关闭鼠标跟踪,对应的提示框、点击事件会失效
}
},
series: [{
name: '注册人数',
data: [
{$c_x}
]
}]
});

highcharts使用-拼接数据的更多相关文章

  1. Highcharts使用表格数据绘制图表

    Highcharts使用表格数据绘制图表 在Highcharts中,同意用户使用网页中现有的表格数据作为数据来源,然后依据该数据来源绘制图表.对于一个典型的HTML表格.当中,第一列的数据会作为x轴刻 ...

  2. highcharts异步获取数据

    页面异步代码 $(function () { var chart_validatestatics; $(document).ready(function () { var options_valida ...

  3. highcharts动态获取数据生成图表问题

    动态获取数据说白点就是从后台传值到前台,前台把这些值赋值给x轴与y轴(这里指的是你X轴与Y轴都是变化的数据,如果你的X轴是固定的,像时间等等的那就另说).  柱状图的动态传值: //获取后台数据 va ...

  4. 使用HighCharts实现实时数据展示

    在众多的工业控制系统领域常常会实时采集现场的温度.压力.扭矩等数据,这些数据对于监控人员进行现场态势感知.进行未来趋势预测具有重大指导价值.工程控制人员如果只是阅读海量的数据报表,对于现场整个态势的掌 ...

  5. Highcharts获取json数据展现pie饼图

    实际上很多时候图表展现的数据都是从服务器端获取,现在来做一个简单的异步获取json数据的例子. 服务器端用Servlet3.0实现,JSP页面通过jquery异步请求json数据提供给Highchar ...

  6. excel拼接数据宏

    将sheet2的A2 和 G2   加上  sheet5的A2和B2合一起生成新的sheet--就是将两个sheet的指定列前后拼接一起作为一个新的sheet Sub addwork() Sheets ...

  7. 160422、Highcharts后台获取数据

    而我这次做的是趋势图,涉及到动态刷新,做的过程还是花了一番功夫的,也补充和巩固了一点js的知识,为了纪念,把过程记录一下: 首先,是引入HIghcharts绘图相关的js文件和jQuery.js. 接 ...

  8. Mysql数据处理/行转列/列转行/分割/拼接/数据复制汇总

    mysql数据处理记录(使用的 Workbench) 生成随机数 逗号或分号拼接的字符串分割成多行 多行数据转化成用逗号拼接的字符串 将A表的数据添加到B表 一.生成随机数 生成18位:(19位就加颗 ...

  9. highcharts 饼图显示数据比例如何保留二位小数

    var NewPerCent=parseFloat(NewPerCent.toString()).toFixed(2);return '<b>'+ this.point.name +'&l ...

随机推荐

  1. 原创!!jquery简单tips和dialog

    <!------------------html代码-----------------------> <!DOCTYPE html><html><head&g ...

  2. 【Javascript】在文本框光标处插入文字并定位光标 (转)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. java设计模式-----2、工厂方法模式

    再看工厂方法模式之前先看看简单工厂模式 工厂方法模式(FACTORY METHOD)同样属于一种常用的对象创建型设计模式,又称为多态工厂模式,此模式的核心精神是封装类中不变的部分,提取其中个性化善变的 ...

  4. Visual Studio 2017 发布 15.5 版本,百度网盘离线安装包下载。

    Visual Studio 2017 15.5 版本已正式发布,同时发布的还有 Visual Studio for Mac 7.3 .此次更新包含主要性能改进,新特性以及 bug 修复.发行说明中文版 ...

  5. jsp中的开头的作用

    <%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1&q ...

  6. MysqL主从复制_模式之GTID复制

    基于GTID的复制是从Mysql5.6开始支持的一种新的复制方式,此方式与传统基于日志的方式存在很大的差异,在原来的基于日志的复制中,从服务器连接到主服务器并告诉主服务器要从哪个二进制日志的偏移量开始 ...

  7. 沉淀,再出发——安装windows10和ubuntu kylin15.04双系统心得体会

    安装windows10和ubuntu kylin15.04双系统心得体会 一.安装次序      很简单,两种安装次序,"先安装windows后安装linux:先安装linux后安装wind ...

  8. DAY2-JAVA

    2018-1-28学习笔记 1.在开发中定义类.方法时也可以先添加文档注释,再用javadoc工具生成自己的API文档.Java文档注释和java工具使用. 2.掌握查阅java JDK和API文档. ...

  9. Web开发框架推导

    本文欲回答这样一个问题:在 「特定环境 」下,如何规划Web开发框架,使其能满足 「期望 」? 假设我们的「特定环境 」如下: 技术层面 使用Java语言进行开发 通过Maven构建 基于Spring ...

  10. ubuntu14.04 安装Jenkins

    wget -q -O - http://pkg.jenkins-ci.org/debian/jenkins-ci.org.key | sudo apt-key add - sudo sh -c 'ec ...