jquery.sparkline.docxVIP

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.jsscript script type=text/javascript src=jquery.sparkline.jsscript 添加一个SPANInline Sparkline: span class=inlinesparkline1,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 -图表的高度的-默认为autolineColor -图表描线颜色fillColor -填充颜色，设置为false，以禁用填充。chartRangeMin -指定要使用的最小值范围的Y值的图表——默认提供的最小值chartRangeMax -指定要使用的最大值的Y值的范围图,默认提供的最大价值composite -是否使用组合,如果为true,则不重绘图形enableTagOptions -如果为true选项可以被指定为属性，每个标签上sparkline将进行改造，以及传递给sparkline（）函数。 另见tagOptionPrefixtagOptionPrefix -每个选项的字符串作为一个属性传递给一个标记。默认为“spark”tagValuesAttribute –根据属性名称的标签获取“value”line线图特殊属性defaultPixelsPerValue每一个值所占的宽度，默认为3pxspotColor数据点的颜色,false表示不显示minSpotColor最小数据点的颜色,false表示不显示maxSpotColor最大数据点的颜色,false表示不显示spotRadius标志点的半径valueSpots{:4: green, 5:: red},//表示低于4的用绿色表示，大于5的用红色表示highlightSpotColor最高数据点的颜色highlightLineColor最高数据线的颜色lineWidth线的宽度normalRangeMin, normalRangeMax指定阈值之间画一条表示“正常”或预期的值的范围。指定阈值之间画一条表示“正常”或预期的值的范围。drawNormalOnTop默认情况下正常范围画背后的填充区域图。将此选项设置为true使其在填充区域的顶部chartRangeClipchartRangeMin和chartRangeMax之间——默认情况下chartRangeMin / Max只是确保图至少跨越的值的范围,但并不限制它chartRangeMinX指定使用的最小值的X值图chartRangeMaxX指定使用的最大值的X值图Bar Charts柱状图特殊属性barColor柱体颜色negBarColor负柱体的颜色zeroColor柱体等于0的颜色nullColor为空的颜色barWidth柱体的宽度barSpacing柱体之间的间隔zeroAxis 如果为true，把0轴线居中colorMap映射到特定值所选的颜色。例如如果你想要的值2出现黄色,使用colorMap:{“2”:“# ff0”}。stackedBarColor堆柱体的颜色Tristate Charts特殊属性posBarColor正柱体的颜色negBarColor负柱体的颜色zeroBarColor为0时柱体的颜色barW