因为需要，所以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 = {"103":("查","恒"), } 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生成的东东：