介绍一个超好用的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.磁道,扇区,柱面和磁头数 硬盘最基本的组成部分是由坚硬金属材料制成的涂以磁性介质的盘片,不同容量硬盘的盘片数不等.每个盘片有两面,都可记录信息.盘片被分成许多扇形的区域,每个区域叫一 ...
随机推荐
- nvl()函数
Oracle里面的nvl()函数 Nvl(字段名,0):如果你某个字段为空,但是你想让这个字段显示0,nvl(字段名,0) ,就是当你选择出来的时候,这个字段虽然为空,但是显示的是0,当然这个0也可以 ...
- spark下统计单词频次
写了一个简单的语句,还没有优化: scala> sc. | textFile("/etc/profile"). | flatMap((s:String)=>s.spli ...
- spring beans的写入工具——spring-beans-writer
spring-beans-writer是我曾经为动态生成spring beans配置文件做的一个写入工具,托管地址: https://github.com/bluejoe2008/spring-bea ...
- java程序执行顺序
原来自己一直都没弄明白Java程序的执行顺序问题,今天,自己写了个测试,果然与自己考虑的有差距 测试代码: 一个父类Animal 一个子类Dog 测试类Test 运行结果: 所以执行顺序是: 父类An ...
- Android更改桌面应用程序launcher的两种方式
http://blog.csdn.net/mdx20072419/article/details/9632779/ launcher,也就是android的桌面应用程序.下图是我正在使用的魅族手机的l ...
- ###《High-level event recognition in unconstrained videos》
Author: Yu-Gang Jiang, Shih-Fu Chang 事件检测的目标就是自动识别给定视频序列中的感兴趣事件.进行视频事件检测通常很困难,特别是在网络中非限制的视频.在非限制情况下, ...
- 【html】【10】div布局[div水平垂直居中]
必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0.可以按照需要设置 ...
- 规则引擎ILog和CKRule的对比
IBM™ WebSphere™ ILOG是业界最有影响力的业务规则商业软件,它提供了最好的业务规则管理系统,在Java领域更是有广泛的成功案例.网上关于ILOG的技术资料非常多,大家都比较了解ILOG ...
- 九度OJ 1402 特殊的数 -- 位操作
题目地址:http://ac.jobdu.com/problem.php?pid=1402 题目描述: 现在有n个数,其中有一些出现了一次,一些出现了两次,一些出现了很多次.现在要求你找出那些只出现一 ...
- 工厂方法(Factory Pattern)
工厂方法模式定义:定义了一个创建对象的接口,但由子类决定要实例化的类是哪一个.工厂方法让类把实例化推迟到子类.(注:“决定”不是指模式允许子类本身在运行时做决定,而是指在编写创建者类时,不需要知道实际 ...