jquery.flot.js 之柱状图

Flot是一个Jquery下图表插件，具有简单使用，交互效果，具有吸引力外观特点。目前支持 Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+ 等浏览器，是一个基于Javascript和Jquery纯客端户的脚本库，下面看一个简单的示例，先插入js:

jquery.flot.js还有其他的一些js文件，根据名字也很好理解它的意思：

如果要支持IE9以下的浏览器,您需要使用Excanvas, 一个canvas 模拟器，所以还需要加入这段标签:

然后放置一个DIV：<div id="flot"></div>

接着自定义一些js：

每一个X点的Y值：var data1 = [[0,5],[1,3],[2,2],[3,0],[4,1],[5,2],[6,1],[7,4],[8,3],[9,2]];

每一个X点显示的名称：var data2 = [[0,'属性1'],[1,'属性2'],[2,'属性3'],[3,'属性4'],[4,'属性5'],[5,'属性6'],[6,'属性7'],[7,'属性8'],[8,'属性9'],[9,'属性10']];

定义柱状图：

var barData = new Array();
barData.push({
data : data1,
bars : {
show : true,
barWidth : 0.7,
order : 1,
fill:1,
lineWidth: 0,
fillColor: 'green',//柱状图颜色
align: "center",
}
});

定义柱状图的细节：

$.plot($("#flot"), barData, {
grid : {
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.25)',
show : true,
hoverable : true,
clickable : true,
},
yaxis: {
tickColor: 'rgba(255,255,255,0.15)',
tickDecimals: 0,
font :{
lineHeight: 13,
style: "normal",
color: "rgba(255,255,255,0.8)",
},
shadowSize: 0,
},
xaxis: {
tickColor: 'rgba(255,255,255,0)',
tickDecimals: 0,
font :{
lineHeight: 13,
style: "normal",
color: "rgba(255,255,255,0.8)",
},
shadowSize: 0,
ticks:data2
},
legend : true,
tooltip : true,
tooltipOpts : {
content : "<b>%x</b> = <span>%y</span>",
defaultTheme : false
}
});

鼠标移上柱状图时弹出提示框：

$("#flot").bind("plothover", function (event, pos, item) {
if (item) {
var x = item.datapoint[0].toFixed(2),
/* y = item.datapoint[1].toFixed(2); */
y = item.datapoint[1];

var buf = x;
switch(x){
case "1.00": buf=data2[0][1]; break;
case "2.00": buf=data2[1][1]; break;
case "3.00": buf=data2[2][1]; break;
case "4.00": buf=data2[3][1]; break;
case "5.00": buf=data2[4][1]; break;
case "6.00": buf=data2[5][1]; break;
case "7.00": buf=data2[6][1]; break;
case "8.00": buf=data2[7][1]; break;
case "9.00": buf=data2[8][1]; break;
//鼠标以上后展示名称
default: buf="未知";
}

$("#barchart-tooltip").html( buf + " : " + y).css({top: item.pageY+5, left: item.pageX+5}).fadeIn(200);
}else {
$("#barchart-tooltip").hide();
}
});
$("<div id='barchart-tooltip' class='chart-tooltip'></div>").appendTo("body");
});

最后的结果：

jquery.flot.js 之 柱状图

猜你喜欢

jquery.flot.js 之柱状图