jquery.flot.js简单绘制折线图用法示例
程序员文章站
2022-04-07 09:26:29
本文实例讲述了jquery.flot.js简单绘制折线图用法。分享给大家供大家参考,具体如下:
1、完整实例代码:
...
本文实例讲述了jquery.flot.js简单绘制折线图用法。分享给大家供大家参考,具体如下:
1、完整实例代码:
<!doctype html> <html> <head> <meta charset='utf-8'> <title>折线图</title> <!--[if lte ie 8]> <script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script> <![endif]--> <script language="javascript" type="text/javascript" src="js/jquery.js"></script> <script language="javascript" type="text/javascript" src="js/jquery.flot.js"></script> <script type="text/javascript"> $(function() { alpricequery(); }); function alpricequery(){ var result = { avgprice : [14030, 13980, 14060, 14000, 13930, 14030, 13980, 14060, 14000, 13930], date: ["11-1", "11-2", "11-3", "11-4", "11-5", "11-6", "11-7", "11-8", "11-9", "11-10"], } var dataarr = [];//y轴数据 var tickarr = [];//x轴自定义刻度数据 var pricearr = [];//价格 for(var i=0; i<result.date.length; i++){ dataarr.push([ i+1, result.avgprice[i] ]); tickarr.push([ i+1, result.date[i] ]); pricearr.push(result.avgprice[i]); } var minprice = pricearr.sort(function(a, b){return a - b})[0];//获取最小的铝锭价 if(minprice % 20 == 0){ minprice = minprice - 20; } else{ minprice = minprice - 30; } //数据源 var dataset = [{ "label": "最近 " + result.date.length + " 日铝锭价", "data": dataarr,//折线图数据 }]; //配置 var options = { xaxis: { ticks: tickarr,//x轴自定义刻度数据 }, yaxis: { min: minprice,//最小刻度 ticksize: 20,//递增量 }, series: { lines: { show: true,//显示线段 linewidth: 1.5, }, points: { show: true,//显示节点 radius: 3, }, color: "#7ac0da", }, grid: { hoverable: true,//鼠标移动到节点会有效果 borderwidth: 1,//最外边的边框 backgroundcolor: { colors: ["#ffffff", "#edf5ff"] }, }, legend: { nocolumns: 0, labelboxbordercolor: "#000000", position: "sw", backgroundopacity: 0.1, }, shadowsize: 0,//曲线阴影 }; //节点hover事件 $.fn.usetooltip = function () { var prepoint = null, prelabel = null; $(this).bind("plothover", function (event, pos, item) { if (item) { if ((prelabel != item.series.label) || (prepoint != item.dataindex)) { prepoint = item.dataindex; prelabel = item.series.label; $("#tooltip").remove(); $(this).css({ "cursor": "pointer" }) if (item.seriesindex == 0) { showtooltip( item.pagex + 100, item.pagey - 10, "#f7d373", result.date[item.dataindex] + " 铝锭价: " + item.series.data[item.dataindex][1]); } } } else { prepoint = null; prelabel = null; $(this).css({ "cursor": "auto" }); $("#tooltip").remove(); } }); }; if (pricearr.length > 0) { $.plot($("#placeholder"), dataset, options); $("#placeholder").usetooltip(); } } //提示框 function showtooltip(x, y, color, contents) { $('<div id="tooltip">' + contents + '</div>').css({ position: 'absolute', display: 'none', top: y - 40, left: x - 120, border: '2px solid ' + color, padding: '3px', 'font-size': '9px', 'border-radius': '5px', 'background-color': '#fff', 'font-family': 'verdana, arial, helvetica, tahoma, sans-serif', opacity: 0.9 }).appendto("body").fadein(200); } </script> </head> <body> <div id="placeholder" style="width:400px;height:200px;"></div> </body> </html>
2、运行效果图如下:
附:jquery.flot.js插件本站下载地址:
更多关于jquery相关内容感兴趣的读者可查看本站专题:《jquery常用插件及用法总结》、《jquery中ajax用法总结》、《jquery表格(table)操作技巧汇总》、《jquery扩展技巧总结》、《jquery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jquery程序设计有所帮助。