flot.js ajax,jquery.flot.js简单绘制折线图用法示例
本文实例讲述了jquery.flot.js简单绘制折线图用法。分享给大家供大家参考,具体如下:
1、完整实例代码:
折线图
$(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
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) {
$('
').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);
}
2、运行效果图如下:
希望本文所述对大家jQuery程序设计有所帮助。
flot.js ajax,jquery.flot.js简单绘制折线图用法示例相关推荐
- html语言制作折线图,html5 canvas 实现简单绘制折线图
画图 #divContainer{ margin-top: 20px; text-align: center; } #cv{ width: 300px; height: 200px; border-b ...
- d3js绘制y坐标轴_使用D3.js 绘制折线图
在一个网站上绘制折线图使用了ant/g2,打包后的体积到了一兆多,这不行了,需要按需加载.但是它的支持不太友好,我尝试在官网上用它的方法来按需引入,不是缺这就是缺那,很不好用. 反正我这里只是画个折线 ...
- python简单代码画曲线图教程-Python绘制折线图和散点图的详细方法介绍(代码示例)...
本篇文章给大家带来的内容是关于Python绘制折线图和散点图的详细方法介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.绘制折线图和散点图要用到matplotlib ...
- python画折线图代码-python绘制简单折线图代码示例
1.画最简单的直线图 代码如下: import numpy as np import matplotlib.pyplot as plt x=[0,1] y=[0,1] plt.figure() plt ...
- python画折线图详解-python绘制简单折线图代码示例
1.画最简单的直线图 代码如下: import numpy as np import matplotlib.pyplot as plt x=[0,1] y=[0,1] plt.figure() plt ...
- python画折线图虚线_python绘制简单折线图代码示例
1.画最简单的直线图 代码如下: import numpy as np import matplotlib.pyplot as plt x=[0,1] y=[0,1] plt.figure() plt ...
- python画折线图-python绘制简单折线图代码示例
1.画最简单的直线图 代码如下: import numpy as np import matplotlib.pyplot as plt x=[0,1] y=[0,1] plt.figure() plt ...
- python生成折线图怎么对特定点做颜色_python使用matplotlib绘制简单的折线图和散点图...
生成数据 数据可视化 数据可视化指的是通过可视化表示来探索数据,它与数据挖掘机密相关. 安装matplotlib 请访问https://pypi.python.org/pypi/matplotlib/ ...
- 使用jquery图表插件jqplot之折线图
首先一个简单的折线图: 直接上代码: <html> <head> <meta http-equiv="Content-Type" content=&q ...
最新文章
- 刚刚,百度宣布王海峰升任CTO
- Jolt大奖作品、重磅星级图书尽在十月
- 配置CentOS 7阿里云镜像源
- 移动端 | table 布局
- Nginx在多层代理下获取真实客户端IP地址
- MyBatis之查询缓存
- 浪潮服务器 NF 8460M4 的PM8060 RAID卡设置添加热备方法
- 无理由退房退机票,做携程超级会员就是这么任性
- Radware;医疗行业数字转型5大关键注意事项
- QTdesigner使用--待更新
- 于Linux下s、t、i、a权限
- error:there‘s no Qt version assigned to project please assign a Qt installation in qt project settin
- JAVA与SQL对应数据类型转换表
- MIDIPLUS STUDIO M S 2 4声卡安装调试教程
- 会议论文有没有影响因子_关于论文是否被SCI、Ei、ISTP等检索以及期刊影响因子的解说...
- 高德地图api接口免费查询天气实战案例,axios请求查询天气,js版,【接上一篇微信测试号推送纪念日】
- unity overrideSprite的使用
- html群聊插件,团队群聊.html
- android aar 自动引入依赖
- java实现花呗分3、6、12期计算用户每期手续费及每期总费用
热门文章
- 创业公司的每月收入与支出做帐
- 读杨睿之之《作为哲学的数理逻辑》
- C语言例题——输出1000以内的所有完数
- 和叶帆老师学.Net Micro Framework,做好学习笔记
- 关于@(posedge clk)和@(itf.cb)的区别
- 《Cisco局域网交换机配置手册(第2版•修订版)》一延伸阅读
- Flash钓鱼->CS上线(免杀过火绒、360等)
- 思科交换机与路由器基础命令(一)
- hackthebox- kotarak(考点:信息搜集隐藏端口 tom 上传 域文件解析 wget-gnu 1.16提权 )
- 记录KMP算法,记录其经典之处。。。