本章会提供柱形图以及条形图的范例. 制作柱形图的做法和制作折线图做法大同小异, 只要你有看过上一章折线图的做法, 相信在这一章也能轻易上手.
柱形图范例
柱形图做法
在这个范例里, 我们用的是2012世界城市的年平均温度做为绘图数据, 为了让范例简单一点, 我们只抓了6个城市的数据.一开始的做法和折线图一样, 先插入定位点到页面中, 并指定其id以及长度和宽度
<div id="flot-placeholder" style="width:400px;height:300px"></div>
var data = [
[0, 11], //London, UK
[1, 15], //New York, USA
[2, 25], //New Delhi, India
[3, 24], //Taipei, Taiwan
[4, 13], //Beijing, China
[5, 18] //Sydney, AU
];
var dataset = [
{ label: "2012 Average Temperature", data: data, color: "#5482FF" }
];
刻度数据完成后就可以指定到options里的xaxis.ticks里去, x轴就会显示你所设定的城市名称. y轴也可以自定义刻度数据, 如果是用在y轴上, 就指定到yaxis.ticks去即可.
var ticks = [
[0, "London"], [1, "New York"], [2, "New Delhi"], [3, "Taipei"], [4, "Beijing"], [5, "Sydney"]
];
xaxis: {
ticks: ticks
}
series: {
bars: {
show: true
}
},
bars: {
align: "center",
barWidth: 0.5
}
yaxis: {
tickFormatter: function (v, axis) {
return v + "°C";
}
}
xaxis: {
axisLabel: "World Cities",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
}
yaxis: {
axisLabel: "Average Temperature",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3
}
$(document).ready(function () {
$.plot($("#flot-placeholder"), dataset, options);
});
本范例完整程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="/js/lib/jquery-1.8.3.min.js" type='text/javascript'></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/js/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.symbol.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.axislabels.js"></script>
<script type="text/javascript">
//******* 2012 Average Temperature - BAR CHART
var data = [[0, 11],[1, 15],[2, 25],[3, 24],[4, 13],[5, 18]];
var dataset = [{ label: "2012 Average Temperature", data: data, color: "#5482FF" }];
var ticks = [[0, "London"], [1, "New York"], [2, "New Delhi"], [3, "Taipei"],[4, "Beijing"], [5, "Sydney"]];
var options = {
series: {
bars: {
show: true
}
},
bars: {
align: "center",
barWidth: 0.5
},
xaxis: {
axisLabel: "World Cities",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10,
ticks: ticks
},
yaxis: {
axisLabel: "Average Temperature",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3,
tickFormatter: function (v, axis) {
return v + "°C";
}
},
legend: {
noColumns: 0,
labelBoxBorderColor: "#000000",
position: "nw"
},
grid: {
hoverable: true,
borderWidth: 2,
backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
}
};
$(document).ready(function () {
$.plot($("#flot-placeholder"), dataset, options);
$("#flot-placeholder").UseTooltip();
});
function gd(year, month, day) {
return new Date(year, month, day).getTime();
}
var previousPoint = null, previousLabel = null;
$.fn.UseTooltip = function () {
$(this).bind("plothover", function (event, pos, item) {
if (item) {
if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
previousPoint = item.dataIndex;
previousLabel = item.series.label;
$("#tooltip").remove();
var x = item.datapoint[0];
var y = item.datapoint[1];
var color = item.series.color;
//console.log(item.series.xaxis.ticks[x].label);
showTooltip(item.pageX,
item.pageY,
color,
"<strong>" + item.series.label + "</strong><br>" + item.series.xaxis.ticks[x].label + " : <strong>" + y + "</strong> °C");
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
};
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 style="width:450px;height:300px;text-align:center;margin:10px">
<div id="flot-placeholder" style="width:100%;height:100%;"></div>
</div>
</body>
</html>