手机端小强原创文章,java小强个人博客站点
当前位置: 首页 >> JS >> JS绘图Flot应用-简单曲线图

JS绘图Flot应用-简单曲线图

69190 JS | 2014-6-18

首先对Flot做简单介绍:
flot 是一个基于jquery的开源javascript库,是一个纯粹的 jQuery JavaScript 绘图库,可以在客户端即时生成图形,使用非常简单,支持放大缩小以及鼠标追踪等交互功能。该插件支持 IE6/7/8/9, Firefox 2.x+, Safari 3.0+, Opera 9.5+ 以及 Konqueror 4.x+。使用的是 Safari 最先引入的 Canvas 对象(html5中新增的对象),目前所有主流浏览器都支持该对象, IE8以下等不支持的浏览器, 使用 JavaScript 进行模拟。
由于浏览器的支持问题,我们在做页面时一共需要三个页面,JQuery库、Flot库、excanvas.js这三个文件。
做出后效果如下,这个例子是对官方例子的简单修改而成的,增加了一些注释。

 

我们来看一下代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Flot曲线图</title>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript">
$(function () {
    var sin = [], cos = [];
 // 初始化数据
    for (var i = 0; i < 14; i += 0.5) {
        sin.push([i, Math.sin(i)]);
        cos.push([i, Math.cos(i)]);
    }
    var plot = $.plot(
  $("#placeholder"),
        [ { data: sin, label: "sin函数"}, { data: cos, label: "cos函数" } ], // 数据和右上角含义的提示
  {
     series: {
      lines: { show: true }, // 点之间是否连线
      points: { show: true } // 是否显示点
     },
     grid: { hoverable: true, clickable: true }, // 是否可以悬浮,是否可以点击
     yaxis: { min: -1.2, max: 1.2 }, // Y 轴 的最大值和最小值
     xaxis: { min: 0, max: 15 }      // X 轴 的最大值和最小值
   }); 
    var previousPoint = null;
 // 邦定事件
    $("#placeholder").bind("plothover", function (event, pos, item) {
        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:" + x + " Y:" + y);
                    //item.series.label + " of " + x + " = " + y); // 悬浮点时提示的内容
                }
            }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 #fdd',
            padding: '2px',
            'background-color': '#fee',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
    }
});
</script>
</head>
<body>
    <div id="placeholder" style="width:600px;height:300px"></div>
    <p><input id="enableTooltip" type="checkbox">Enable tooltip</p>
</body>
</html>

 

以上我们初始化一些数据, 然后进行设置,其中可以设置是否能够提示!
示例简单,希望能够帮助一些人吧,最后示例需要的文件和示例页面如下。

 

点击下载附件

 

推荐您阅读更多有关于“ js flot 曲线 绘图 js绘图 ”的文章

上一篇:JSON简介与JS解析JSON 下一篇:java InputStream读取数据问题

猜你喜欢

发表评论:

个人资料
blogger

java小强
没有思考,人生的路会越走越难!

搜索
分类
最新微语
  • 车也学了,年也过了,生日也过了,村里的会也赶了,这次,是真的,年过去了。不过我没回京,也没有在家找工作,我在等什么吗?反正现在正合了我这个懒人的要求,不过,我歇不住,思考下人生。

    2018-03-20 00:11

  • 8月1日,我已离开奋斗多年的北京。不知道是暂时的离开,还是永久的离别,反正已经离职在家,告别每日上班,每天苦累的煎熬,过一段属于自己的生活。以前是专职工作,现在专职生活。

    2017-08-18 12:47

  • 又弄完一个项目,累成狗,但是感觉又进步不少,除了很多坑已经踩过,做起来也是轻车熟路。同时也认识到,程序不在于你多牛逼,而是在乎你的细节把控度,而细节的关注,是一个优秀程序员必须要注意的。另外,要相信自己,勇敢向前,没人生下来就是成功的,而且,成功的路,比成功本身更重要。

    2017-06-30 09:46

  • 今日北京再次沙尘暴来袭,吃了几年细粮,终于能来口粗粮了,不过大早上看见这场景,还是吓我一跳,不过随后就平静了,毕竟是老朋友了。进公司又发现一股烤糊的味道,真是祸不单行啊,例外都是污染。发了两个口罩,开启保护模式。

    2017-05-04 10:16

  • 今天同学问我,最近还在写代码吗?我想了想,这个问题怎么回答呢,我好像确实很长时间,虽然写了一些,但是主要内容已经不是写代码了。然后再想想,自己也7年多了,这么多年了,我收获了什么,我的目标到底是什么。眼看就奔三了,人生啊,开启感叹模式。

    2017-03-30 22:52

  • 更多»

最新文章
热门文章
随机文章