使用Flot绘制曲线图(效果比JfreeChat好多了)

chenyunhong

浏览: 140360 次
性别:
来自: 真的不知道

最近访客更多访客>>

zhang111jie

webeasymail

dalongxn

xkj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

需要引入jquery.flot.min.js，提供下载

1、第一步，现在Html中定义一个DIV

<div id="placeholder" style="width:900px;height:250px"></div>

2、Js代码，设置绘制图像样式、数据等，sin是数据信息，我项目中使用的是struts2，所有使用${attr.view.abrasion};获取曲线数据

for循环部分是画了一条直线，蓝色的

同时设置了鼠标跟随的动态提示

$(function () {
			var cos = [];
			//var sin = ${attr.view.abrasion};
			var sin = [[399.02637,30.346779],[395.02637,30.347057],[390.6585,30.577139],[386.55945,30.840343],[382.3095,30.952269],[378.2246,31.190714],[373.9902,31.37474],[369.91946,31.730484],[365.85544,31.798178],[361.64392,32.083477],[357.594,32.42432],[353.39792,32.471355],[349.36206,32.49643],[345.18143,32.655766],[341.15967,32.80746],[336.99442,32.961533],[332.98672,33.309525],[328.9858,33.369335],[324.84332,33.660122],[320.41394,33.821957],[316.2877,33.960262],[311.87488,34.25151],[307.7649,34.428562],[303.36865,34.738857],[298.8366,34.78687],[294.4579,35.070305],[290.08762,35.146114],[286.01935,35.48213],[281.66586,35.762764],[277.17996,35.797653],[272.84415,36.115673],[268.51694,36.331394],[264.49075,36.37741],[260.18054,36.924973],[255.87895,36.99195],[251.8778,37.0495],[247.59338,37.41077],[243.3177,37.614735],[238.91556,37.648438],[234.65808,37.9302],[230.40944,38.155457],[226.03633,38.161896],[221.8061,38.477707],[217.58482,38.657146],[213.37253,38.64594],[209.03838,38.63915],[204.84477,38.941635],[200.66028,39.07185],[196.35587,38.78464],[192.19028,38.90784],[188.03392,39.072952],[183.88683,38.908165],[179.62233,38.791584],[175.49446,38.93355],[171.37596,38.887493],[167.26689,38.799892],[163.04292,38.457005],[158.9534,38.370205],[154.87341,38.34476],[150.80301,38.58203],[146.74223,38.45967],[142.56963,38.18601],[138.5288,38.19337],[134.4977,38.43728],[130.4764,38.28967],[126.46491,38.361256],[122.4633,38.071995],[118.35345,37.90602],[113.97466,37.856453],[109.60796,37.80679],[105.253395,37.75703],[100.91102,37.558903],[96.85882,37.28572],[92.54042,37.236176],[88.23436,37.353455],[83.94067,37.50503],[79.659386,37.454777],[75.39058,37.404446],[71.13428,37.352993],[66.890526,37.297512],[62.65937,37.027702],[58.246582,36.839046],[54.246582,36.802048],[50.246582,36.76979],[46.246582,36.74774],[42.246582,36.74163],[38.246582,36.757328],[34.246582,36.800266],[30.24658,36.874928],[26.24658,36.984455],[22.24658,37.130375],[18.24658,37.312428],[14.246581,37.528526],[10.246581,37.77479],[6.2465806,38.04574],[2.2465806,38.33449],[-1.7534193,38.63314],[-5.7534194,38.933132],[-9.753419,39.225716],[-13.753419,39.50244],[-17.75342,39.755657],[-21.75342,39.979008],[-25.75342,40.167873],[-29.75342,40.319798],[-33.753418,40.434772],[-37.753418,40.515438],[-41.753418,40.567097],[-45.753418,40.597557],[-49.753418,40.616734],[-53.753418,40.635796],[-57.753418,40.66862],[-61.874634,40.713593],[-66.073006,40.7631],[-70.282585,40.785324],[-74.50337,40.63114],[-78.63233,40.895344],[-82.875,40.953335],[-87.12884,41.0023],[-91.39382,41.05116],[-95.669945,41.099907],[-99.9572,41.14854],[-104.25556,41.10104],[-108.45855,40.847424],[-112.77859,40.881504],[-117.10968,40.929176],[-121.45182,40.976727],[-125.80499,41.024155],[-130.16917,41.071457],[-134.54434,41.18699],[-138.93048,41.548653],[-143.32756,41.623344],[-147.7356,41.65669],[-152.15453,41.564335],[-156.58435,41.904373],[-160.91245,41.842453],[-164.91786,41.19119],[-168.93205,41.296795],[-172.95497,41.33896],[-176.98663,41.381],[-181.02701,41.423878],[-185.07608,41.46686],[-189.13382,41.50852],[-193.20021,41.550045],[-197.27524,41.591446],[-201.35889,41.632717],[-205.45113,41.737873],[-209.55193,41.088867],[-213.66129,41.17109],[-217.77917,41.976994],[-221.78578,41.829514],[-225.92017,41.869953],[-230.06302,41.91026],[-234.2143,41.95042],[-238.374,41.99044],[-242.54207,41.03032],[-246.7185,41.070053],[-250.90329,41.109985],[-255.09639,41.243988],[-259.29776,41.58643],[-263.5074,41.64921],[-267.72528,41.688553],[-271.95135,41.7693],[-276.1856,41.98821],[-280.428,41.96723],[-284.67853,41.84435],[-288.93713,41.882904],[-293.20383,41.921295],[-297.47852,41.959522],[-301.76123,41.05969],[-306.1819,41.94378],[-310.35056,41.02404],[-314.7881,41.12047],[-319.10303,41.157864],[-323.4258,41.384026],[-327.7564,41.48421],[-332.0948,41.563343],[-336.44092,41.729153],[-340.79477,41.768654],[-345.1563,41.81064],[-349.52548,41.14591],[-353.90225,41.97994],[-358.28662,41.064106],[-362.32697,41.342125],[-366.72607,41.377647],[-371.13266,41.19025],[-375.54666,41.86996],[-379.96808,41.203224],[-384.39685,41.186768],[-388.83295,41.961697],[-393.417,41.267307],[-397.86816,41.38517]];
			for (var i = -400; i <=400; i++) {
				cos.push([i, 23.0]);
			}

		    var plot = $.plot(
				$("#placeholder"),
				[
					{ color: 'red', data: sin, label: "滑板磨耗", lines: { show: true, lineWidth: 2}, points: {radius: 0.2}}, 
					{ color: 'blue', data: cos, label: "合格标准",lines: { show: true}, hoverable: false, clickable: false} 
				],
				{
				   grid: { hoverable: true, clickable: true },
				   xaxis: {min: -400, max: 400},
				   yaxis: { min: 0, max: 55, tickSize: 5}
				}
			);
	
		    var previousPoint = null;
		    $("#placeholder").bind("plothover", 
				function (event, pos, item) {
					//$("#x").text(pos.x.toFixed(2));
					//$("#y").text(pos.y.toFixed(2));
		
					//if ($("#enableTooltip:checked").length > 0) {
						if (item) {
							if (previousPoint != item.dataIndex) {
								previousPoint = item.dataIndex;
								
								$("#tooltip").remove();
								var x = item.datapoint[0].toFixed(2),
									y = item.datapoint[1].toFixed(2);
								
								showTooltip(item.pageX, item.pageY, "位置：" + x + "</br> 剩余：" + y + "mm");
							}
						}else {
							$("#tooltip").remove();
							previousPoint = null;            
						}
					//}
				}
			);
	
			//显示坐标跟随
		    function showTooltip(x, y, contents) {
		        $('<div id="tooltip">' + contents + '</div>').css( {
		            position: 'absolute',
		            display: 'none',
		            top: y + 5,
		            left: x + 5,
		            border: '1px solid #000',
		            padding: '2px',
					'background-color': '#fee',
		            opacity: 0.80
		        }).appendTo("body").fadeIn(1);
		    }
		});

曲线图：