介绍一个超好用的HICHARTS扩展插件
因为需要,所以HIGHCHARTS了解一下是很有必要的。
但原始应用确实效率不行。
刚好,现在有个需求是从一系列的JSON里抽出表格数据,再显示图形。
jquery.highchartsTable.js怕个是极好的了。。基本文档URL:http://www.hcharts.cn/p/highchartTable.php
代码,
#!/usr/bin/python
#coding:utf-8
import datetime
import json
import sys
str_today = datetime.datetime.now().strftime('-%Y-%m-%d')
func_dict = {":("查","恒"),
}
html_header = '''
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--<meta http-equiv="refresh" content="60">-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HighCharts</title>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<script src="js/jquery.highchartsTable.js"></script>
<!--<script src="js/themes/dark-unica.js" type="text/javascript"></script> -->
<script>
$(document).ready(function() {
$("table.highchart").highchartTable();
});
</script>
<style type="text/css">
.table
{
width: 100%;
padding: 0;
margin: 0;
}
th {
font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA no-repeat;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size:14px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
</style>
</head>
<body>
<header>
<div align = "center">趋势数据展示页面</div>
<p></p>
</header>
'''
html_footer = '''
<footer>
<p></p>
<div align = "center">X@2015</div>
<p></p>
</footer>
</body>
</html>
'''
'''
with open('measurements.json', 'w') as f:
f.write(json.dumps(str_json,ensure_ascii=False,indent=2))
'''
# 将字典排序
def sort_dict(dict_item):
sort_dict_item = sorted(dict_item.iteritems(),key=lambda t:t[0],reverse=False)
return sort_dict_item
def gen_content():
json_file = "json/data" + str_today + ".json"
with open(json_file) as f:
data = f.read()
# print data
json_data = json.loads(data)
dict_len = len(json_data)
sort_json_data = sort_dict(json_data)
return sort_json_data
def zip_pkg():
pass
def send_mail():
pass
def gen_html():
html_filename = "index" + str_today + ".html"
html_content = ''
content_dict = gen_content()
# 带循环次数,方便定位container
for i, item_number in enumerate(content_dict):
html_content += '''<div class="container{c_number}" style="width: 80%; height:400px;margin:0 auto;"></div>
<div align="center" ><table class="highchart" data-graph-container=".container{c_number}"
data-graph-subtitle-text="Data from Zabbix"
data-graph-type="line" style="width: 80%">
<caption>{title}<caption>
<thead><tr>'''.format(c_number = i+1, title=item_number[1][0]['title'].encode('utf-8'))
# 定位各个数据结构
for i, item_head in enumerate(item_number[1][1]['head']):
if i == 0:
html_content += '''<th >{item_head}</th>'''.format(item_head=item_head.encode('utf-8'))
else:
# 此处预留显示系统功能字段
# html_content += '''<th>{item_func}<br>{item_code}|{item_sys}</th>'''.format(
# item_func=func_dict[item_head][0],item_code=item_head,item_sys=func_dict[item_head][1])
html_content += '''<th>{item_func}{item_code}</th>'''.format(
item_func=func_dict[item_head][0], item_code=item_head)
html_content += '</tr></thead><tbody>'
for item_content in item_number[1][2]['content']:
html_content += '<tr>'
for item_end in item_content:
if isinstance(item_end,(int,float)):
html_content += '''<td>{item_end}</td>'''.format(item_end=item_end)
else:
html_content += '''<td>{item_end}</td>'''.format(item_end=item_end.encode('utf-8'))
pass
html_content += '</tr>'
html_content += "</tbody></table><hr></div>"
# print html_content
html_total = html_header + html_content + html_footer
with open(html_filename, 'w') as f:
f.write(html_total)
def main():
gen_html()
zip_pkg()
send_mail()
if __name__ == '__main__':
main()
print 'finished!'
HTML生成的东东:

介绍一个超好用的HICHARTS扩展插件的更多相关文章
- 分享一个灰常好的 dapper 扩展插件: Rainbow
dapper 是一个效率非常高的orm 框架 ,效率要远远大于 我们大微软的EF . 它只有一个类文件,非常之小.(在 EF 5.0 后 微软已经做了 改进) ps; 由于之前我也没测试过,只 ...
- 一个超详细vue无限滚动vue-infinite-scroll插件的配置及使用详解
开发中总会遇到这种下拉加载的设计方案,Vue实现下拉加载最佳方案自然是使用vue-infinite-scroll来实现.接下来我们一起看下它的配置及使用方式. 首先我们先了解下他的配置参数: v-in ...
- 【新手向】一个超简单的jquery.mCustomScrollbar滚动条插件Demo
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> < ...
- 介绍一个基于jQuery的Cookie操作插件
在网页客户端,我们经常会遇到读取或者设置cookie的情况,如果用纯生的js我们可能会遇到一些兼容性带来的麻烦,这里给大家介绍一个比较实用jquery操作cookie的插件,插件的源代码如下: jQu ...
- 介绍一个非常好用的跨平台C++开源框架:openFrameworks
介绍一个非常好用的跨平台C++开源框架:openFrameworks 简介 首先需要说明的一点是: openFrameworks 设计的初衷不是为计算机专业人士准备的, 而是为艺术专业人士准备的, 就 ...
- vs2010(vs2012)好用的扩展插件介绍
一直以来只使用番茄vs助手(https://www.wholetomato.com/downloads/default.asp)辅助写代码,也都忘了是谁介绍的,不过确实好用. 相比原始的vs,它提供了 ...
- 转:介绍一个好用的抓取dump的工具-ProcDump
介绍一个好用的抓取dump的工具-ProcDump Procdump是一个轻量级的Sysinternal团队开发的命令行工具, 它的主要目的是监控应用程序的CPU异常动向, 并在此异常时生成crash ...
- 介绍一个简单的Parser
我们已经学习了怎样创建一个简单的Monad, MaybeMonad, 并且知道了它如何通过在 Bind函数里封装处理空值的逻辑来移除样板式代码. 正如之前所说的,我们可以在Bind函数中封装更复杂的逻 ...
- 硬盘的结构和介绍,硬盘MBR详细介绍(超详细彩图)
一.物理结构 1.磁道,扇区,柱面和磁头数 硬盘最基本的组成部分是由坚硬金属材料制成的涂以磁性介质的盘片,不同容量硬盘的盘片数不等.每个盘片有两面,都可记录信息.盘片被分成许多扇形的区域,每个区域叫一 ...
随机推荐
- Mysql数据库的索引原理
写在前面:索引对查询的速度有着至关重要的影响,理解索引也是进行数据库性能调优的起点.考虑如下情况,假设数据库中一个表有10^6条记录,DBMS的页面大小为4K,并存储100条记录.如果没有索引,查询将 ...
- Android通过tcpdump抓包(wifi, 2g, 3g都可以)
http://blog.csdn.net/deng529828/article/details/20646197 1. 手机要有root权限 2. 下载tcpdump http://www.str ...
- Drbd 安装配置
一.Drbd介绍 Distributed Replicated Block Device(DRBD)是基于块设备在不同的高可用服务器之间同步和镜像数据的软件,通过它可以实现在网络中两台服务器这间基于块 ...
- JAVA调用WebService总结
一.wximport自动生成代码 wsimport -keep -p com.test.client http://localhost:8080/test/services/TestService?w ...
- Loadrunner测试json接口
1. loadrunner + json说明 使用lr测试json接口,向服务端发送json格式请求,接收处理返回响应数据. 主要用到函数: 1)web_custon_request 2)web_re ...
- iOS获取webview高度
int webHeight = [[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.scr ...
- JavaScript学习笔记(3)——JavaScript与HTML的组合方式
一.JavaScript可以写在HTML页面内部, 可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中. 通常的做法是把函数放入 <h ...
- C++ 书籍
C++ 书籍 一.<深度探索C++对象模型/Inside the C++ Object Model> 二.
- 24种设计模式--中介者模式【Mediator Pattern】
各位好,大家都是来自五湖四海,都要生存,于是都找了个靠山——公司,给你发薪水的地方,那公司就要想尽办法盈利赚钱,盈利方法则不尽相同,但是作为公司都有相同三个环节:采购.销售和库存,这个怎么说呢?比如一 ...
- PHPExcel说明
下面是总结的几个使用方法include 'PHPExcel.php';include 'PHPExcel/Writer/Excel2007.php';//或者include 'PHPExcel/Wri ...