开发者必知的20个jQuery插件——之一jQuery+Flot可视化图表

Flot 是一款画图表的jQuery插件，作用很强大。

这里只举一个例子来说明Flot画图表的用法:例如我来画出最近20天网站的访问情况。

 

 

可以这样来编写Javascript代码：

 

$(document).ready(function() { $.getJSON('w3s_getdata.php', function(json) { var plot_data = new Array(); var plot_ticks = new Array(); for (var i in json) { i = parseInt(i); plot_data.push([i, json[i].visitors]); plot_ticks.push([i+0.5, json[i].dates]); } $.plot($("#placeholder"), [ {"data": [[0, 0]]}, {"data": [[0, 0]]}, {"data": [[0, 0]]}, {"data": [[0, 0]]}, {"data": [[0, 0]]}, { label: "Last 20 days visits", bars: {"show": "true"}, data: plot_data } ], { xaxis: { ticks: plot_ticks } } ); }); });

 

JSON数据是这种形式：

 

[ {"dates":"24 feb","visitors":"5"}, {"dates":"25 feb","visitors":"21"}, {"dates":"26 feb","visitors":"14"}, {"dates":"27 feb","visitors":"45"}, {"dates":"28 feb","visitors":"20"}, {"dates":"29 feb","visitors":"18"}, {"dates":"01 mar","visitors":"9"}, {"dates":"02 mar","visitors":"7"}, {"dates":"03 mar","visitors":"42"}, {"dates":"04 mar","visitors":"17"}, {"dates":"05 mar","visitors":"15"}, {"dates":"06 mar","visitors":"9"}, {"dates":"07 mar","visitors":"15"}, {"dates":"08 mar","visitors":"3"}, {"dates":"09 mar","visitors":"3"}, {"dates":"10 mar","visitors":"19"}, {"dates":"11 mar","visitors":"15"}, {"dates":"12 mar","visitors":"11"} ]

 

服务器上的PHP代码如下：

 

$a = strtolower(file_get_contents("http://extremetracking.com/open;unique?login=ncrovatt")); $pattern = '|.*  (/d+/s[a-z]{3},/s[a-z]{3})  .*|im'; preg_match_all($pattern, $a, $matches); $pattern = '|.*  (/d+/s[a-z]{3}),/s[a-z]{3}  .* <font face=arial size=2><b>  (/d+)  |im'; foreach($matches[0] as $k => $v) { preg_match_all($pattern, $v, $res); $data[] = array('dates' => $res[1][0], 'visitors'=> $res[2][0]); } print_z(array2json($data));