jquery.flot.js简单绘制折线图用法示例


Posted in Javascript onMarch 13, 2017

本文实例讲述了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简单绘制折线图用法示例

Javascript 相关文章推荐
用js实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
javascript椭圆旋转相册实现代码
Jan 16 Javascript
使用jquery组件qrcode生成二维码及应用指南
Feb 22 Javascript
javascript cookie的简单应用
Feb 24 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
js中对象与对象创建方法的各种方法
Feb 27 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
世界上最短的数字判断js代码
Sep 09 Javascript
深入理解Node.js中的进程管理
Mar 13 #Javascript
jQuery简易时光轴实现方法示例
Mar 13 #Javascript
JavaScript评论点赞功能的实现方法
Mar 13 #Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 #Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 #Javascript
JS实现直接运行html代码的方法
Mar 13 #Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 #Javascript
You might like
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
php生成随机数或者字符串的代码
2008/09/05 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
php中final关键字用法分析
2016/12/07 PHP
ie 调试javascript的工具
2009/04/29 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
2020/03/20 jQuery
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
Python3多线程操作简单示例
2018/05/22 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
感恩祖国演讲稿
2014/09/09 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
Python函数中的不定长参数相关知识总结
2021/06/24 Python
vue实现滑动解锁功能
2022/03/03 Vue.js
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers