效果如下图
代码如下
<html>
<head>
<title>流量监控详情</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script src="highcharts.js" type="text/javascript"></script>
<script type="text/javascript">
//数据1，数据2，时间，初始加载数据数量，实际加载数据数量
var data1 = [1284.8, 1259.1, 1310.1, 1528.8, 1172.9, 1289.4, 1112.3, 1134.2, 1186.3, 1335, 1322.9, 1483.7, 1336.7, 1351.3, 1731.4, 1399.3, 1540.5, 1225.4, 1415.1, 1694.2, 1392.8, 1298, 1626, 1526.7, 1505.3, 1555.3, 1422.5, 1563.3, 1465.1, 1491.9, 1547.9, 1454.1, 1438.3, 1412.1, 1527.3, 1588.1, 1570.9, 1566.2, 1426.6, 1590.5, 1691.8, 1663.6, 1540.3, 1626, 1569.2, 1441.1, 1524.1, 1405.1, 1684.1, 1662.7, 1579.5, 1743.5, 1589.4, 1413.3, 1747.7, 1597.7, 1644.9, 1773.5, 1641.2, 1788.1, 1590.6, 1639.1, 1683.5, 1709.9, 1969.1, 1629.1, 1745.3, 1712.1, 1539.6, 1543.5, 1845.8, 1709.6, 1965.9, 1720, 1942, 1683.4, 1629.5, 1791.8, 1761.1, 1651.6, 1923, 1732.8, 1841.7, 1998.1, 1907.5, 2156, 1891.1, 1972.3, 1881.8, 1915.9, 1808.1, 1761.5, 1792.1, 1838.8, 1927.9, 1979.9, 1726.5, 1898.4, 1935.3, 2248.3, 2184.5, 2232.5, 2236.9, 2305.7, 2373.3, 2385.4, 2490.3, 2499.5, 2382, 2586.7, 2600.7, 2631.1, 2536.9, 2626.3, 2953, 3028.2, 2948.6, 3079.3, 2998, 3350, 3297.1, 3365, 3236.2, 3379.8, 3646.3, 3744.2, 3745.4, 3634.6, 3603.7, 4556.3, 4421.6, 4512.8, 4722.9, 4667, 4790.7, 4633.9, 4634.6, 4753.9, 4587.3, 4704.9, 4718.9, 4713.9, 4867, 4696.7, 4743.1, 4822.4, 4694.5, 4718, 4729.2, 4767.7, 4862.4, 4804.5, 4753.9, 4778.6, 4973.3, 4733.4, 4917.6, 4778.2, 4928.2, 4795.6, 5003.9, 4931.4, 5341, 4767.9, 4590.2, 4763.2, 4743, 4638.4, 4783.5, 4845.4, 5102.9, 4895.5, 4914.3, 4743.6, 4856.5, 4792, 4702.3, 4772.7, 5059.6, 5019.8, 4772.7, 4754.6, 4719.6, 4794.3, 4817.9, 4908.8, 4982.3, 5139.3, 4761.6, 4874.4, 4918, 4930.5, 4651.3, 4660.4, 4761, 4974.2, 4912, 5001.5, 4905.3, 4866.9, 4840.6, 4818.1, 4909, 4825.5, 4701.8, 4813.4, 4933, 4748.9, 4657.7, 4640.7, 4610.4, 4974.7, 4651.1, 4634.2, 4729.1, 4888.2, 4677.4, 4906.9, 4750.1, 5058.7, 4930, 4800.2, 5362.1, 4676.5, 4691.2, 4750.8, 4662.4, 4854.6, 4828.3, 4981.9, 4877.7, 4761.2, 4717, 4712.2, 4589, 4713.3, 4565.8, 4784.2, 4681.4, 4772.6, 4842.2, 4676.5, 4622.6, 4450.7, 4635, 4608.5, 4408.6, 4337.7, 4374.9, 4660.9, 4095.5, 4193.2, 3895.3, 3762.7, 3574.3, 3762.7, 3650.9, 3366.1, 3322.7, 3289.3, 3469.5, 3130.6, 3430.5, 3283.6, 3274.2, 3258.7, 3131.6, 3100.4, 3412.2, 3225.2, 3261.4, 3182.1, 3234.7, 3058.6, 3145.8, 3042.3, 3065.6, 2946.2, 3044.1, 2906.6, 3023.7, 3010.7, 3013, 2961.5, 2806.9, 2930.6, 2829.8, 2800.4, 2610.2, 2745, 2833, 2523.4, 2734.8, 2683.7, 2893.9, 2736.2, 2722.8, 2658.4, 2608.5, 2781.1];
var data2 = [2469.4, 2437.8, 2840.6, 2481.1, 2610.4, 2589.5, 2488.6, 2485, 2498.7, 2900.4, 2804.9, 2728, 2873.6, 3016.8, 3464.9, 3578.9, 2830, 2815.6, 3017, 2870.9, 2881.7, 2918.9, 3052.8, 3111.4, 3261.5, 3100.1, 3298.4, 3102.9, 3460.3, 3748.6, 3194.8, 3238.7, 3459.6, 3174.2, 3068.6, 3189.2, 3720, 3264.4, 3350.2, 7888, 3439.5, 3338.4, 3648.4, 3667.2, 3824.1, 3530.1, 3330, 3555.7, 3825.3, 4105.7, 3593.8, 3765.9, 3834.6, 3700.7, 4114.3, 3768.6, 4015.6, 4145.3, 4285.6, 4305.9, 4095.9, 3889.5, 4061.6, 4127.9, 4428.2, 4034.2, 4393.1, 4764.3, 4396, 4768.6, 4582.3, 4638.3, 4316.7, 4678.4, 5247.7, 4663.9, 4657.3, 4840.2, 5025.3, 4877, 4865, 5217.2, 5179.3, 5135, 5490.9, 5371, 5622.8, 6159.2, 5692.3, 5050.5, 5468.5, 5936.7, 5534.2, 5278.6, 5248.5, 5163.2, 4927.3, 5319.2, 5391.8, 5965.7, 6092.4, 6277.4, 6104.6, 6376.7, 6900, 6863.2, 7225, 7149, 7140.7, 7397.1, 7557.8, 7920.4, 8126.9, 8140.6, 10364.7, 10958.6, 11264, 11580.3, 11770.8, 13133.7, 13251.2, 12958.9, 13549.8, 18936.2, 18389.8, 14949.9, 14847.9, 14832.1, 14701.9, 23138.7, 21572, 23338, 22737.6, 22922.4, 23985.3, 23199.6, 23727.4, 23659.6, 25125.3, 24596.1, 24315.7, 23726.7, 23978.4, 24037.4, 24239, 24077.2, 24035.9, 24011.5, 23900.4, 24081.4, 24574.6, 24487.4, 24507.6, 24485.3, 24592.9, 24404.1, 25042.2, 24563.7, 24297.8, 25174.4, 24606, 24078.7, 24442.3, 24180.2, 23780.1, 24460.2, 23759.9, 23534.1, 23594.2, 23136.2, 23943.2, 23038.9, 23075.6, 22656.9, 23065.2, 23283.1, 23610.5, 23607.6, 23824.6, 24571.9, 23777.1, 23331.2, 23186.2, 23441.4, 24769.3, 24931.8, 24659, 24972.4, 24167, 23762.5, 23982, 23305.8, 23291.5, 23112.7, 22721, 23125.6, 23399.7, 23855.7, 24873.7, 23833.7, 23693.2, 23384.2, 23249.2, 23322.6, 22863.4, 23639.1, 23416, 23171.7, 22768.7, 23467.1, 22302.2, 22883.9, 22341.9, 22892.6, 22884.3, 22048.3, 22145.1, 22242, 22959.8, 23289.1, 23758.3, 23371.8, 24259.7, 23878.5, 22729.2, 22555, 22633.3, 22851.3, 22660.9, 22362.7, 22799.7, 22869, 22358.6, 22367.1, 22716.9, 21729.2, 21434.1, 21187.8, 21739.6, 21942.5, 22401.9, 21538, 21558.5, 21244.1, 21143.5, 20800.3, 20706.6, 20723.1, 20374.9, 19920.8, 15211.5, 14915.5, 13478.3, 13430.3, 12724.4, 12444.3, 12352.7, 11955.5, 11676.5, 11698.4, 11642.4, 11119, 11327.9, 11367.1, 11242.3, 10984.6, 10910.2, 12010, 11391.3, 10873.3, 10554.5, 10705.5, 10602.9, 10232.9, 10765.4, 10131, 10297.1, 10582.2, 10411, 10010.4, 10109.1, 10205.8, 9703.6, 9801.3, 9676.3, 9469.2, 9573.2, 9389.8, 9022.3, 9561.2, 9353.3, 9006.9, 9121.3, 9287.4, 9499.7, 9218.7, 8912.2, 8985.7, 9210.7, 9164.3];
var time = ["2015-09-10 07:21:00", "2015-09-10 07:22:00", "2015-09-10 07:23:00", "2015-09-10 07:24:00", "2015-09-10 07:25:00", "2015-09-10 07:26:00", "2015-09-10 07:27:00", "2015-09-10 07:28:00", "2015-09-10 07:29:00", "2015-09-10 07:30:00", "2015-09-10 07:31:00", "2015-09-10 07:32:00", "2015-09-10 07:33:00", "2015-09-10 07:34:00", "2015-09-10 07:35:00", "2015-09-10 07:36:00", "2015-09-10 07:37:00", "2015-09-10 07:38:00", "2015-09-10 07:39:00", "2015-09-10 07:40:00", "2015-09-10 07:41:00", "2015-09-10 07:42:00", "2015-09-10 07:43:00", "2015-09-10 07:44:00", "2015-09-10 07:45:00", "2015-09-10 07:46:00", "2015-09-10 07:47:00", "2015-09-10 07:48:00", "2015-09-10 07:49:00", "2015-09-10 07:50:00", "2015-09-10 07:51:00", "2015-09-10 07:52:00", "2015-09-10 07:53:00", "2015-09-10 07:54:00", "2015-09-10 07:55:00", "2015-09-10 07:56:00", "2015-09-10 07:57:00", "2015-09-10 07:58:00", "2015-09-10 07:59:00", "2015-09-10 08:00:00", "2015-09-10 08:01:00", "2015-09-10 08:02:00", "2015-09-10 08:03:00", "2015-09-10 08:04:00", "2015-09-10 08:05:00", "2015-09-10 08:06:00", "2015-09-10 08:07:00", "2015-09-10 08:08:00", "2015-09-10 08:09:00", "2015-09-10 08:10:00", "2015-09-10 08:11:00", "2015-09-10 08:12:00", "2015-09-10 08:13:00", "2015-09-10 08:14:00", "2015-09-10 08:15:00", "2015-09-10 08:16:00", "2015-09-10 08:17:00", "2015-09-10 08:18:00", "2015-09-10 08:19:00", "2015-09-10 08:20:00", "2015-09-10 08:21:00", "2015-09-10 08:22:00", "2015-09-10 08:23:00", "2015-09-10 08:24:00", "2015-09-10 08:25:00", "2015-09-10 08:26:00", "2015-09-10 08:27:00", "2015-09-10 08:28:00", "2015-09-10 08:29:00", "2015-09-10 08:30:00", "2015-09-10 08:31:00", "2015-09-10 08:32:00", "2015-09-10 08:33:00", "2015-09-10 08:34:00", "2015-09-10 08:35:00", "2015-09-10 08:36:00", "2015-09-10 08:37:00", "2015-09-10 08:38:00", "2015-09-10 08:39:00", "2015-09-10 08:40:00", "2015-09-10 08:41:00", "2015-09-10 08:42:00", "2015-09-10 08:43:00", "2015-09-10 08:44:00", "2015-09-10 08:45:00", "2015-09-10 08:46:00", "2015-09-10 08:47:00", "2015-09-10 08:48:00", "2015-09-10 08:49:00", "2015-09-10 08:50:00", "2015-09-10 08:51:00", "2015-09-10 08:52:00", "2015-09-10 08:53:00", "2015-09-10 08:54:00", "2015-09-10 08:55:00", "2015-09-10 08:56:00", "2015-09-10 08:57:00", "2015-09-10 08:58:00", "2015-09-10 08:59:00", "2015-09-10 09:00:00", "2015-09-10 09:01:00", "2015-09-10 09:02:00", "2015-09-10 09:03:00", "2015-09-10 09:04:00", "2015-09-10 09:05:00", "2015-09-10 09:06:00", "2015-09-10 09:07:00", "2015-09-10 09:08:00", "2015-09-10 09:09:00", "2015-09-10 09:10:00", "2015-09-10 09:11:00", "2015-09-10 09:12:00", "2015-09-10 09:13:00", "2015-09-10 09:14:00", "2015-09-10 09:15:00", "2015-09-10 09:16:00", "2015-09-10 09:17:00", "2015-09-10 09:18:00", "2015-09-10 09:19:00", "2015-09-10 09:20:00", "2015-09-10 09:21:00", "2015-09-10 09:22:00", "2015-09-10 09:23:00", "2015-09-10 09:24:00", "2015-09-10 09:25:00", "2015-09-10 09:26:00", "2015-09-10 09:27:00", "2015-09-10 09:28:00", "2015-09-10 09:29:00", "2015-09-10 09:30:00", "2015-09-10 09:31:00", "2015-09-10 09:32:00", "2015-09-10 09:33:00", "2015-09-10 09:34:00", "2015-09-10 09:35:00", "2015-09-10 09:36:00", "2015-09-10 09:37:00", "2015-09-10 09:38:00", "2015-09-10 09:39:00", "2015-09-10 09:40:00", "2015-09-10 09:41:00", "2015-09-10 09:42:00", "2015-09-10 09:43:00", "2015-09-10 09:44:00", "2015-09-10 09:45:00", "2015-09-10 09:46:00", "2015-09-10 09:47:00", "2015-09-10 09:48:00", "2015-09-10 09:49:00", "2015-09-10 09:50:00", "2015-09-10 09:51:00", "2015-09-10 09:52:00", "2015-09-10 09:53:00", "2015-09-10 09:54:00", "2015-09-10 09:55:00", "2015-09-10 09:56:00", "2015-09-10 09:57:00", "2015-09-10 09:58:00", "2015-09-10 09:59:00", "2015-09-10 10:00:00", "2015-09-10 10:01:00", "2015-09-10 10:02:00", "2015-09-10 10:03:00", "2015-09-10 10:04:00", "2015-09-10 10:05:00", "2015-09-10 10:06:00", "2015-09-10 10:07:00", "2015-09-10 10:08:00", "2015-09-10 10:09:00", "2015-09-10 10:10:00", "2015-09-10 10:11:00", "2015-09-10 10:12:00", "2015-09-10 10:13:00", "2015-09-10 10:14:00", "2015-09-10 10:15:00", "2015-09-10 10:16:00", "2015-09-10 10:17:00", "2015-09-10 10:18:00", "2015-09-10 10:19:00", "2015-09-10 10:20:00", "2015-09-10 10:21:00", "2015-09-10 10:22:00", "2015-09-10 10:23:00", "2015-09-10 10:24:00", "2015-09-10 10:25:00", "2015-09-10 10:26:00", "2015-09-10 10:27:00", "2015-09-10 10:28:00", "2015-09-10 10:29:00", "2015-09-10 10:30:00", "2015-09-10 10:31:00", "2015-09-10 10:32:00", "2015-09-10 10:33:00", "2015-09-10 10:34:00", "2015-09-10 10:35:00", "2015-09-10 10:36:00", "2015-09-10 10:37:00", "2015-09-10 10:38:00", "2015-09-10 10:39:00", "2015-09-10 10:40:00", "2015-09-10 10:41:00", "2015-09-10 10:42:00", "2015-09-10 10:43:00", "2015-09-10 10:44:00", "2015-09-10 10:45:00", "2015-09-10 10:46:00", "2015-09-10 10:47:00", "2015-09-10 10:48:00", "2015-09-10 10:49:00", "2015-09-10 10:50:00", "2015-09-10 10:51:00", "2015-09-10 10:52:00", "2015-09-10 10:53:00", "2015-09-10 10:54:00", "2015-09-10 10:55:00", "2015-09-10 10:56:00", "2015-09-10 10:57:00", "2015-09-10 10:58:00", "2015-09-10 10:59:00", "2015-09-10 11:00:00", "2015-09-10 11:01:00", "2015-09-10 11:02:00", "2015-09-10 11:03:00", "2015-09-10 11:04:00", "2015-09-10 11:05:00", "2015-09-10 11:06:00", "2015-09-10 11:07:00", "2015-09-10 11:08:00", "2015-09-10 11:09:00", "2015-09-10 11:10:00", "2015-09-10 11:11:00", "2015-09-10 11:12:00", "2015-09-10 11:13:00", "2015-09-10 11:14:00", "2015-09-10 11:15:00", "2015-09-10 11:16:00", "2015-09-10 11:17:00", "2015-09-10 11:18:00", "2015-09-10 11:19:00", "2015-09-10 11:20:00", "2015-09-10 11:21:00", "2015-09-10 11:22:00", "2015-09-10 11:23:00", "2015-09-10 11:24:00", "2015-09-10 11:25:00", "2015-09-10 11:26:00", "2015-09-10 11:27:00", "2015-09-10 11:28:00", "2015-09-10 11:29:00", "2015-09-10 11:30:00", "2015-09-10 11:31:00", "2015-09-10 11:32:00", "2015-09-10 11:33:00", "2015-09-10 11:34:00", "2015-09-10 11:35:00", "2015-09-10 11:36:00", "2015-09-10 11:37:00", "2015-09-10 11:38:00", "2015-09-10 11:39:00", "2015-09-10 11:40:00", "2015-09-10 11:41:00", "2015-09-10 11:42:00", "2015-09-10 11:43:00", "2015-09-10 11:44:00", "2015-09-10 11:45:00", "2015-09-10 11:46:00", "2015-09-10 11:47:00", "2015-09-10 11:48:00", "2015-09-10 11:49:00", "2015-09-10 11:50:00", "2015-09-10 11:51:00", "2015-09-10 11:52:00", "2015-09-10 11:53:00", "2015-09-10 11:54:00", "2015-09-10 11:55:00", "2015-09-10 11:56:00", "2015-09-10 11:57:00", "2015-09-10 11:58:00", "2015-09-10 11:59:00", "2015-09-10 12:00:00", "2015-09-10 12:01:00", "2015-09-10 12:02:00", "2015-09-10 12:03:00", "2015-09-10 12:04:00", "2015-09-10 12:05:00", "2015-09-10 12:06:00", "2015-09-10 12:07:00", "2015-09-10 12:08:00", "2015-09-10 12:09:00", "2015-09-10 12:10:00", "2015-09-10 12:11:00", "2015-09-10 12:12:00", "2015-09-10 12:13:00", "2015-09-10 12:14:00", "2015-09-10 12:15:00", "2015-09-10 12:16:00", "2015-09-10 12:17:00", "2015-09-10 12:18:00", "2015-09-10 12:19:00", "2015-09-10 12:20:00"];
//是否第一次请求
var isfirst = true;
var actcount = data1.length;
$(function () {
$("#bigcontainer").append("<div id=\"container\" style=\"min-width:700px;height:600px\"></div>");
draw();
});
function draw() {
// make the container smaller and add a second container for the master chart
var $container = $("#container").css('position', 'relative');
if (isfirst) {
var $detailContainer = $('<div id="detail-container">').css({ position: 'absolute', top: 0, height: 450, width: '100%' }).appendTo($container);
var $masterContainer = $('<div id="master-container">').css({ position: 'absolute', top: 450, height: 140, width: '100%' }).appendTo($container);
isfirst = !isfirst;
}
// create master and in its callback, create the detail chart
createMaster();
}
// create the master chart
var masterChart;
function createMaster() {
masterChart = $('#master-container').highcharts({
chart: {
reflow: false,
borderWidth: 0,
backgroundColor: null,
marginLeft: 50,
marginRight: 20,
zoomType: 'x',
events: {
// listen to the selection event on the master chart to update the
// extremes of the detail chart
selection: function (event) {
var extremesObject = event.xAxis[0],
min = extremesObject.min,
max = extremesObject.max,
detailData1 = [], detailData2 = [],
xAxis = this.xAxis[0];
// reverse engineer the last part of the data
jQuery.each(this.series[0].data, function (i, point) {
if (point.x > min && point.x < max) {
detailData1.push({
x: point.x,
y: point.y
});
}
});
jQuery.each(this.series[1].data, function (i, point) {
if (point.x > min && point.x < max) {
detailData2.push({
x: point.x,
y: point.y
});
}
});
// move the plot bands to reflect the new detail span
xAxis.removePlotBand('mask-before');
xAxis.addPlotBand({
id: 'mask-before',
from: 0,
to: min,
color: 'rgba(0, 0, 0, 0.2)'
});
xAxis.removePlotBand('mask-after');
xAxis.addPlotBand({
id: 'mask-after',
from: max,
to: actcount - 1,
color: 'rgba(0, 0, 0, 0.2)'
});
detailChart.series[0].setData(detailData1);
detailChart.series[1].setData(detailData2);
return false;
}
}
},
title: {
text: null
},
xAxis: {
type: 'datetime',
tickWidth: 0, //设置刻度标签宽度
plotBands: [{
id: 'mask-before',
from: 0,
to: parseInt(actcount * 3 / 4) - 1,
color: 'rgba(0, 0, 0, 0.2)'
}],
title: {
text: null
},
labels: {
enable: false,
formatter: function () {
return Highcharts.dateFormat('', this.value);
}
}
},
yAxis: {
gridLineWidth: 0,
labels: {
enabled: false
},
title: {
text: null
},
//min: 0.6,
showFirstLabel: false
},
tooltip: {
formatter: function () {
return false;
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
fillColor: {
linearGradient: [0, 0, 0, 70],
stops: [
[0, '#4572A7'],
[1, 'rgba(0,0,0,0)']
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
enableMouseTracking: false
}
},
series: [{
pointInterval: 1,
data: data1
}, {
pointInterval: 1,
data: data2
}]
}, function (masterChart) {
createDetail(masterChart)
})
.highcharts(); // return chart instance
}
// create the detail chart
var detailChart;
function createDetail(masterChart) {
var detailY1 = [], detailY2 = [],
detailStart = parseInt(actcount * 3 / 4);
// prepare the detail chart
jQuery.each(masterChart.series[0].data, function (i, point) {
if (i >= detailStart) {
detailY1.push(point.y);
}
});
jQuery.each(masterChart.series[1].data, function (i, point) {
if (i >= detailStart) {
detailY2.push(point.y);
}
});
// create a detail chart referenced by a global variable
detailChart = $('#detail-container').highcharts({
chart: {
marginBottom: 20,
reflow: false,
marginLeft: 50,
marginRight: 20,
style: {
position: 'absolute'
}
},
credits: {
enabled: false
},
title: {
text: '流量统计'
},
xAxis: {
tickWidth: 0, //设置刻度标签宽度
labels: {
enable: false,
formatter: function () {
return Highcharts.dateFormat('', this.value);
}
}
},
yAxis: {
title: {
text: null
},
maxZoom: 0.5
},
tooltip: {
formatter: function () {
var point = this.points[0];
return '上传：<span style="color:#66CD00;">' + this.points[0].y + 'M</span><br/>下载：<span style="color:#66CD00;">' + this.points[1].y + 'M</span><br/>' +
time[this.x] + '<br/>';
},
shared: true
},
legend: {
enabled: false
},
plotOptions: {
series: {
name: 'use time',
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 3
}
}
}
}
},
series: [{
pointStart: detailStart,
pointInterval: 1,
turboThreshold: actcount,
data: detailY1
}, {
pointStart: detailStart,
pointInterval: 1,
turboThreshold: actcount,
data: detailY2
}]
}).highcharts(); // return chart
}
</script>
</head>
<body>
<div style="width:96%;">
<div id="bigcontainer" style="width: 100%; text-align: left; border: #9EDAE5 1px solid; margin: 1px;padding-right: 10px;margin-top:50px;"></div>
</div>
</body>
</html>
1040
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
