需要引入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);
}
});
曲线图:
- 大小: 14.5 KB
分享到:
相关推荐
NULL 博文链接:https://roger86.iteye.com/blog/837379
NULL 博文链接:https://cuisuqiang.iteye.com/blog/1462586
JS 插件 flot 动态绘图 曲线 刚刚做的是一个静态的曲线图,只要设置数据,就可以直接显示。下面来做一个根据时间间隔根据新数据一直变的曲线绘图示例。
NULL 博文链接:https://cuisuqiang.iteye.com/blog/1462646
flot-柱形图,自己用的flot-柱形图
Flot是Ole Laursen开发的基于JQuery的纯JavaScript实现的绘图库,Flot使用起来非常简单,绘图效果相当绚丽,而且还支持一些图片的操作功能,例如图片的缩放。
代码能直接运行,运行在html和jsp中都可,有完整的文件,点击其中的html文件即可看到效果
JQuery Flot 画图插件 +实例源码 使用非常方便,效果非常漂亮
Js 绘图 Flot 示例!提供给同学们学习!
JQuery Flot 统计图 非常实用的统计图
主要介绍了jquery.flot.js简单绘制折线图用法,结合实例形式分析了jQuery插件jquery.flot.js实现图形绘制的常用操作技巧,需要的朋友可以参考下
NULL 博文链接:https://chinaxxren.iteye.com/blog/700105
jqflot折线图demo,各种折线图,非常齐全。直接用就行。
Flot类库基于jQuery,支持绘制实时和可进行交互的图表
具有简单使用,交互效果,具有吸引力外观特点,它的特色之一是支持Ajax动态显示。非常强大的图表绘制插件,使用操作简单,有什么不懂的,请留言。
苦心搜集~~~分数不多~~值得一看~包括很全~~
jQuery flot API文档 中文版(经整理,里面有相关参数说明,对使用jQuery flot进行图表开发有帮助)
主要用于web开发式在网页上进行图表的绘制
下面的多选框,选择以后会触发一个事件,等同与重新绘制了曲线图。 重点是需要的数据的格式,我们来看一下代码: <!DOCTYPE ...
刚刚做的是一个静态的曲线图,只要设置数据,就可以直接显示。下面来做一个根据时间间隔根据新数据一直变的曲线绘图示例。 同样,为了兼容不同浏览器,请一定要引入三个JS文件,否则不保证在IE下的运行。 首先来看...