flot 曲线图 入门

Flot 是一个用Jquery写的绘图的类库

安装

Just include the Javascript file after you've included jQuery.

Note that you need to get a version of Excanvas (I currently suggest
you take the one bundled with Flot as it contains a bugfix for drawing
filled shapes) which is canvas emulation on Internet Explorer. You can
include the excanvas script like this:

<!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->

If it's not working on your development IE 6.0, check that it has
support for VML which excanvas is relying on. It appears that some
stripped down versions used for test environments on virtual machines
lack the VML support.

Also note that you need at least jQuery 1.2.1.

基本用法

Create a placeholder(占位符) div to put the graph(曲线图) in:

   <div id="placeholder"></div>

You need to set the width and height of this div, otherwise the plot
library doesn't know how to scale(衡量) the graph. You can do it inline like
this:

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

You can also do it with an external(外部) stylesheet.

Then on document ready, run the plot function:

$.plot($("#placeholder"), data, options);

Here, data is an array of data series(连续) and options is an object with
settings if you want to customize the plot. Take a look at the
examples for some ideas of what to put in or look at the reference
in the file "API.txt".

The plot function immediately draws the chart and then returns a Plot
object with a couple of methods.

function Plot(target_, data_, options_) {
        // data is on the form:
        //   [ series1, series2 ... ]
        // where series is either just the data as [ [x1, y1], [x2, y2], ... ]
        // 或者 { data: [ [x1, y1], [x2, y2], ... ], label: "some label" }
        E.g.
   [ [1, 3], [2, 14.01], [3.5, 3.14] ]
   {[ data:[1, 3], [2, 14.01], [3.5, 3.14]],label:"第一季度" }
   [{[ data:[1, 3], [2, 14.01], [3.5, 3.14]],label:"第一季度" },{[ data:[1, 3], [2, 14.01], [3.5, 3.14]],label:"第二季度" }]
   注意：X,Y 轴坐标必须为数字，如果坐标为null ,或者其中的一个坐标点为空，或者不是数字，或者说不能转换为数字，那么这个节点将被忽略，
        在空节点的位置，线将被截断
        var series = [];
        var options = {
            // the color theme used for graphs
            colors: ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"], // 或者 "red","black"
            legend: {
                show: true,   //显示或隐藏
                noColumns: 1, // number of colums in legend table //标记显示的列数
                labelFormatter: null, // fn: string -> string //标记显示的形式，接受一个字符串，返回一个字符串
   // labelFormatter:function(label){return "<a href="+label+">"+label+"</a>"}
                labelBoxBorderColor: "#ccc", // border color for the little label boxes //边框颜色
                container: null, // container (as jQuery object) to put legend in, null means default on top of graph
           //   图例相对于页面的位置，$('＃love')
                position: "ne", // position of default legend container within plot //
           //   图例相对于报表的位置，ne :图例显示在报表里面，top-left,top-right: 图例显示在报表的外面
                margin: 5, // distance from grid edge to default legend container within plot
                backgroundColor: null, // null means auto-detect //图例的背景颜色
                backgroundOpacity: 0.85 // set to 0 to avoid background //图例背景颜色的透明度
            },
            xaxis: {
                mode: null, // null or "time"
                min: null, // min. value to show, null means set automatically //x 轴的起点
                max: null, // max. value to show, null means set automatically // x 轴的终点
                autoscaleMargin: null, // margin in % to add if auto-setting min/max //自动递增量
                ticks: null, // either [1, 3] or [[1, "a"], 3] or (fn: axis info -> ticks) or app. number of ticks for auto-ticks
                tickFormatter: null, // fn: number -> string               
                tickDecimals: null, // no. of decimals, null means auto
                tickSize: null, // number or [number, "unit"]   //步长
                minTickSize: null, // number or [number, "unit"]
                monthNames: null, // list of names of months
                timeformat: null // format string to use
            },
            yaxis: {
                autoscaleMargin: 0.02
            },
            points: {
                show: false, //坐标点 显示/隐藏
                radius: 3,    //坐标点的半径
                lineWidth: 2, // in pixels //坐标圆点的边框宽度
                fill: true, //坐标圆点是否填充
                fillColor: "#ffffff" //填充颜色
            },
            lines: {
                show: false, //坐标点之间的连线 显示/隐藏
                lineWidth: 2, // in pixels //连线的宽度
                fill: false, //范围区域是否被填充(0 为边界值)
                fillColor: null //范围区域填充的颜色
            },
            bars: {
                show: false, //柱状图 显示/隐藏
                lineWidth: 2, // in pixels //柱状图边框的宽度
                barWidth: 1, // in units of the x axis // 柱状图 X 轴上的宽度
                fill: true, //柱状图内部是否被填充
                fillColor: null //柱状图内部填充的颜色
            },
            grid: {
                color: "#545454", // primary color used for outline and labels
                //报表边框，以及XY 轴，图例标签的颜色
                backgroundColor: null, // null for transparent, else color //报表的背景颜色
                tickColor: "#dddddd", // color used for the ticks //报表网格线的颜色
                labelMargin: 3, // in pixels
                borderWidth: 2, //边框的宽度
                clickable: null, //是否能点击
                coloredAreas: null, // array of { x1, y1, x2, y2 } or fn: plot area -> areas
                coloredAreasColor: "#f4f4f4"
            },
            selection: {
                mode: null, // one of null, "x", "y" or "xy" //选择区域的形式
                color: "#e8cfac"    //被选择区域的颜色
            },
            shadowSize: 4   //报表阴影
        };

转载于:https://www.cnblogs.com/qinhaijun/archive/2011/08/26/2154449.html