您的位置：首页 > Web前端 > JQuery

JQuery图表插件Flot之效果源码

2016-06-03 08:42 459 查看
 FLot是一个JQuery下图表插件，具有简单实用，交互效果，具有吸引力外观特点。

函数调用方法：

var plot=$.plot(placeholder,data,options)

图表相当于一幅画，如果自己要画一幅数据图都需要什么，应该怎么做呢？

一张画纸：即placeholder,绘图函数将把图画在placeholder内，这个占位符必须设置高宽，也就是确定画纸的大小。

横纵坐标数据：即data这个图表内都需要画那些东西。由data确定

样式：即options图表的颜色，事件，名称等等。

效果图：



Javascript代码：
var data1 = [[new Date(2016,6,2),95],[new Date(2016,7,2),100],[new Date(2016,8,2),110],
[new Date(2016,9,2),95],[new Date(2016,10,2),105],[new Date(2016,12,2),160]];
var data2 = [[new Date(2016,6,2),110],[new Date(2016,7,2),125],[new Date(2016,8,2),160],
[new Date(2016,9,2),130],[new Date(2016,10,2),135],[new Date(2016,12,2),140]];
$.plot("#placeholder", [
{ label: "低压", data: data1 },
{ label: "高压", data: data2 }
], {
series: {
lines: { show: true },
points: { show: true }
},
xaxis: {
mode: "time",
timeformat: "%Y-%m-%d"
},
yaxis: {
ticks:10,
min: 80,
max: 200,
},
grid: {
backgroundColor: { colors: [ "#fff", "#eee" ] },
hoverable: true,
clickable: true,
borderWidth: {
top: 0,
right: 0,
bottom: 1,
left: 0
}
}
});
$("<div id='tooltip'></div>").css({
position: "absolute",
display: "none",
border: "1px solid #fdd",
padding: "2px",
"background-color": "#fee",
opacity: 0.80
}).appendTo("body");

$("#placeholder").bind("plothover", function (event, pos, item) {
//$("#x").text(pos.x.toFixed(2));
//$("#y").text(pos.y.toFixed(2));
//var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
//$("#hoverdata").text(str);
if (item) {
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
$("#tooltip").html(item.series.label + " : " + y)
.css({top: item.pageY+5, left: item.pageX+5})
.fadeIn(200);
} else {
$("#tooltip").hide();
}
});

$("#placeholder").bind("plotclick", function (event, pos, item) {
if (item) {
plot.highlight(item.series, item.datapoint);
}
});
});
</script>


HTML代码：

<body>
<div>
<h2>血压记录</h2>
</div>
<div id="content">
<div>
<div id="placeholder" style="width:700px;height:400px"></div>
<p id="hoverdata">
</div>
</div>
</body>

下篇文章将说明flot都有哪些常用的属性，方法。


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                Flot
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航