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" ...
随机推荐
- 在Win7系统下, 使用VS2015 打开带有日文注释程序出现乱码的解决方案
在Win7系统下, 使用VS2015 打开带有日文注释程序出现乱码的解决方案 下载: apploc.msi (下载地址:http://microsoft-applocale.software.info ...
- python接口自动化-token参数关联登录(二)
原文地址https://www.cnblogs.com/yoyoketang/p/9098096.html 原文地址https://www.cnblogs.com/yoyoketang/p/68866 ...
- cmd重启服务器,有时不想去机房,并且远程桌面连接登录不上了
有时不想去机房,并且远程桌面连接登录不上了,需要远程重启服务器的,这时可以使用命令行方式远程重启.在cmd命令行状态下输入:shutdown -r -m \\192.168.1.10 -t 0 -f ...
- 集合框架—常用的map集合
1.Collections.synchronizedMap() 实现上在调用map所有方法时,都对整个map进行同步,而ConcurrentHashMap的实现却更加精细,它对map中的所有桶加了锁. ...
- asp.net onclientclick事件刷新页面问题解决
做网页经常要和JavaScript打交道,经常要用JavaScript做一些客户端的验证,但是如果我们的按钮用的是HTML控件的话,验证通过后无法调用后台代码,如果用服务器端控件,验证不通过有要刷 ...
- http://xx.xxx.xxx.xx:8080/把路径设置成http服务访问的形式
1.官网下载python安装包(eg:python-3.6.3-embed-win32),并解压文件 2.配置环境变量 3.cmd里查看python版本并设置服务路径 4. 访问查看
- 测试开发-web测试要点
参数输入考虑 参数数值包含1个.多个.很多个.null.参数值前后包含空格的2种情况 数字类型:正数.负数.0.0.0.+0.0.-0.0.指数.对数.分数.小数.复数.科学计数法的测试,全角的数 ...
- oracle中验证身份证是否合法的函数脚本
--创建函数 入参是身份证 返回1 合法 0不合法 CREATE OR REPLACE FUNCTION fn_checkidcard (p_idcard IN VARCHAR2) RETURN ...
- bzoj1698 / P1606 [USACO07FEB]白银莲花池Lilypad Pond
P1606 [USACO07FEB]白银莲花池Lilypad Pond 转化为最短路求解 放置莲花的方法如果直接算会有重复情况. 于是我们可以先预处理和已有莲花之间直接互相可达的点,将它们连边(对,忽 ...
- 20145305 《网络对抗》注入Shellcode并执行&Return-to-libc 攻击实验
注入Shellcode并执行 实践指导书 实践过程及结果截图 准备一段Shellcode 我这次实践和老师用的是同一个 设置环境 构造要注入的payload 我决定将返回地址改为0xffffd3a0 ...