jQuery Sparklines （可视化工具）

1 简介

jQuery Sparklines 是一款基于jquery的轻量级数据可视化工具，它能够将数据以小而简洁的方式展示在网页上。jQuery Sparklines 通常用在有限的空间内展示趋势和模式，或者作为大型图标的补充信息。

2 相关资料

官网地址：omnipotent.net/jquery.spar... 引用文件：jquery.sparkline.js 和jquery.js（版本大于1.4.3）

3 基础用法

xml 复制代码

<head>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="jquery.sparkline.js"></script>
  <script type="text/javascript">
  $(function() {
      /** 当所有内容都加载到页面上时， */
      /* Inline  Sparklines从标记的内容中获取其值 */
      $('.inlinesparkline').sparkline(); 

      /* Sparklines还可以从第一个参数中获取其值传递给sparkline（）函数 */
      var myvalues = [10,8,5,7,4,4,1];
      $('.dynamicsparkline').sparkline(myvalues);

      /* 第二个参数提供了诸如图表类型之类的选项 */
      $('.dynamicbar').sparkline(myvalues, {type: 'bar', barColor: 'green'} );

      /* 使用"html"而不是值数组来传递选项到标记中有数据的sparkline*/
      $('.inlinebar').sparkline('html', {type: 'bar', barColor: 'red'} );
  });
  </script>
</head>
  <body>

      <p>
          内联折线图: <span class="inlinesparkline">1,4,4,7,5,9,10</span>.
      </p>
      <p>
          包含动态数据的折线图: <span class="dynamicsparkline">Loading..</span>
      </p>
      <p>
          动态数据条形图: <span class="dynamicbar">Loading..</span>
      </p>
      <p>
          带内敛数据的条形图: <span class="inlinebar">1,3,4,5,3,5</span>
      </p>
  </body>
</html>

页面显示：

语法：

scss 复制代码

$(selector).sparkline(values, options);

值可以是数字数组，也可以是从所选标记中读取值的"html"：

xml 复制代码

<span class="sparklines">1,2,3,4,5,4,3,2,1</span>
<span id="ticker"">Loading..</span>


<script type="text/javascript">
$('.sparklines').sparkline('html');
$('#ticker').sparkline([1,2,3,4,5,4,3,2,1]);
</script>

标记中提供的值也可以出现在注释中，或作为标记本身的属性：

xml 复制代码

<span class="sparklines"><!-- 1,2,3,4,5,4,3,2,1 --></span>
<span class="sparklines" values="1,2,3,4,5,4,3,2,1"></span>

默认情况下，插件会在标记上查找一个名为"values"的属性，以查找要渲染的值，但您可以通过设置tagValuesAttribute选项来更改这一点。如果您想创建一个复合图，这可能很有用，因为您可以为每个图的值属性使用不同的名称。 Options是一个对象，用于指定要绘制的sparkline类型、要使用的颜色等。

php 复制代码

$('#barchart').sparkline(myvalues, { type:'bar', barColor:'green' });

如有必要，可以将选项作为属性传递到每个标记上。这需要在调用sparklines（）函数时设置enableTagOptions选项，并在一定程度上降低性能（在IE6上更为关键）

xml 复制代码

<span class="sparklines" sparkType="bar" sparkBarColor="green"><!-- 1,2,3,4,3,2,1 --></span>
<span class="sparklines" sparkType="bar" sparkBarColor="red"><!-- 1,2,3,4,3,2,1 --></span>

<script type="text/javascript">
$('.sparklines').sparkline('html', { enableTagOptions: true });
</script>

每个选项都必须以"spark"为前缀，不过这可以通过将tagOptionPrefix选项传递给sparkline（）函数来更改

您还可以通过将值指定给$.fn.sparkline.defaults来覆盖所有后续迷你图的默认选项

例如，要更改下面常见选项中列出的默认线条颜色，可以执行以下操作：

ini 复制代码

$.fn.sparkline.defaults.common.lineColor = 'red';

将"common"替换为"line"、"bar"、"tristate"、"discrete"、"bullet"、"pie"或"box"，以设置特定于这些图表类型的选项。

4 vue中使用

图片示例：

xml 复制代码

<template>
    <div class="probel">
        <div class="info">
            <div v-for="(item,index) in usageArr" :key="index" style="display: flex;align-items: center;">
              <div style="margin: 0 10px;">{{ item.label }}</div>
              <div>
                <div :id="'test'+index" style="width:300px;height:50px;"></div>
                  {{ drawCharts(item.data,index) }}
              </div>
            </div>
          </div>
    </div>
</template>
 
 <script>
import    "@/assets/js/sparkline/jquery.sparkline.js"
import   "@/assets/js/sparkline/jquery.js"
 export default {
     props:{
       systemList:{
         type:Array,
         default:[]
       }
     },
     data(){
       return{
         data:[],
         usage:[4.1,5.1,2.0,2.1,2.0,2.1,4.1,4.0],
         usageArr:[]
       }
     },
     mounted(){
      this.usageArr=[
        {
          label:`1-${this.usage.length/2}`,
          data:this.usage.slice(0,this.usage.length/2)
        },
        {
          label:`${this.usage.length/2+1}-${this.usage.length}`,
          data:this.usage.slice(this.usage.length/2,this.usage.length)
        }
      ]
    },
     methods:{
       
        drawCharts(data,index) {
            this.$nextTick(function () {
            $("#test"+index).sparkline(data, {
					type : 'line',
					fillColor : "#efefef",
					lineColor : '#f08000',
					minSpotColor : 'red',
					maxSpotColor : 'red',
                                        chartRangeClip:true,
					lineWidth : '1.5',
					spotRadius : '2',
					width : '300px',
                                        height: '30px',
				});

            })
    
        }
 
     }
  
 }
 </script>
 
 <style  scoped> 
.info{
  padding:10px;
  height: 160px;

}
 </style>