本章會提供直條圖以及橫條圖的範例. 製作直條圖的做法和製作折線圖做法大同小異, 只要你有看過上一章折線圖的做法, 相信在這一章也能輕易上手.
直條圖範例
直條圖做法
在這個範例裡, 我們用的是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>