flot 图表功能

前段时间上级领导让我研究一下flot图表，因为网站以前的图表采用的是flash，很多都不支持，所以改用一个的图表控件，以下是本人花了一个礼拜才研究出来的一个图表功能js

可以实现鼠标在当前点的垂直方向上，高亮显示改点数据，如果是两条数据线，则选择较近的那条线的数据。

以下是JS代码

//均价图======================================================
function onDataReceived(date, size) {
    /*var data = [
                    { data: a, label: "珠海" },
                    { data: b, label: "吉大" }
		        ];*/
    var data = date;//date表示传来的参数格式如[{data:[1,2],label:'remark'}]
    var options = {
        canvas: true,
        colors: ["#E3563A", "#4572A7"], //每条线的颜色
        xaxes: [{ mode: "time", //X轴是以时间轴显示
            tickFormatter: function (value) {//格式化时间
                value = new Date(parseInt(value));
                value = "{0}月{1}日 ".format((value.getMonth() + 1), value.getDate());
                return value;
            },
            minTickSize: size=="small" ? [2, "month"] : null //如果为小图，则将X轴的刻度设为两个月
        }],
        yaxes: [{//Y轴的显示格式
            tickFormatter: function (value) {
                return fmoney(value) + "元";
            },
            autoscaleMargin: 0.35
        }],
        legend: { position: "nw", //图表的标题显示位置
            noColumns: 2, //标题显示多少列（保证在同一行显示）
            backgroundOpacity: 1.5//
        },
        series: {//图表线条的设置
            lines: {
                show: true//是否显示线
            },
            points: {
                show: false//是否显示点
            }
        },
        /*crosshair: {//显示鼠标跟随的那条线
        mode: "x"
        },*/
        grid: {//
            hoverable: true, //允许鼠标移动事件
            clickable: true, //允许点击事件
            borderWidth: { left: 2, right: 0.2, top: 0.2, bottom: 2 }, //边框的显示宽度
            mouseActiveRadius: 5//鼠标距离最近数据点的半径
        }
    };

    var plot = $.plot("#placeholder", data, options);//显示数据线
    $("#placeholder").bind("plothover", function (event, pos, item) {//鼠标移动事件
        latestPosition = pos; //鼠标的位置
        if (!updateLegendTimeout) {//执行鼠标移动后的方法规定
            updateLegendTimeout = setTimeout(function () { updateLegend(item); }, 50); //
        }
    });
    
    var updateLegendTimeout = null;
    var latestPosition = null;
    //鼠标移动方法
    function updateLegend(item) {
        updateLegendTimeout = null;
        var pos = latestPosition;//鼠标的位置
        var axes = plot.getAxes(); //数据线中的参数
        var i, j, dataset = plot.getData(); //定义数据线中的数据
        //鼠标的位置不出线型图的最大最小值范围
        if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
            pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
            $("[name=tooltip]").hide(); //
            for (i = 0; i < dataset.length; ++i) {
                var seriess = dataset[i]; //每条线中各个点的信息数据
                for (j = 0; j < dataset[i].data.length; ++j) {
                    plot.unhighlight(seriess, seriess.data[j]); //删除线上所有的点的高亮属性
                }
            }
            return;
        }
        $("[name=tooltip]").hide(); //当鼠标离开图表时，提示框消失
        var mytime = [];//每条线的X坐标
        var mymoney = [];//每条线的Y坐标
        var myseries = [];//每条线的其他属性信息
        var time = null;
        var money = null;
        var newseries=null;//用来定义显示框中的参数数据
        //循环出传来的数据
        for (i = 0; i < dataset.length; ++i) {
            var series = dataset[i]; //每条线中各个点的信息数据
            for (j = 0; j < series.data.length; ++j) {
                plot.unhighlight(series, series.data[j]); //删除线上所有的点的高亮属性
            }
            for (j = 0; j < series.data.length; ++j) {
                if (series.data[j][0] > pos.x) {
                    break;
                }
            }
            //取一条数据中，鼠标最近的两个点（有时候会是一个点）
            //p1表示第一个点，p2表示第二个点，如：p1[0]表示第一条数据线的第一个点的X坐标
            var p1 = series.data[j - 1], p2 = series.data[j];
            //判断鼠标附件是否有两个点，如果有两个点
            if (series.data[j] != null && series.data[j - 1] != null) {
                //如果鼠标所在X轴的位置距离与中介线
                //平分两个点，判断鼠标的位置在中介线的哪一侧，如果在右侧则取第二个点的数据
                if (pos.x > (p2[0] + p1[0]) / 2 ) 
                {
                    mytime[i] = p2[0];
                    mymoney[i] = p2[1];
                } else {//如果在左侧则取第一个点的数据
                    mytime[i] = p1[0];
                    mymoney[i] = p1[1];
                }
            }else if( series.data[j - 1] ==null) {//第一个点不存在
                mytime[i] = p2[0];
                mymoney[i] = p2[1];
             }
            else {//如果真有一个点，只取第一个点的数据
                mytime[i] = p1[0];
                mymoney[i] = p1[1];
            }
            myseries[i] = series;
            //mymoney[0]表示第一条线的Y轴数据值，mymoney[1]表示第二条线的Y轴数据值
            //如果鼠标的位置在这两个值得中介线的一方
            if (pos.y > (mymoney[0] + mymoney[1]) / 2 ) //
            {
                //哪个值大就选哪个值作为显示的点数
                money = (mymoney[0] - mymoney[1]) > 0 ? mymoney[0] : mymoney[1];
                time = (mymoney[0] - mymoney[1]) > 0 ? mytime[0] : mytime[1];
                newseries = (mymoney[0] - mymoney[1]) > 0 ? myseries[0] : myseries[1];
            } else {
                money = (mymoney[0] - mymoney[1]) > 0 ? mymoney[1] : mymoney[0];
                time = (mymoney[0] - mymoney[1]) > 0 ? mytime[1] : mytime[0];
                newseries = (mymoney[0] - mymoney[1]) > 0 ? myseries[1] : myseries[0];
            }
        }
        var dataPointCrood = plot.pointOffset({ x: time, y: money }); //将点所在的坐标格式化
        var placeholder = plot.getPlaceholder().offset(); //取出当前坐标的绝对位置
        var showPageX = dataPointCrood.left + placeholder.left; //提示信息在图表中位置X
        var showPageY = dataPointCrood.top + placeholder.top; //提示信息在图表中位置Y
        $("[name=tooltip]").hide(); //移动到下一个点时
        var lasttime = new Date(parseInt(time)); //获取X轴时间
        lasttime = "{0}年{1}月{2}日 ".format(lasttime.getFullYear(), (lasttime.getMonth() + 1), lasttime.getDate()); //转化时间
        showTooltip(showPageX, showPageY, lasttime + "<br/>" + newseries.label + fmoney(money) + "元/平方"); //显示提示框
        plot.highlight(newseries, [time, money]);//将点高亮显示
    }
    //显示当鼠标移上某个点时显示的内容
    //x:表示X轴坐标
    //y:表示Y轴坐标
    //contents:表示显示的内容
    function showTooltip(x, y, contents) {
        var $tooltip = $("#tooltip"); //
        if ($tooltip.length == 0) {//防止创建多次显示框，只更改里面的显示数据
            $tooltip = $("<div name='tooltip'></div>");
            $tooltip.css({
                position: "absolute",
                border: "1px black solid",
                padding: "2px",
                "background-color": "#fee",
                color: "#333"
            });
            $tooltip.appendTo("body");
        } 
        $tooltip.css({
            top: y + 3,
            left: x + 3
        });
        $tooltip.html(contents);
    };
};

//显示当鼠标移上某个点时显示的内容
//x:表示
//y:表示
//contents:表示显示的内容


//格式化金额数字
function fmoney(money) {
    var s = parseFloat((money + "").replace( /[^\d\.-]/g , "")) + "";
    var l = s.split(".")[0].split("").reverse(),
        t = "";
    for (var i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
    }
    return t.split("").reverse().join("");
}
//=============================================================







页面代码

<div class="simple-tab">房价走势图</div>
<h3 align="center">历史所有珠海老香洲房价走势图</h3>
<div class="demo-container">
    <div id="placeholder" style="width: 980px;height: 328px" class="demo-placeholder"></div>
</div>
//flot 图表操作
            $.jSyAjax.get({
                url: '@(Url.Action("GetmyAvgPriceJson", "XiaoQu", new { id = ViewBag.StringQuery }))',
                onComplete: function(series) {
                    series = $.parseJSON(series);
                    onDataReceived(series);
                }
            });
注：这段js原来从后台取数据用，方法是我们自己封装好的，不外传，调用后台的“GetmyAvgPriceJson”方法返回数据看，转换成json格式

附上flot官方API：flot官网API 介绍(纯英文)