highcharts PHP中使用
官网
https://www.hcharts.cn/demo/highcharts
html
<div id="container" style="min-width:400px;height:400px"></div>
js
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: '2018年1月浏览器市场份额'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Sogou Explorer',
y: 1.64
}, {
name: 'Opera',
y: 1.6
}, {
name: 'QQ',
y: 1.2
}, {
name: 'Other',
y: 2.61
}]
}]
});
这里的数据通常都是从数据库查询处理出来的。
而它的格式是json的格式。
所以通过ajax获取比较方便一些。
public function get_series_data() {
if ($date = $_POST['date']) {
$sql = 'select count(*) as count ,appid from tf_bag_lucky_log where is_receive=1 and add_time > '.strtotime($date." 00:00").' and add_time < '.strtotime($date ." 23:59").' group by appid order by count desc';
} else {
$sql = 'select count(*) as count ,appid from tf_bag_lucky_log where is_receive=1 group by appid order by count desc';
}
// 统计
$data_list = Db::query($sql);
$series_data = [];
foreach ($data_list as $k=>&$v) {
$xcx_info = Db::name('xcx')->where('appid',$v['appid'])->find();
if ($k == 0) {
$series_data[$k] = [
'name' => $xcx_info['name'],
'y' => $v['count'],
'sliced' => true,
'selected' => true,
];
} else {
$series_data[$k] = [
'name' => $xcx_info['name'],
'y' => $v['count'],
];
}
}
$this->json->setErr(0, '操作成功');
$this->json->setAttr('data', $series_data);
$this->json->Send();
}
js改造
showContainer(date);
function showContainer(date) {
$.ajax({
url: "get_series_data",
data: {
"date" : date,
},
type: "POST",
dataType: "json",
success: function (data) {
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: '金猪中奖来自小程序'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: '占比',
colorByPoint: true,
data: data.data,
// data: [{
// name: 'Chrome',
// y: 1000,
// sliced: true,
// selected: true
// }, {
// name: 'Internet Explorer',
// y: 11.84
// }, {
// name: 'Firefox',
// y: 10.85
// }, {
// name: 'Edge',
// y: 4.67
// }, {
// name: 'Safari',
// y: 4.18
// }, {
// name: 'Other',
// y: 7.05
// }]
}],
});
},
error: function () {
alert("网络错误");
}
});
highcharts 非常灵活,非常方便。ajax,json获取数据,效果刚刚的。
highcharts PHP中使用的更多相关文章
- 如何在 Highcharts 图中当所占百分比为 0 时不显示0%
解决办法其实很简单,将enabled属性改为false即可: dataLabels: { enabled: false } 完成之后的显示如下
- Highcharts 总结
一.Highcharts series属性 1.下面是一个基本曲线图的例子: <html> <head> <meta charset="UTF-8" ...
- highchart 中数据千分位显示为空格而不是逗号的解决方案
thousandsSep: String 一千的分隔符 在highcharts.js 中找到 thousandsSep位置,把"" 改为 ","
- highcharts 时间少8小时问题
Highcharts 中默认开启了UTC(世界标准时间),由于中国所在时区为+8,所以经过 Highcharts 的处理后会减去8个小时. 如果不想使用 UTC,有2种方法可供使用: 1.在使用Hig ...
- 【HighCharts系列教程】三、图表属性——chart
一.chart属性说明 Chart是HighCharts图表中主要属性,包括了图表区域的颜色.线条.高度.宽度.对齐.图表类型等诸多属性,也是HighCharts图表中必须配置的属性之一. 配置cha ...
- 基于ssh框架的highcharts前后台数据交互实例
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.HighCh ...
- 网页图表Highcharts实践教程之图表代码构成
网页图表Highcharts实践教程之图表代码构成 Highcharts第一个实例 下面我们来实现本书的第一个Highcharts实例. [实例1-1]下面来制作北京连续一周最高温度折线图.操作过程如 ...
- highCharts使用记录
公司的架构师让我做一个mockup,要用到highCharts,,以前想接触的,没时间学习,也没有用过,正好工作可以用上了,可以边学边做了. 环境 <script src="./js/ ...
- Highcharts 使用总结
一.Highcharts series属性 1.下面是一个基本曲线图的例子: <html> <head> <meta charset="UTF-8" ...
随机推荐
- M2Eclipse:Maven Eclipse插件无法搜索远程库的解决方法
使用Eclipse安装了maven插件之后,创建Maven工程,发现添加依赖“Add Dependency”的时候无法自动搜索远程库. 如果不能搜索远程库那用这个插件有啥用撒... 查遍了所有的mav ...
- python接口测试中安装whl格式的requests第三方模块
下载 安装 requests第三方模块 下载:http://docs.python-requests.org/en/latest/user/install/#install 我下载是 https:// ...
- 使用POI读取/创建Execl(.xlsx)文件
最近项目中用到了解析Execl表格的功能,在网上百度了一下自己写了一个小Demo.由于项目中使用的是Execl2007,就是后缀为.xlsx的,所以只研究了解析和创建Execl2007的文件,解析Ex ...
- Python + logging 输出到屏幕,将log日志写入文件
日志 日志是跟踪软件运行时所发生的事件的一种方法.软件开发者在代码中调用日志函数,表明发生了特定的事件.事件由描述性消息描述,该描述性消息可以可选地包含可变数据(即,对于事件的每次出现都潜在地不同的数 ...
- 【页面加速】配置Nginx加载ngx_pagespeed模块,加快网站打开的速度
ngx_pagespeed 是一个 Nginx 的扩展模块,可以加速你的网站,减少页面加载时间,它会自动将一些提升web性能的实践应用到网页和相关的资源(CSS.JS和图片)上,无需你修改内容和流程. ...
- Javascript-逻辑运算符非(!)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- cf 459E
cf459E 这题说的是 给定一个n点m条边的带边权的有向图,从中找出一条路径(可以带环),该路径包含的边数最多,并且要求路径中的权值必须严格递增,然后对边进行排序完个后采用dp去解特殊判断一下边权值 ...
- Python: 读文件,写文件
读写文件是最常见的IO操作.Python内置了读写文件的函数. 读写文件前,我们先了解一下,在磁盘上读写文件的功能都是有操作系统提供的,现代操作系统不允许普通的程序直接操作磁盘,所以,读写文件就是请求 ...
- python的subprocess的简单使用和注意事项
subprocess是python在2.4引入的模块, 主要用来替代下面几个模块和方法: os.systemos.spawn*os.popen*popen2.*commands.* 可以参考PEP32 ...
- 很全的linux网络编程技巧
本文转载自:http://www.cnblogs.com/jfyl1573/p/6476607.html 1. LINUX网络编程基础知识 1 1.1. TCP/IP协议概述 1 1.2. OSI参考 ...