码迷,mamicode.com
首页 > 其他好文 > 详细

介绍一个超好用的HICHARTS扩展插件

时间:2015-12-18 09:15:38      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:

因为需要,所以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生成的东东:

技术分享

 

介绍一个超好用的HICHARTS扩展插件

标签:

原文地址:http://www.cnblogs.com/aguncn/p/5056020.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!