jquery画小图插件-jquery.sparkline.js

来源：互联网发布：rac数据库启停步骤编辑：程序博客网时间：2024/05/19 04:51

在我们的项目中，需要一些画一些小图，例如一些小的线图，小的柱图等等。

在网上找了下，觉得jquery.sparkline.js还是个不错的东东。

官网链接：jquery.sparkline.js

在sparkline中，我们可以找到基本的线图，柱图，饼图等等，而且它的文档还是不错的，很简单。

它的使用语法是：$(selector).sparkline(values, options);

下面是copy一份他的Doc中的例子：

<html><head>    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>    <script type="text/javascript" src="jquery.sparkline.js"></script>    <script type="text/javascript">    $(function() {       // 我们可以将值直接放入到span中        $('.inlinesparkline').sparkline();         // 给定值        var myvalues = [10,8,5,7,4,4,1];        $('.dynamicsparkline').sparkline(myvalues);// 给定值和参数，可以制定画图的类型以及颜色        $('.dynamicbar').sparkline(myvalues, {type: 'bar', barColor: 'green'} );        // 使用'html' 参数的话是制定数据在标签中，代替一个数组值        $('.inlinebar').sparkline('html', {type: 'bar', barColor: 'red'} );    });    </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><p>Bar chart with dynamic data: <span class="dynamicbar">Loading..</span></p><p>Bar chart with inline data: <span class="inlinebar">1,3,4,5,3,5</span></p></body></html>