2、 编写Php页面，来回显json，这里需要说下，官方的highcharts demo里实现是用jsonp，我这里实现也是jsonp，jsonp是通过javascript callback实现调用的，当然这里也可能存在安全问题，本文主要讨论如何实现将咱们获取到的攻击数据可视化。
<?php
header("Content-type: text/json"); //header输出成json格式
$callback = isset($_GET['callback']) ? $_GET['callback'] : '';
$json = '';
$con = mysql_connect("localhost","root","");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("audit", $con);
$result = mysql_query("SELECT * FROM highcharts_php");
while($row = mysql_fetch_array($result)) {
$the_date = gmdate(strtotime($row['timespan'])) * 1000; // highcharts需要格式化时间成highcharts需要的格式，例如：February 11, 2014, 08:02:03
$results[] = array($the_date,intval($row['visits'])); //攻击次数
}
if (isset($_GET['callback'])) {
$json = json_encode($results);
echo $callback . '(' . $json . ')';
} else {
echo "please enter yor pass key!";
}
mysql_close($con);
?>
上边的调用方式主要是使用http://127.0.0.1/test/test.php?callback来实现回调json，如果使用http://127.0.0.1/test/test.php来调用会返回please enter yor pass key!
3、 实现页面展现，在这里不麻烦，但相对来说，需要多琢磨琢磨，按照官方demo copy下来，然后改下数据
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>24小时web攻击趋势展现</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
<script type="java/javascript" src="js/exporting.js"></script>
<script type="text/javascript" src="js/themes/grid.js"></script>
<script type="text/javascript">
$(function() { Highcharts.setOptions({global : {
useUTC : false
}
});
$.getJSON('http://127.0.0.1/test/test.php?callback=?', function(data) {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
credits: {
enabled: false //右下角不显示LOGO
},
title : { // 标题
text : '网络攻击趋势图' },
subtitle: { //副标题
text: 'web攻击趋势',
x: -20 //居中
},
yAxis: { //坐标Y轴
title: {
text: '受到网络攻击次数'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series : [{ name : '攻击数',
data : data,
marker : {
enabled : true,
radius : 3
},
shadow : true,
tooltip: {
valueDecimals: 2
}
}]
});
});
</script>
</head>
<body>
<script src="js/highstock.js"></script>
<script src="js/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
上边的数据比较好理解，div里参数container实现调用highcharts来画图，highcharts里的参数主要是使用javascript jsonp来实现获取数据。
4、既然有了demo，那就需要有图，demo图如下：
EOF
网络安全课程
