因为需要，所以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扩展插件的更多相关文章

  1. 分享一个灰常好的 dapper 扩展插件: Rainbow

    dapper 是一个效率非常高的orm  框架 ,效率要远远大于 我们大微软的EF .    它只有一个类文件,非常之小.(在 EF 5.0 后 微软已经做了 改进) ps; 由于之前我也没测试过,只 ...

  2. 一个超详细vue无限滚动vue-infinite-scroll插件的配置及使用详解

    开发中总会遇到这种下拉加载的设计方案,Vue实现下拉加载最佳方案自然是使用vue-infinite-scroll来实现.接下来我们一起看下它的配置及使用方式. 首先我们先了解下他的配置参数: v-in ...

  3. 【新手向】一个超简单的jquery.mCustomScrollbar滚动条插件Demo

    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> < ...

  4. 介绍一个基于jQuery的Cookie操作插件

    在网页客户端,我们经常会遇到读取或者设置cookie的情况,如果用纯生的js我们可能会遇到一些兼容性带来的麻烦,这里给大家介绍一个比较实用jquery操作cookie的插件,插件的源代码如下: jQu ...

  5. 介绍一个非常好用的跨平台C++开源框架:openFrameworks

    介绍一个非常好用的跨平台C++开源框架:openFrameworks 简介 首先需要说明的一点是: openFrameworks 设计的初衷不是为计算机专业人士准备的, 而是为艺术专业人士准备的, 就 ...

  6. vs2010(vs2012)好用的扩展插件介绍

    一直以来只使用番茄vs助手(https://www.wholetomato.com/downloads/default.asp)辅助写代码,也都忘了是谁介绍的,不过确实好用. 相比原始的vs,它提供了 ...

  7. 转：介绍一个好用的抓取dump的工具-ProcDump

    介绍一个好用的抓取dump的工具-ProcDump Procdump是一个轻量级的Sysinternal团队开发的命令行工具, 它的主要目的是监控应用程序的CPU异常动向, 并在此异常时生成crash ...

  8. 介绍一个简单的Parser

    我们已经学习了怎样创建一个简单的Monad, MaybeMonad, 并且知道了它如何通过在 Bind函数里封装处理空值的逻辑来移除样板式代码. 正如之前所说的,我们可以在Bind函数中封装更复杂的逻 ...

  9. 硬盘的结构和介绍，硬盘MBR详细介绍（超详细彩图）

    一.物理结构 1.磁道,扇区,柱面和磁头数 硬盘最基本的组成部分是由坚硬金属材料制成的涂以磁性介质的盘片,不同容量硬盘的盘片数不等.每个盘片有两面,都可记录信息.盘片被分成许多扇形的区域,每个区域叫一 ...

随机推荐

  1. Android屏幕适配－资源文件夹命名与匹配规则

    说明:本文档目的为分析android工程res目录下的资源文件夹(drawable,values,layout等)在屏幕适配方面的限定与适配方法. 1. Res下文件夹命名方式 1. 可用的命名属性 ...

  2. 禁用浏览器缓存Ajax请求

    $.ajax({ url: 'url.php', cache: false, success: function(data){ //..... } }); 仅Get有缓存, Post不会缓存

  3. SQL日期操作及只获取日期的方法

    datepart()函数的使用                          * datepart()函数可以方便的取到时期中的各个部分*如日期:2006-07--02 18:15:36.513* ...

  4. Sublime Text3一些安装和使用技巧

    ST3是一款很好的编辑软件,他不仅仅是能编辑前端代码,包括JS,PHP,HTML,CSS等,还能编辑JAVA,C++等常用后代编辑语言.因为本人写前端,本篇文章只介绍ST3的一些前端的技巧. 对于ST ...

  5. STL标准模板库 向量容器（vector）

    向量容器使用动态数组存储.管理对象.因为数组是一个随机访问数据结构,所以可以随机访问向量中的元素.在数组中间或是开始处插入一个元素是费时的,特别是在数组非常大的时候更是如此.然而在数组末端插入元素却很 ...

  6. MSBuild could not create or connect to a task host with runtime "CLR2" and architecture "x86".

    vs2010 and vs2012 are installed on target machine. Build c# project using vs2010, following error oc ...

  7. InstallShield 版本转换

    InstallShield : 如何用低版本 打开高版本的工程   InstallShield 每个版本都有对应的版本号SchemaVersion,如下所示   InstallShield Versi ...

  8. android开发之GenyMotion与intelliJ的配置

    (注意:这是在你的电脑上安装了intelliJ和安卓SDK后才进行的工作,如果没有intelliJ和安卓SDK,请先安装以上两样东西) 号称史上最快乐的模拟器GenyMotion,试一下. 第一步:下 ...

  9. SVN查看提交日志的命令

    Windows下,使用svn客户端查看日志很方便,但是如果在linux下,常规查看日志的命令对于日志记录数比较多的时候,屏幕显示不了,就比较麻烦,后来发现了一个很有用的参数可以限制要查看的记录条数 查 ...

  10. 国内IT技术博客对比

    今天我想就自己对用了国内几个IT行业领先的博客做一个心得体会的总结: 我总共是用了三个,第一个是新浪,第二个是CSDN,第三个是博客园: 当然期间有自己搭建过wordpress,也用了一段时间,但是感 ...