jQuery Sparklines （可视化工具）

1 简介

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

2 相关资料

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

3 基础用法

<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>

页面显示：

image.png

语法：

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

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

<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>

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

<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类型、要使用的颜色等。

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

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

<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来覆盖所有后续迷你图的默认选项

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

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

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

4 vue中使用

图片示例：