1. 程式人生 > >sparkline 圖示外掛(Bootstrap)

sparkline 圖示外掛(Bootstrap)

1 先看看折線圖

這裡寫圖片描述

執行效果如下:
這裡寫圖片描述

折線曲折走向的資料是js程式碼中控制的,具體如下:

$("#sparkline1").sparkline([34,43,43,35,44,32,44,52],{type:"line",width:"100%",height:"60",lineColor:"#1ab394",fillColor:"#ffffff"});

2 再看看進度條

這裡寫圖片描述

這裡寫圖片描述

3 再看看餅狀圖

這裡寫圖片描述

執行後的效果:

這裡寫圖片描述

JS程式碼如下:

$("#sparkline8").sparkline([2,3],{type:"pie"
,height:"140",sliceColors:["#ed5565","#F5F5F5"]
})

FR:海濤高軟(QQ技術群:386476712)