• 6个jQuery图表Web应用扩展


    随着jQuery、Mootools、prototype等知名的JavaScript框架的应用变的越来越强大,浏览器对最新版本CSS属性的支 持,除去页面中Flash的应用之外,图表应用变的越来越广泛实用。本文为你整理了6个实用性强的jQuery图表插件,概述了它们各自的功用和优势。

    1. Flot

    Flot_1.png
    从交互性的层面来 说,jQuery实现的 Flot图 表和Flash实现的图表效果已经是非常的接近。图表输出效果相当的流畅光滑,注重视觉效果。你也可以和data points数据节点配合使用,当鼠标hover到某个数据节点时,会得到对应节点的数值说明内容的反馈信息。

    Flot_2.png
    如上图所示,你也可以选择图 表的一部分内容,获得这些特殊区域的数据;同时,你还可以对数据节点进行放大处理。

    优势: 线条、节点、区域填充、柱状图以及以上功能的组合。

    2. Sparklines

    Sparklines_1.png
    Sparklines 是我最欣赏的微型图表实现工具。真正实现了仪表风格的图表样式(登录到你的 Google Analytics 就知道什么样子了)。另外一个好的功用就是,可以帮助在所有的图表插件中实现 self-refresh 的能力。

    优势: 楔形、线条、柱状图以及以上功能的组合。

    3. Google Charts Plugin

    GoogleChartsPlugin_1.png
    Google Charts plugin 是通过jQuery插件将Google Charts API应用到Web程序的一个非常简单的方式。同时,这个 API 本身也是非常的简单易用 。允许使用简单的jQuery调用,设置你自己需要的参数:
    .attr(<span>'src'</span>, api.make(<span><strong>{</strong></span>data : [[<span>153</span>, <span>60</span>, <span>52</span>], [<span>113</span>, <span>70</span>, <span>60</span>], [<span>120</span>, <span>80</span>, <span>40</span>]]<strong>}</strong>))

    优 势: 柱状图、重叠柱状图、线条、楔形、3D楔形。

    4. jQuery Chart

    jQueryChart.png
    jQuery Chart 看起来似乎并不是一个特别好看的图表插件。实现的也是基本的功能,但它的使用却是非常灵活、易用的。

    实例(添加值给图表)
    .chartAdd({"label":"Leads","type":"Line","color":"#008800″,"values":["100","124","222","44","123","23","99"]})

    优势: 区块、线条、柱状图以及以上功能的组合。

    5. jQchart

    jQchart.png
    jQchart 可以实现在图表中的拖拽动作和动画转换功能。如果你的CSS应用够好,可以实现外观不错的图表效果。与其他插件相比,jQchart的实现功能似乎有些单 一。

    优势: 柱状图、线条

    6. TufteGraph

    TufteGraph.png
    Tuftegraph 生成的柱状图漂亮精致,而且可以实现层叠效果。相比Flot 的精致小巧,Tuftegraph也可以实现自身的减压,变得更加轻便。

    优 势: 柱状图、重叠柱状图。

    以上6中同样通过jQuery实现的图表效果,却各有各的优势和局限,你可以根据自身项目的需求,有选 择性地使用,我们的原则就是:简单、实用、兼容性强。

  • 相关阅读:
    mysql事务隔离级别回顾
    单链表倒数第K个节点的查找和显示
    mysql 行转列,对列的分组求和,对行求和
    获取分组后统计数量最多的纪录;limit用法;sql执行顺序
    You can't specify target table 'e' for update in FROM clause
    mysql 行转列 (结果集以坐标显示)
    springmvc执行流程 源码分析
    jdk动态代理 案例
    项目日志log管理
    apache和tomcat的区别
  • 原文地址:https://www.cnblogs.com/top5/p/1652635.html
Copyright © 2020-2023  润新知