• Visualize: 一个jQuery可视化插件


    数据可视化对于HTML来说,一直都是一个棘手的问题。Scott Jehl为我们准备了这样的一个插件-"Visualize",使用了HTML 5 Canvas。该插件提供了一个简单的$('table').visualize() 方法,从HTML table中生成bar, line, area以及pie charts,并且允许您使用各种不同的方式来配置。

      你可以创造一个标准的table如下:

    <table>  
    <caption>2009 Individual Sales by Category</caption>  
    <thead>  
    <tr>  
    <td></td>  
    <th>food</th>  
    <th>auto</th>  
    <th>household</th>  
    <th>furniture</th>  
    <th>kitchen</th>  
    <th>bath</th>  
    </tr>  
    </thead>  
    <tbody>  
    <tr>  
    <th>Mary</th>  
    <td>150</td>  
    <td>160</td>  
    <td>40</td>  
    <td>120</td>  
    <td>30</td>  
    <td>70</td>  
    </tr>  
    <tr>  
    <th>Tom</th>  
    <td>3</td>  
    <td>40</td>  
    <td>30</td>  
    <td>45</td>  
    <td>35</td>  
    <td>49</td>  
    </tr>  
    ...repetitive rows removed for brevity.  
    </tbody>  
    </table>  

    以下是一 个演示,你可以改变表格中的数据,然后可视化图形会跟随你的数值改变:
    Demo:http://www.filamentgroup.com /examples/charting_v2/ 

    使用visualize后的图形如下,很漂亮: 

    点 击下载:http://www.filamentgroup.com/examples/charting_v2 /visualize.filamentgroup.zip 

    点击查看更多详 情:http://www.filamentgroup.com/lab /jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_c

  • 相关阅读:
    chrome 浏览器设置useragent为微信浏览器
    js 16进制颜色和RGBA颜色互转
    json parse 大数精度丢失
    taro 小程序react 搜索高亮关键字
    sourcetree 配置 openssh
    一次性卸载npm本地包(node_modules)依赖
    微信小程序订阅消息开发总结
    微信小程序请求设置权限
    taro
    浅谈JS之AJAX
  • 原文地址:https://www.cnblogs.com/danghuijian/p/4400300.html
Copyright © 2020-2023  润新知