Hicharts图表的使用
2024-08-29 20:53:51
Hicharts图表的使用
引用
在4.0之后就不需要jQuery了,z这里是用ajax向后台发送数据
引入js或者CDN，这里采用的是引入js的方式
在Hicarts文件中的index中查看相应的图表，查看页面的代码
<script src="/static/jquery-1.12.4.js"></script>
<script src="/static/plugins/Highcharts-5.0.12/code/highcharts.js"></script>
饼图
饼图最终就是在container中显示
加载完后通过ajax发送POST请求，后台返回数据，ajax中发送数据要携带csrf_token,在这里要注意的是是字符串形式
<div id="container" style="min-width:300px;height:300px"></div>
<script>
$(function () {
$.ajax({
url: '/report.html',
type: "POST",
data: {'csrfmiddlewaretoken': '{{ csrf_token }}'}, {# 注意的是'{{ csrf_token }}'是字符串 #}
dataType: 'JSON',
success: function (arg) {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '运维人员报障占比'
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.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: [{
type: 'pie',
name: '',
data: arg.pie, {# 后台返回的数据 #}
}]
});
})
</script>
后台
def report(request):
if request.permission_code == "LOOK":
if request.method == "GET":
return render(request, 'report.html')
else:
result = models.Order.objects.filter(status=3).values_list('processor__nickname').annotate(
c=Count('id')) # status=3代表处理的是完成的数据
# print(result) # 这里要确nickname是唯一的
result_list = []
for row in result:
result_list.append(row)
response = {
'pie': result_list,
}
return HttpResponse(json.dumps(response)) # json dumps会把元组转化成列表
折线图
把原来的数据改造成时间戳的格式，在hicharts中只支持时间戳
<script>
$(function () {
$.ajax({
url: '/report.html',
type: "POST",
data: {'csrfmiddlewaretoken': '{{ csrf_token }}'}, {# 注意的是'{{ csrf_token }}'是字符串 #}
dataType: 'JSON',
success: function (arg) {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '运维人员报障占比'
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.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: [{
type: 'pie',
name: '',
data: arg.pie, {# 后台返回的数据 #}
}]
});
//折线图
var chart = new Highcharts.Chart('container2', {
title: {
text: '详细报障信息',
x: -20
},
subtitle: {
text: '',
x: -20
},
tooltip: {
valueSuffix: '个'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: arg.zhexian,
});
}
});
})
</script>
模拟折线图的数据
def report(request):
if request.permission_code == "LOOK":
if request.method == "GET":
return render(request, 'report.html')
else:
result = models.Order.objects.filter(status=3).values_list('processor__nickname').annotate(
c=Count('id')) # status=3代表处理的是完成的数据
# print(result) # 这里要确nickname是唯一的
result_list = []
for row in result:
result_list.append(row)
response = {
'pie': result_list,
'zhexian': [
{
'name': 'usa',
'data': [
[150131921790.0657, 55],
[150132922790.0657, 35],
[150133923790.0657, 3],
[150134924790.0657, 3],
[150135925790.0657, 44],
[150136926790.0657, 6],
[150147927790.0657, 88]
]
},
{
'name': 'china',
'data': [
[150131921790.0657, 35],
[150132922790.0657, 35],
[150133923790.0657, 99],
[150134924790.0657, 57],
[150135925790.0657, 444],
[150136926790.0657, 64],
[150147927790.0657, 84]
]
},
]
}
return HttpResponse(json.dumps(response)) # json dumps会把元组转化成列表
把时间转换成时间戳
1 mysql
ymd_list = models.Order.objects.filter(status=3).extra(select={'ymd': "unix_timestamp(date_format(ptime,'%%Y-%%m-%%d'))"}).values('processor_id','processor__nickname','ymd').annotate(c=Count('id'))
平时比较常用的时间、字符串、时间戳之间的互相转换，虽然常用但是几乎每次使用时候都喜欢去搜索一下用法；本文将作为一个笔记，整理一下三者之间的 转换（即：date转字符串、date转时间戳、字符串转date、字符串转时间戳、时间戳转date，时间戳转字符串）用法，方便日后查看；
涉及的函数
date_format(date, format) 函数，MySQL日期格式化函数date_format()
unix_timestamp() 函数
str_to_date(str, format) 函数
from_unixtime(unix_timestamp, format) 函数，MySQL时间戳格式化函数from_unixtime
**时间转字符串**
select date_format(now(), '%Y-%m-%d');
#结果：2016-01-05
**时间转时间戳**
select unix_timestamp(now());
#结果：1452001082
**字符串转时间**
select str_to_date('2016-01-02', '%Y-%m-%d %H');
#结果：2016-01-02 00:00:00
**字符串转时间戳**
select unix_timestamp('2016-01-02');
#结果：1451664000
**时间戳转时间**
select from_unixtime(1451997924);
#结果：2016-01-05 20:45:24
**时间戳转字符串**
select from_unixtime(1451997924,'%Y-%d');
//结果：2016-01-05 20:45:24
MySQL日期格式化（format）取值范围。
| 值 | 含义 | |
|---|---|---|
| 秒 | %S、%s | 两位数字形式的秒（ 00,01, ..., 59） |
| 分 | %I、%i | 两位数字形式的分（ 00,01, ..., 59） |
| 小时 | %H | 24小时制，两位数形式小时（00,01, ...,23） |
| %h | 12小时制，两位数形式小时（00,01, ...,12） | |
| %k | 24小时制，数形式小时（0,1, ...,23） | |
| %l | 12小时制，数形式小时（0,1, ...,12） | |
| %T | 24小时制，时间形式（HH:mm:ss） | |
| %r | 12小时制，时间形式（hh:mm:ss AM 或 PM） | |
| %p | AM上午或PM下午 | |
| 周 | %W | 一周中每一天的名称（Sunday,Monday, ...,Saturday） |
| %a | 一周中每一天名称的缩写（Sun,Mon, ...,Sat） | |
| %w | 以数字形式标识周（0=Sunday,1=Monday, ...,6=Saturday） | |
| %U | 数字表示周数，星期天为周中第一天 | |
| %u | 数字表示周数，星期一为周中第一天 | |
| 天 | %d | 两位数字表示月中天数（01,02, ...,31） |
| %e | 数字表示月中天数（1,2, ...,31） | |
| %D | 英文后缀表示月中天数（1st,2nd,3rd ...） | |
| %j | 以三位数字表示年中天数（001,002, ...,366） | |
| 月 | %M | 英文月名（January,February, ...,December） |
| %b | 英文缩写月名（Jan,Feb, ...,Dec） | |
| %m | 两位数字表示月份（01,02, ...,12） | |
| %c | 数字表示月份（1,2, ...,12） | |
| 年 | %Y | 四位数字表示的年份（2015,2016...） |
| %y | 两位数字表示的年份（15,16...） | |
| 文字输出 | %文字 | 直接输出文字内容 |
参考：
http://www.jb51.net/article/103641.htm
2 sqlite
使用strftime,%%s,这里是转换成时间戳
ymd_list = models.Order.objects.filter(status=3).extra(select={'ymd':"strftime('%%s',strftime('%%Y-%%m-%%d',ptime))"}).values('processor_id','processor__nickname','ymd').annotate(ct=Count('id'))
使用方式：
strftime()函数可以把YYYY-MM-DD HH:MM:SS格式的日期字符串转换成其它形式的字符串。
strftime()的语法是strftime(格式, 日期/时间, 修正符, 修正符, …)
它可以用以下的符号对日期和时间进行格式化：
%d 日期, 01-31
%f 小数形式的秒，SS.SSS
%H 小时, 00-23
%j 算出某一天是该年的第几天，001-366
%m 月份，00-12
%M 分钟, 00-59
%s 从1970年1月1日到现在的秒数
%S 秒, 00-59
%w 星期, 0-6 (0是星期天)
%W 算出某一天属于该年的第几周, 01-53
%Y 年, YYYY
%% 百分号
strftime()的用法举例如下：
select strftime(‘%Y-%m-%d %H:%M:%S’,’now’,’localtime’);
参考：
http://blog.csdn.net/wihatow/article/details/53669166
前端的格式化字符串
从hichats的api手册中查看
xAxis: {
type:'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat("%Y-%m-%d", this.value); //使用的是dateFormat
//return this.value;
}
},
},
折线图最后处理完成
<script>
$(function () {
$.ajax({
url: '/report.html',
type: "POST",
data: {'csrfmiddlewaretoken': '{{ csrf_token }}'}, {# 注意的是'{{ csrf_token }}'是字符串 #}
dataType: 'JSON',
success: function (arg) {
//折线图
var chart = new Highcharts.Chart('container2', {
title: {
text: '每日详细报障信息',
x: -20
},
subtitle: {
text: '',
x: -20
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 1
},
xAxis: {
type:'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat("%Y-%m-%d", this.value);
//return this.value;
}
},
//minTickInterval:24
},
tooltip: {
valueSuffix: '个'
},
series: arg.zhexian,
});
}
});
})
</script>
def report(request):
if request.permission_code == "LOOK":
if request.method == "GET":
return render(request, 'report.html')
else:
result = models.Order.objects.filter(status=3).values_list('processor__nickname').annotate(
c=Count('id')) # status=3代表处理的是完成的数据
# print(result) # 这里要确nickname是唯一的
result_list = []
for row in result:
result_list.append(row)
ymd_list = models.Order.objects.filter(status=3).extra(
select={'ymd': "unix_timestamp(date_format(ptime,'%%Y-%%m-%%d'))"}).values('processor_id',
'processor__nickname',
'ymd').annotate(
ct=Count('id'))
# print(ymd_list) # mysql 把字符串转换成时间戳 需要乘1000
# 下面是构造成折线的数据形式 构造了一个字典，每个字典代表一类
"""
{
1:{name:xx,data:[[]]},
2:{name:xx,data:[[]]},
}
"""
ymd_dict = {}
for row in ymd_list:
key = row['processor_id']
if key in ymd_dict:
ymd_dict[key]['data'].append([float(row['ymd']) * 1000, row['ct']])
else:
ymd_dict[key] = {'name': row['processor__nickname'], 'data': [[float(row['ymd']) * 1000, row['ct']],]}
response = {
'pie': result_list,
'zhexian': list(ymd_dict.values()) # 获取字典的values ymd_dict.values()是一个迭代器 通过list转换成列表
}
return HttpResponse(json.dumps(response)) # json dumps会把元组转化成列表
最新文章
- Oracle导入导出
- 【原】iOS学习之Masonry第三方约束
- <<你的灯亮着吗?>>读书笔记
- Fedora 23安装配置mysql数据库，修改初始密码及登陆
- [html] 有利于seo优化的div+css命名规范
- 练习2-3：十六进制数字字符串转换为等价整型值，字符串允许包含的数字包括：0~9、a~f、A~F、x、X（C程序设计语言 第2版）
- zju3547
- 测试耗电量的工具（Android）
- [转]Why Not Paxos
- jQuery formValidator使用入门
- Slave延迟很大的优化方法总结（MySQL优化）
- linux驱动开发之GCC问题
- 再造轮子之网易彩票-第二季(IOS 篇 by sixleaves)
- Oracle的几种索引
- Java-8ATM
- hive新特性reflect函数介绍
- thinkphp 找数据库某个字段为空的数据，PHP 数据调取 空数据
- hexo配置自己的博客站点
- JS中sort()方法的用法，参数以及排序原理
- View体系第二篇:View滑动