jquery.flot.js簡單繪制折線圖用法示例

2019-11-19 17:10:34

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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、運行效果圖如下：