【部分原创】jquery图表插件flot笔记

最新推荐文章于 2018-02-23 15:32:10 发布

如惈

最新推荐文章于 2018-02-23 15:32:10 发布

阅读量8.9k

点赞数

分类专栏：默认分类

本文链接：https://blog.csdn.net/phpwish/article/details/8124247

版权

本文详细介绍了jQuery图表插件Flot的使用，包括基本使用、数据格式、选项设置、轴的自定义、时间格式数据、特殊显示需求以及事件处理。Flot基于canvas，支持在主流浏览器上运行，并提供了丰富的定制选项，如控制线和点的显示、颜色的设定以及跟踪鼠标事件等。

摘要由CSDN通过智能技术生成

Flot是纯Javascript实现的基于jQuery的图表插件，主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图)。

它的特点是使用简单、图形美观，支持鼠标跟踪及缩放功能。

Flot是基于canvas进行图表的绘制，可以在IE6+/Firefox2+/Safari3+/Opera9.5+/Chrome等主流浏览器上运行；其中IE9以下浏览器不支持canvas标记，需要额外引用excanvas库(VML)来实现。

这是我做的测试效果图。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>demo</title>
    <link href="../examples/layout.css" rel="stylesheet" type="text/css">
    <!--[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>

 </head>
 <body>
<div id="placeholder" style="width:600px;height:300px"></div>

<script type="text/javascript">
$(function () {
	var pl = $.plot($("#placeholder"), 
  [//球员图片可以单独定义 或者和下面的日期一样 和每场数据合并在一起（这样好像有点浪费带宽）
   { label: "凯文-杜兰特", data: [[1,49,"热火vs湖人","05月01日"], [2,22,"热火vs雷霆","05月02日"], [3,36,"热火vs蛮牛","05月03日"],[4,27,"热火vs骑士","05月24日"],[5,39,"热火vs雷霆","05月25日"],[6,25,"热火vs蛮牛","05月26日"],[7,18,"热火vs湖人","05月27日"],[8,29,"热火vs骑士","05月28日"],[9,32,"热火vs剑客","05月29日"],[10,27,"热火vs测试","05月30日"]]},
       { label: "麦克-詹姆斯", data: [[1,0,"冷锋vs雷霆","05月21日"],[2,0,"冷锋vs雷霆","05月22日"], [3,0,"冷锋vs雷霆","05月23日"],[4,37,"冷锋vs雷霆","05月24日"],[5,29,"冷锋vs雷霆","05月25日"],[6,21,"冷锋vs雷霆","05月26日"],[7,28,"冷锋vs雷霆","05月27日"],[8,19,"冷锋vs雷霆","05月28日"],[9,22,"冷锋vs雷霆","05月29日"],[10,29,"冷锋vs雷霆","05月30日"]]}
  ],
  {
  	series: {//控制线的填充、点的显示
  	  lines: { show: true},
  	  points: { show: true}
  	},
  	//开启鼠标移动和点击事件  折线图外框颜色 和 外框的宽度
  	grid: { hoverable: true, clickable: true, borderColor:'#000',borderWidth:1},
    xaxis: {//x轴的最大最小范围 和 刻度自定义。
      min: 0,
      max: 22,
      ticks: [1,3,5,7,9,11,13,15,17,19,21]
    },
    yaxis: {//y轴的最小范围
      min: 0,
      // max: 50

    }
  }
  );
	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);
	}

	// function getData(data, x) {
	// 	// alert(data);
	// 	// x = x-1;
	// 	return {data[x]['team'],data[x]['time']};
	// }

	var previousPoint = null;
	$("#placeholder").bind("plothover", function (event, pos, item) {
	  if (item) {
          if (previousPoint != item.dataIndex) {
              previousPoint = item.dataIndex;
              $("#tooltip").remove();
              var x = item.datapoint[0],//x y 轴位置
                  y = item.datapoint[1],
                  n = x-1;
                  // alert(item.series);
                  //var data = pl.getData();
                  var changci = item.series['data'][n][2],//场次信息 获取当前焦点的 数据信息 通过n（即x轴位置获取数据）
                  	  shijian = item.series['data'][n][3];//同上 场次信息获取原理。 比赛时间
                  	  // alert(changci);
                  // alert(changci);
     //              for(i in item.series){
					                   
					//  					document.write('i:'+i+'   '+item.series[i]+'<hr>');
					// }
              
              var contents = "<img src='http://sports.sohu.com/upload/lakers/Kobe-Bryant.jpg' />比赛场次："+changci+"<br />得分："+y+"<br />比赛时间："+shijian;

              showTooltip(item.pageX, item.pageY,contents);
          }
      }
      else {
          $("#tooltip").remove();
          previousPoint = null;            
      }
	});
});
</script>

 </body>
</html>

=========================================下面转载flot的参数======================================

基本使用

首先，在页面头部引用脚本：

 
        <!--[ 
        if  
        lte IE 8]><script src= 
        "js/excanvas.min.js" 
        ></script><![endif]--> 
       
 
        <script src= 
        "js/jquery.min.js" 
        ></script> 
       
 
        <script src= 
        "js/jquery.flot.min.js" 
        ></script> 
       

在页面中创建一个html标记，如div，然后通过样式来指定图表的大小：

1	`<` `div` `id` `=` `"placeholder"` `style` `=` `"width:600px;height:300px;"` `></` `div` `>`

最后，在DOM Ready事件中调用Flot的绘制方法$.plot：

 
        $( 
        function  
        () {
          
        $.plot($( 
        "#placeholder" 
        ), [[[0, 0], [1, 2]]]); 
       
        });

这样就简单的绘制了一条线。

数据格式

flot的数据格式是数组，数组中包含多个系列的数据，每个系列的数据对应一条线：

1	`[ series1, series2, ... ]`

每一个系列的数据可以是一个数组或者对象。

数组格式的数据，每一个点都是一个数组(分x/y轴)：

1	`[ [x1, y1], [x2, y2], ... ]`

如下定义了三个点：

1	`[ [1, 3], [2, 14.01], [3.5, 3.14] ]`

绘制图表的时候，会把这三个点连接起来；假如中间有个点使用了空值即null，这个点的两边则不会连接起来：

1	`[ [1, 3], [2, 14.01],` `null` `, [3.5, 3.14], [5, 8] ]`

需要注意的是，每个点的数据必须是数字，如果是字符串，可能会得到奇怪的错误。

对象格式的数据，如下：

 
        {
          
        color: color or number   
        //颜色，如果不设置会自动生成 
       
        data: rawdata  
        //数据 
       
        label: string  
        //用于图例说明 
       
        lines: specific lines options 
       
        bars: specific bars options 
       
        points: specific points options 
       
        xaxis: number 
       
        yaxis: number 
       
        clickable: boolean 
       
        hoverable: boolean 
       
        shadowSize: number 
       
        highlightColor: color or number 
       
        }

通常不需要关心其他选项，只需要指定label和data：

 
        {
          
        label: 
        "y = 3" 
        , 
       
        data: [[0, 3], [10, 3]] 
       
        }

对象格式的数据提供更大的灵活性，也更有利于代码的可读性，如下定义了两个系列即两条线：

 
        [ { label:  
        "Foo" 
        , data: [ [10, 1], [17, -14], [30, 5] ] }, 
       
        { label:  
        "Bar" 
        , data: [ [11, 13], [19, 11], [30, -7] ] } 
       
        ]