6款jQuery图表插件[译]
来源:bbon 发布时间:2009-06-01 10:34:00
随着jQuery、Mootools、prototype等知名的JavaScript框架的应用变的越来越强大,浏览器对最新版本CSS属性的支持,除去页面中Flash的应用之外,图表应用变的越来越广泛实用。本文为你整理了6个实用性强的jQuery图表插件,概述了它们各自的功用和优势。
1,Flot
从交互性的层面来说,jQuery实现的 Flot图表和Flash实现的图表效果已经是非常的接近。图表输出效果相当的流畅光滑,注重视觉效果。你也可以和data points数据节点配合使用,当鼠标hover到某个数据节点时,会得到对应节点的数值说明内容的反馈信息。
如上图所示,你也可以选择图表的一部分内容,获得这些特殊区域的数据;同时,你还可以对数据节点进行放大处理。
优势: 线条、节点、区域填充、柱状图以及以上功能的组合。
2,Sparklines
Sparklines 是我最欣赏的微型图表实现工具。真正实现了仪表风格的图表样式(登录到你的 Google Analytics 就知道什么样子了)。另外一个好的功用就是,可以帮助在所有的图表插件中实现 self-refresh 的能力。
优势: 楔形、线条、柱状图以及以上功能的组合。
3, Google Charts Plugin
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,
0.21
jQuery Chart 0.21看起来似乎并不是一个特别好看的图表插件。实现的也是基本的功能,但它的使用却是非常灵活、易用的。
实例(添加值给图表)
.chartAdd({”label”:”Leads”,”type”:”Line”,”color”:”#008800″,”values”:["100","124","222","44","123","23","99"]})
优势: 区块、线条、柱状图以及以上功能的组合。
5,jQchart
jQchart 可以实现在图表中的拖拽动作和动画转换功能。如果你的CSS应用够好,可以实现外观不错的图表效果。与其他插件相比,jQchart的实现功能似乎有些单一。
优势: 柱状图、线条
6,TufteGraph
Tuftegraph 生成的柱状图漂亮精致,而且可以实现层叠效果。相比Flot 的精致小巧,Tuftegraph也可以实现自身的减压,变得更加轻便。
优势: 柱状图、重叠柱状图。
以上6中同样通过jQuery实现的图表效果,却各有各的优势和局限,你可以根据自身项目的需求,有选择性地使用,我们的原则就是:简单、实用、兼容性强。
猜你喜欢
- 一、安装库首先我们需要安装PIL和pytesseract库。PIL:(Python Imaging Library)是Python平台上的图
- 大家都知道在python中,一切皆对象,变量也不再具有类型,变量仅仅是对象的一个引用,我们通常用变量来测类型,通常测得就是被这个变量引用得对
- VUE-ElementUI 时间区间选择器官方文档中使用picker-options属性来限制可选择的日期一、单个输入框<el-dat
- 一、背景实际工作中会有一些耗时的异步任务需要使用定时调度,比如发送邮件,拉取数据,执行定时脚本通过celery 实现调度主要思想是 通过引入
- 首先,与其他语言不同,JS的效率很大程度是取决于JS engine的效率。除了引擎实现的优劣外,引擎自己也会为一些特殊的代码模式采取一些优化
- 目录自动化测试框架1.基础层(通用层)2.功能层(页面层)3.业务层4.用例层4层框架对应的项目工程总结自动化测试框架项目自动化测试框架设计
- 一、变量的定义 mysql中变量定义用declare来定义一局部变量,该变量的使用范围只能在begin...end 块中使用,变量必须定义在
- 当你在浏览网页时,看到一个很漂亮的特效,你查看源代码时看到的是一队乱码,那多扫兴呀!根据本人的研究,总结出了三种解密方法,与大家分享!!方法
- '*************************************************'函数名:getMaxO
- 暂且放下你的编程语言来瞻仰下我所见过的最棒的标准库。为项目选择编程语言和挑选你最爱的球队不一样。应该从实用主义出发,根据特定的工作选择合适的
- 之前介绍过通过cookie 绕过验证码实现登录的方法。这里并不多余,会增加分析和另外一种方法实现登录。1、思路介绍 1.1、直接看
- 一、需求golang默认的结构体json转码出来,都是根据字段名生成的大写驼峰格式,但是一般我们最常用的json格式是小写驼峰或者小写下划线
- 前言看到这篇文章我就默认你已经在你的电脑上使用 pipenv搭建好了虚拟环境并且设置好了开发环境(pycharm)。如果没有,请参照这篇文章
- 前言本文用Python实例阐述了一些关于进程、线程和协程的概念,由于水平有限,难免出现错漏,敬请批评改正。前提条件熟悉Python基本语法熟
- 如果进入了shell交互窗口,python的退出方式只能够用函数不能够用命令,这有时候让人感觉到很不习惯。因为函数会比命令多一个括号的输入,
- 本文实例讲述了python判断字符串是否包含子字符串的方法。分享给大家供大家参考。具体如下:python的string对象没有contain
- 这样就将你所有微信好友的信息都返回了,我们并不需要这么多的信息,我们选取一些信息存储到 csv 文件中注意:返回的信息是一个 list,其中
- python的try语句有两种风格一是处理异常(try/except/else)二是无论是否发生异常都将执行最后的代码(try/finall
- 掌握一些技巧,可尽量提高Python程序性能,也可以避免不必要的资源浪费。1、使用局部变量尽量使用局部变量代替全局变量:便于维护,提高性能并
- 我们在做深度学习的过程中,经常面临图片样本不足、不平衡的情况,在本文中,作者结合实际工作经验,通过图像的移动、缩放、旋转、增加噪声等图像变换