JavaScript：sparkline插件

最新推荐文章于 2024-08-20 09:57:25 发布

qcyfred

最新推荐文章于 2024-08-20 09:57:25 发布

阅读量5.6k

点赞数 1

分类专栏： JAVA EE 文章标签： html javascript jquery

本文链接：https://blog.csdn.net/qcyfred/article/details/73331367

版权

JAVA EE 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

百度百科的介绍。

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>