jquery flotcharts使用簡介

flotcharts是乙個基於jquery的，使用canvas畫html圖表的js庫。

一般來說，flotcharts的使用是這樣的。首先，要在頁面上加上對ie 8以下canvas的支援，然後，再加上jquery與jquery.plot的js，就像這樣：

<

script 
src="../js/jquery.js"
>
script
>
<
script 
src="../js/jquery.flot.js"
>
script
>

function

draw_plot(data) ],}}
);}

在大部分時候，我們還需要懸浮特效，也就是要在使用者把滑鼠移到資料點上的時候飄出乙個小浮層來，用來顯示當前使用者滑鼠下方資料點的具體資料，這個時候，我們需要在呼叫plot的時候傳入相應的引數，而且處理對應的滑鼠懸浮事件，如下所示(滑鼠懸浮的**都是從flotcharts樣例中的interacting.html頁面**裡複製的)：

function

show_tooltip(x, y, contents) 
function
draw_plot(data) ],
,points: 
},grid: });
var previouspoint = null
; $("#placeholder").bind("plothover", function
(event, pos, item) 
}else
});}

最後就是要讓flotcharts能正確顯示時間了，主要是需要在橫軸上做一些處理。在flotcharts的plot的 第三個引數支援使用mode引數，將其設定為time即可顯示出日期/時間來，但是這個顯示出來的時間是英文的，例如nov 12之類的，對我們來說就不那麼方便了。其實，由於flotcharts只是將橫軸資料當做數字來處理，而且又提供了格式化顯示橫軸資料的介面，因此，我 們完全可以傳入乙個date物件的gettime()值，然後再使用自定義橫軸資料顯示介面，將其轉化為我們希望的格式。如下例所示：

function

show_tooltip(x, y, contents) 
function
draw_plot(data) ],
,points: 
},grid: ,
xaxis: }});
var previouspoint = null
; $("#placeholder").bind("plothover", function
(event, pos, item) 
}else
});}

其他的效果都可以參見flotcharts的文件和例子了，這裡就不說了。

2015.1.16附註：

上面**對時間資料的處理過於簡單，x軸資料過大貌似會造成flotcharts在後面資料點的橫座標偏差較大，更好的方法參見這篇文章。

Performance Schema使用簡介 一

作者 董紅禹 沃趣科技mysql高階技術專家 performance schema簡介 oracle dba都應該知道 oracle中提供了大量的檢視供dba們排查問題使用，並且有等待事件幫助大家快速定位問題屬於哪一類。mysql 中也有performance schema幫助大家去分析排查問題，並...

Performance Schema使用簡介 一

oracle dba都應該知道 oracle中提供了大量的檢視供dba們排查問題使用，並且有等待事件幫助大家快速定位問題屬於哪一類。mysql 中也有performance schema幫助大家去分析排查問題，並且在5.7中增加了sys schema，將performance schema和info...

git最簡使用

git config global user.name your name git config global user.email email example.com 在專案資料夾上一層 git init git add 將當前資料夾下所有內容交給git管理 git commit m 描述 提交 ...