JQuery Sparkline 说明文档

JQuery. Sparkline线状图插件

图形的类型,共有'line' (default), 'bar', 'tristate', 'discrete', 'bullet', 'pie' , 'box'

使用Sparklines你需要四件事情：

1、jQuery JavaScript库使用至少1.2或更高版本

2、在页面中引用jquery.sparkline-2.1.2.min.js插件.

3、在页面上内嵌一个标签来显示sparkline.

4、实际上调用sparkline()函数来显示sparkline。 

下面我做一个简单的小例子

首先在你的页面头部添加JS引用

<script type="text/javascript" src="jquery-1.4.4.js">script> 
    <script type="text/javascript" src="jquery.sparkline.js">script> 

添加一个SPAN

Inline Sparkline: <span class="inlinesparkline">1,4,4,7,5,9,10</span> 

JS代码

$(function() { 
       /** This code runs when everything has been loaded on the page */ 
       /* Inline sparklines take their values from the contents of the tag */ 
       $('.inlinesparkline').sparkline();  
 
 
   }); 

控件通用属性

type            - line (default), bar, tristate, discrete, bullet, pie or box;

width           -图表的宽度- '默认为'auto -可以是任何有效的CSS宽度- 1.5em，20像素等，对bar与tristate无效

height          -图表的高度的-默认为'auto'

lineColor       -图表描线颜色

fillColor       -填充颜色，设置为false，以禁用填充。

chartRangeMin   -指定要使用的最小值范围的Y值的图表——默认提供的最小值

chartRangeMax   -指定要使用的最大值的Y值的范围图,默认提供的最大价值

composite       -是否使用组合,如果为true,则不重绘图形

enableTagOptions -如果为true选项可以被指定为属性，每个标签上sparkline将进行改造，以及传递给sparkline（）函数。 另见tagOptionPrefix

tagOptionPrefix -每个选项的字符串作为一个属性传递给一个标记。默认为“spark”

tagValuesAttribute –根据属性名称的标签获取“value”

line线图特殊属性

defaultPixelsPerValue	每一个值所占的宽度，默认为3px
spotColor	数据点的颜色,false表示不显示
minSpotColor	最小数据点的颜色,false表示不显示
maxSpotColor	最大数据点的颜色,false表示不显示
spotRadius	标志点的半径
valueSpots	{':4': 'green', '5:': 'red'},//表示低于4的用绿色表示，大于5的用红色表示
highlightSpotColor	最高数据点的颜色
highlightLineColor	最高数据线的颜色
lineWidth	线的宽度
normalRangeMin, normalRangeMax	指定阈值之间画一条表示“正常”或预期的值的范围。 指定阈值之间画一条表示“正常”或预期的值的范围。
drawNormalOnTop	默认情况下正常范围画背后的填充区域图。将此选项设置为true使其在填充区域的顶部
chartRangeClip	chartRangeMin和chartRangeMax之间——默认情况下chartRangeMin / Max只是确保图至少跨越的值的范围,但并不限制它
chartRangeMinX	指定使用的最小值的X值图
chartRangeMaxX	指定使用的最大值的X值图

Bar Charts柱状图特殊属性

barColor	柱体颜色
negBarColor	负柱体的颜色
zeroColor	柱体等于0的颜色