JavaScript：sparkline插件

来源：互联网发布：tower是什么软件编辑：程序博客网时间：2024/06/05 19:31

百度百科的介绍。

sparkline是一类信息体积小和数据密度高的图表。

目前它被用作一些测量，相关的变化的信息呈现的方式，如平均温度，股市交投活跃。

sparkline常常以一组多条的形式出现在柱状图，折线图当中。

链接：Sparkline官网

使用步骤：

1. 下载几个js文件。jquery-1.7.2.min.js，jquery.sparkline.js。版本应该有更高的了。

2. 引入html文件。

3. 写js代码……

.xxx 是类选择器。

#xxx 是id选择器。

以下代码是从网上粘过来的。

<html>  <head>      <script type="text/javascript" src="jquery-1.7.2.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>

如果要调整sparkline的宽和高，可以指定样式。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <title>jQuery Sparklines Simple Example</title>    <meta http-equiv="content-type" content="text/html; charset=utf-8" />    <style type="text/css">        body { font-family: helvetica, arial, san-serif; background-color: #fff; text-align: left; font-size: 0.9em; margin: 10em }    </style>    <script type="text/javascript" src="./jquery-1.7.2.min.js"></script>    <script type="text/javascript" src="./jquery.sparkline.js"></script>    <script type="text/javascript">    $(function() {   var myvalues = [10,8,5,7,8,8,5,4,8,5,9];   $(".sparkline").sparkline(myvalues,      {type: 'line',    width: '120',height: '50'});    });    </script></head><body><span class="sparkline"></span></body></html>

阅读全文

0 0