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 =
9c5a
$.parseJSON(series);
onDataReceived(series);
}
});

注：这段js原来从后台取数据用，方法是我们自己封装好的，不外传，调用后台的“GetmyAvgPriceJson”方法返回数据看，转换成json格式

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