jQuery波谱可视化图表插件 – jQuery Sparklines

当前位置: 菠菜博 > 前端开发 > 文章正文

jQuery波谱可视化图表插件 – jQuery Sparklines

时间: 2009-03-12 / 分类: 前端开发 / 浏览次数: 2,253 次 / 2个评论发表评论

jQuery Sparklines是一个优秀 jQuery 插件，可以帮助用户在页面种生成静态或动态波谱图表效果。你可以在浏览器种使用HTML或者javascript调用实现。插件兼容目前绝大多数流行的浏览器：Firefox 2+, Safari 3+, Opera 9 and Internet Explorer 6 & 7。

下图种的每个实例都是通过调用一行HTMl或JavaScript生成，使用简单。

使用方法

要在你的页面种实现波谱图表效果，你需要预先做的事情有：

在页面的<head></head>中调用jQuery javascript library，至少要在V1.2+；
在页面的<head></head>中调用jquery.sparkline.js插件脚本；
在需要显示波谱图表的地方，使用一个HTML标签来调用显示效果；

下面是一个简单的代码实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

    <script type="text/javascript" src="jquery-1.2.6.js"></script>
    <script type="text/javascript" src="jquery.sparkline.js"></script>

    <script type="text/javascript">
    $(function() {
        $('.inlinesparkline').sparkline();
        $('.dynamicsparkline').sparkline([10,8,5,7,4,4,1]); 
    });
    </script>
</head>
<body>

<p>
Inline Sparkline: <span class="inlinesparkline">1,4,4,7,5,9,10</span>.
</p>
<p>
Sparkline with dynamic data: <span class="dynamicsparkline">Loading..</span>
</p>

</body>
</html>

jQuery Sparklines的详细文档：http://www.omnipotent.net/jquery.sparkline/#docs

jQuery Sparklines插件下载地址：http://www.omnipotent.net/jquery.sparkline/#download

上一篇: 7种CSS圆角框解决方案

下一篇: 9个前端开发必备的浏览器插件/在线工具