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

【www.bbyears.com--jquery】

1、完整实例代码：

    

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

      });

      functionAlPriceQuery(){

        varresult = {

          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"],

        }

        varDataArr = [];//y轴数据

        varTickArr = [];//x轴自定义刻度数据

        varPriceArr = [];//价格

        for(vari=0; i

          DataArr.push([ i+1, result.AvgPrice[i] ]);

          TickArr.push([ i+1, result.Date[i] ]);

          PriceArr.push(result.AvgPrice[i]);

        }

        varMinPrice = PriceArr.sort(function(a, b){returna - b})[0];//获取最小的铝锭价

        if(MinPrice % 20 == 0){

          MinPrice = MinPrice - 20;

        }

        else{

          MinPrice = MinPrice - 30;

        }

        //数据源

        varDataSet = [{

          "label":"最近 "+ result.Date.length +" 日铝锭价",

          "data": DataArr,//折线图数据

        }];

        //配置

        varOptions = {

          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() {

          varPrePoint =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();

        }

      }

      //提示框

      functionShowTooltip(x, y, color, contents) {

        $(''+ 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);

      }

    </script>

2、运行效果图如下：

本文来源：http://www.bbyears.com/wangyezhizuo/131138.html