分区图范例(历年世界人口估计)
分区图资料
我们先建立一个<div>, 并且指定一个id, 且设定长度及宽度, 这将会成为Flot绘图的定位点.<div id="flot-placeholder" style="width:400px;height:300px"></div>
//Oceania var rawData1 = [ [year(1800), 200], [year(1850), 200], [year(1900), 600], [year(1950), 1281], [year(1955), 1426], [year(1960), 1589], [year(1965), 1766], [year(1970), 1944], [year(1975), 2156], [year(1980), 2283], [year(1985), 2467], [year(1990), 2668], [year(1995), 2892], [year(2000), 3104], [year(2005), 3299], [year(2010), 3510] ]; //North America var rawData2 = [ //skip ]; //rawData3 rawData4... function year(year) { return new Date(year, 1, 1).getTime(); }
var dataSet = [ { label: "Asia", data: rawData6, color: "#0077FF" }, { label: "Africa", data: rawData5, color: "#7D0096" }, { label: "Europe", data: rawData4, color: "#DE000F" }, { label: "Latin America", data: rawData3, color: "#00B503" }, { label: "North America", data: rawData2, color: "#ED7B00" }, { label: "Oceania", data: rawData1, color: "#E8E800" } ];
分区图选项
分区图和折线图其实只差在series.lines.fill的设定, 若设定为true, 就会以分区图绘制, 如果没有设定或是设成false,就会以折线图绘制. 而series.lines.show则是设定线条要不要显示.series: { lines: { show: true, fill: true } }
另外为了控制x轴刻度标签, 设定了xaxis.tickSize, tickSize为刻度之间的间隔大小,格式为[value, unit],我们设定为[20, "year"],表示年份会依每20年的间隔出现, 而unit也可以设定为"day"、"hour"等, 不过要特别注意, 如果你设定的unit太小如"hour"而你的数据源且是以年计算的话,可能会因为Flot在绘图时做得计算过久而造成浏览器无响应.
因为Flot没有内建轴卷标的功能,所以需要加入jquery.flot.axislabels.js插件来达成,加入后就可以设定,axis.axisLabel为要显示的名称axis.axisLabelPadding则设定标签填充的空间大小,另外还可以设定字型及文字大小等.
为了让刻度标签更美观, 可以用axis.tickFormatter自定义函式,这函式传入了2个参数, tick value和axis object, 并且会传回字符串.要让y轴的数字显示货币格式,我们用了number formatter,如此一来y轴刻度标签就能够更易读.
xaxis: { axisLabel: "Year", axisLabelUseCanvas: true, axisLabelFontSizePixels: 12, axisLabelFontFamily: 'Verdana, Arial', axisLabelPadding: 10, mode: "time", tickSize: [20, "year"], timeformat: "%Y" } yaxis: { axisLabel: "Population (multiply by 10,000)", axisLabelUseCanvas: true, axisLabelFontSizePixels: 12, axisLabelFontFamily: 'Verdana, Arial', axisLabelPadding: 3, tickFormatter: function (v, axis) { return $.formatNumber(v, { format: "#,###", locale: "us" }); } }
legend: { noColumns: 3, labelBoxBorderColor: "#858585", position: "nw" }
另外因为我们会用到提示框功能,所以grid.hoverable要设定true,当hoverable为true时,Flot会监听鼠标事件并触发"plothover"事件.
grid: { hoverable: true, borderWidth: 2, backgroundColor: { colors: ["#ffffff", "#EDF5FF"] } }
提示框(tooltip)
由于Flot并没有内建提示框功能,所以必须自行建置,以下是提示框功能完整程序代码,详细的说明在往后的章节会提到.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; showTooltip(item.pageX, item.pageY, color, "<strong>" + item.series.label + "</strong><br>" + new Date(x).getFullYear() + " : <strong>Population : " + $.formatNumber(y, { format: "#,###", locale: "us" }) + "</strong> (multiply by 10,000)"); } } else { $("#tooltip").remove(); previousPoint = null; } }); }; function showTooltip(x, y, color, contents) { $('<div id="tooltip">' + contents + '</div>').css({ position: 'absolute', display: 'none', top: y - 10, left: x + 10, 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); }
完成绘图
最后把上面建立的dataSet以及options带入$.plot, 并把$.plot函式放到document.ready里,防止dom还未完全加载Flot就开始绘图所造成的错误.最后再用UseTooltip()建立提示框的功能.$(document).ready(function () { $.plot($("#flot-placeholder"), dataSet, options); $("#flot-placeholder").UseTooltip(); });
timeformat参数
%a: weekday name (customizable) %b: month name (customizable) %d: day of month, zero-padded (01-31) %e: day of month, space-padded ( 1-31) %H: hours, 24-hour time, zero-padded (00-23) %I: hours, 12-hour time, zero-padded (01-12) %m: month, zero-padded (01-12) %M: minutes, zero-padded (00-59) %q: quarter (1-4) %S: seconds, zero-padded (00-59) %y: year (two digits) %Y: year (four digits) %p: am/pm %P: AM/PM (uppercase version of %p) %w: weekday as number (0-6, 0 being Sunday)