图表 > 内联图表

JQuery Sparklines 已经调整为更简单方便的使用

Sparklines是轻量级,简单易用,内联的图表,我们已经调整了Sparklines,以便你在不使用javascript的情况下,只要添加样式data-*,就能方便使用。


  • 内联图表:  90,30,60,40,60,70,50,40,70,60,90,50  通过以下方式,可以改变宽度,高度和颜色   4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7

    <span data-sparkline-type="line" data-sparkline-width="50px" data-sparkline-height="18px">90,30,60,...</span>

  • 编写内联图表: 而且可以混合使用条形图表 

    <span data-sparkline-type="compositeline" data-sparkline-height="15px" data-sparkline-line-val="[9,8,7...]" data-sparkline-bar-val="[4,1,5...]"></span>

  • 分散的条形图表:    4,6,7,7,4,3,2,1,4,4   也可以变换颜色   4,6,7,7,4,3,2,1,4,4

    <span data-sparkline-type="discrete" data-sparkline-height="18px" data-sparkline-width="30" data-sparkline-threshold="4">4,6,7,...</span>

  • 漂亮的条形图表:    50,40,70,60,90,50   使用底片和较厚的条形图表   5,6,7,2,0,-4,-2,4 和堆叠条形图   1:3, 5:3, 2:7,9:1,5:6

    <span data-sparkline-type="bar" data-sparkline-width="50px" data-sparkline-bar data-sparkline-height="15px">50,40,70,...</span>

  • 条形图:  10,12,12,9,7   和子弹图   4,27,34,52,54,59,61,68,78,82,85,87,91,93,100

    <span data-sparkline-type="compositebar" data-sparkline-line-width="1.5" data-sparkline-line-val="[6,4,7...]" data-sparkline-bar-val="[4,1,5...]"></span>

  • 饼图:   3,5,2

    <span data-sparkline-type="pie" data-sparkline-offset="90" data-sparkline-piesize="18px">3,5,2</span>

以下示例没有使用任何javascript!


3,5,2
30,20,15,35

组合 图表


条形


4,3,5,7,9,9,8,7,6,6,4,7,8,4

条形 堆叠图


4:5,3:4,5:7,6:3,4:6,6:5,8:2,4:3,6:4,6:2,4:4,7:2,8:5,4:2

带填充的组合折线图


4,3,3,1,4,3,2,2,3

拆线图


6,4,3,5,2,4,6,4,3,3,4,5,4,3,2,4,5,

+ 39.57

-12.45

简单的 饼图 简单易用便于快速创建

简单饼图显示仪个非常好看并带有动画效果的环型图表,这使得通过ajax方式实现动态效果的图表

<div class="easy-pie-chart txt-color-blue easyPieChart" data-percent="36" data-size="180"> data-pie-size="50"> <span class="percent percent-sign txt-color-blue font-xl semi-bold">36</span> </div>

  •    
    49
       
  •    
    36
       
  •    
    46
       
  •    
    56
       
  •    
    66
       
  •    
    76
       
  •    
    86