<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></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.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.axislabels.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.stack.js"></script>
<script type="text/javascript" src="/js/flot/jshashtable-2.1.js"></script>
<script type="text/javascript" src="/js/flot/jquery.numberformatter-1.2.3.min.js"></script>
接着我们将网站的DNS查询数据建立成如下的数组格式,因为我们是用时间格式数据,所以建立了一个gd()函式用来取得javascript timestamps.这个范例我们用了3笔资料,为了简化说明,我们这里只显示1笔数据出来,后面2笔资料格式都是一样的,数据格式程序代码如下.
var data = [
[gd(2012, 1, 1), 208557], [gd(2012, 1, 2), 125068], [gd(2012, 1, 3), 931208], [gd(2012, 1, 4), 450040],
[gd(2012, 1, 5), 761180], [gd(2012, 1, 6), 744526], [gd(2012, 1, 7), 707095], [gd(2012, 1, 8), 601316],
[gd(2012, 1, 9), 187495], [gd(2012, 1, 10), 716189], [gd(2012, 1, 11), 587141], [gd(2012, 1, 12), 147266],
[gd(2012, 1, 13), 574670], [gd(2012, 1, 14), 175881], [gd(2012, 1, 15), 272519], [gd(2012, 1, 16), 211131],
[gd(2012, 1, 17), 637015], [gd(2012, 1, 18), 794050], [gd(2012, 1, 19), 399010], [gd(2012, 1, 20), 799942],
[gd(2012, 1, 21), 595768], [gd(2012, 1, 22), 717126], [gd(2012, 1, 23), 414923], [gd(2012, 1, 24), 462479],
[gd(2012, 1, 25), 674334], [gd(2012, 1, 26), 20312], [gd(2012, 1, 27), 675892], [gd(2012, 1, 28), 808655],
[gd(2012, 1, 29), 194543], [gd(2012, 1, 30), 664716], [gd(2012, 1, 31), 980720]
]
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime()
}
堆栈图选项
当你要画堆栈图时需要设定series.stack为true,这样Flot就会以堆栈图呈现,另外我们做的是堆栈折线图,我们可以设定series.lines.fill为true,让图表用颜色填满区块,程序代码如下.
series: {
stack: true,
lines: {
show: true,
fill: true
}
}
x轴和y轴部份我们一样在<head>里加入jquery.flot.axislabels.js档案后用设定axis.axisLabel设定轴标签名称还有其它如字号及字型样式等,因为我们是用时间格式数据,所以xaxis.mode必须设定用"time",因为数据是抓一个月份的数据,所以xaxis.tickSize设定成[3, "day"],3表示刻度卷标以每隔3天显示,而"day"而表示以日期显示,xaxis.tickLength我们设定为10,表示刻度线以高度10像素来显示.而axis.color设定成"black",这表示刻度标签的颜色,因为Flot默认的标签颜色为灰色的,我们改成黑色的比较明显.
另外yaxis.tickFormatter用来自行定义刻度标签的格式.x轴及y轴选项程序代码如下.
xaxis: {
mode: "time",
tickSize: [3, "day"],
tickLength: 10,
color: "black",
axisLabel: "Date",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
}
yaxis: {
color: "black",
axisLabel: "DNS Query Count",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3,
tickFormatter: function (v, axis) {
return $.formatNumber(v, { format: "#,###", locale: "us" })
}
}
选项的最后我们设定了网格的选项,因为我们有用到提示框的功能,所以grid.hoverable必须设为true才能显示,此外我们还设定了图表外框宽度grid.borderWidth,以及背景使用渐层色呈现grid.backgroundColor.
grid: {
hoverable: true,
borderWidth: 2,
backgroundColor: { colors: ["#EDF5FF", "#ffffff"] }
}
完成堆栈图
最后一样呼叫$.plot函式把数据及选项带进去即完成.当你在画堆栈折线图时,其实就是把折线图画出来后设定series.stack:true及series.lines.fill:true而已,相信不会太难.下面我们还会介绍堆栈柱形图及堆栈条形图.
$(document).ready(function () {
$.plot($("#flot-placeholder"), dataset, options)
$("#flot-placeholder").UseTooltip()
})
堆栈图柱形图
堆栈柱形图范例 (DNS Query)
我们沿用上面堆栈折线图的程序代码,改成堆栈柱形图,只需要改选项里的几个地方,第一个将series.lines改成series.bars,然后只留下show属性,另外再加上bars.align设定成"center"让条图对齐中央,还有bars.barWidth设定成24 * 60 * 60 * 600, 为什么这样设定barWidth,因为我们x轴是用时间格式数据的,也就是以毫秒为单位,所以24 * 60 * 60 * 1000就等于一天,不过最后我们是乘以600不是1000,因为我们不想让条图相互贴在一起,让条图之间留点空隙看起来比较好看.
series: {
stack: true,
bars: {
show: true
}
}
bars: {
align: "center",
barWidth:24 * 60 * 60 * 600
}
堆栈图条形图
堆栈条形图范例 (DNS Query)
条形图就需要点功夫了,因为条形图是y轴显示时间,x轴为数字,首先你要先把数据建立出来如下.
var data = [
[569106, gd(2012, 1, 1)], [743944, gd(2012, 1, 2)], [120865, gd(2012, 1, 3)], [890208, gd(2012, 1, 4)],
[259723, gd(2012, 1, 5)], [177150, gd(2012, 1, 6)], [32430, gd(2012, 1, 7)], [274054, gd(2012, 1, 8)],
[63435, gd(2012, 1, 9)], [994514, gd(2012, 1, 10)], [885453, gd(2012, 1, 11)], [289791, gd(2012, 1, 12)],
[411717, gd(2012, 1, 13)], [95324, gd(2012, 1, 14)], [646479, gd(2012, 1, 15)], [448868, gd(2012, 1, 16)],
[669678, gd(2012, 1, 17)], [909944, gd(2012, 1, 18)], [675965, gd(2012, 1, 19)], [281272, gd(2012, 1, 20)],
[629781, gd(2012, 1, 21)], [330138, gd(2012, 1, 22)], [802835, gd(2012, 1, 23)], [139079, gd(2012, 1, 24)],
[187101, gd(2012, 1, 25)], [354332, gd(2012, 1, 26)], [361090, gd(2012, 1, 27)], [78171, gd(2012, 1, 28)],
[452212, gd(2012, 1, 29)], [404369, gd(2012, 1, 30)], [63509, gd(2012, 1, 31)]
]
接着设定bars.horizontal为true,若这里没设定就会显示成柱形图,然后再设定yaxis.mode为"time",表示y轴以时间格式显示,另外我们还设定了yaxis.min及yaxis.max,如此可限制y轴刻度显示的最大及最小值.完整的选项程序代码如下.
var options2 = {
series: {
stack: true,
bars: {
show: true
}
},
bars: {
lineWidth: 1,
barWidth: 24 * 60 * 60 * 450,
horizontal: true
},
xaxis: {
color: "black",
axisLabel: "Date",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10,
tickFormatter: function (v, axis) {
return $.formatNumber(v, { format: "#,###", locale: "us" })
}
},
yaxis: {
mode: "time",
tickSize: [3, "day"],
min: gd(2012, 1, 1),
max: gd(2012, 1, 31),
tickLength: 10,
color: "black",
axisLabel: "DNS Query Count",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3
},
grid: {
hoverable: true,
borderWidth: 2,
backgroundColor: { colors: ["#EDF5FF", "#ffffff"] }
}
}
D3.js
D3 是最流行的可视化库之一，它被很多其他的表格插件所使用。它允许绑定任意数据到 DOM，然后将数据驱动转换应用到文档中。你可以使用它用一个数组创建基本的
HMTL 表格，或是利用它的流体过度和交互，用相似的数据创建惊人的 SVG 条形图。
ChartJS
Chart.js 是一个令人印象深刻的 JavaScript 图表库，建立在 HTML5 Canvas
基础上。目前，它支持6种图表类型(折线图，条形图，雷达图，饼图，柱状图和极地区域区)。而且，这是一个独立的包，不依赖第三方 JavaScript 库，小于
5KB。
Highcharts JS
Highcharts JS 是一个制作图表的纯 Javascript 类库，主要特性如下：兼容性：兼容当今所有的浏览器，包括 iPhone、IE
和火狐等等对个人用户完全免 费纯JS，无BS支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图跨语言：不管是
PHP、Asp.net 还是 Java 都可以使用。
Fusioncharts
FusionCharts Suite XT 是个专业的 JavaScript
图表库，能创建任何类型的图表。它创建的图表都是可以进行完全自定义的，标签，字体，边界等等，都可以进行修改。它有很强的交互功能，有许多信息提示，可 点击的
legend 关键字，还有 dril-down，缩放/滚动 和单击打印图表功能。
Flot
Flot 是受 Plotr 和 PlotKit 的 启发，Ole Laursen 基于 jQuery 开发了一个图表绘制(WEB Chart)插件并命名为
flot。 flot 是个纯 JavaSript 库，专注于简单的使用方式，迷人的外观和交互式特性。支持的浏览器有： Internet Explorer 6+,
Chrome, Firefox 2+, Safari 3+ and Opera 9.5+。
Chartist.js
Chartist.js 提供了优美的响应图表。就像 ChartJS。它使用 SVG 渲染图，可以被控制，并通过对 CSS3 媒体查询和 SASS
定制。另外 Chartist.js 提供很酷的动画。
n3-charts
如果你是一个 AngularJS 开发者，你一定喜欢款有趣的图表。它是建立在 D3.js 和 AngularJS 的基础上，提供了可定制的
AngularJS 指令的形式不同标准的图表。
Ember Charts
Ember Charts 是一个基于 Ember.js 和 D3.js
的图表库。它包括时间序列、柱状图、饼图、点图，很容易扩展和修改。这些图表组件代表图表交互性和演示的最佳实践，是高度可定制和可扩展的。
Chartkick
Chartkick 是专为 Ruby 应用程序的 JavaScript
图表库。它提供了所有主要的图表类型，如饼图，柱形图，条形图，面积，地理，时间，以及多个系列。
MeteorCharts
它有一个很酷的图表生成器，为您提供选项来选择图表，选择主题，然后生成一个图表。
amCharts
amCharts 无疑是最漂亮的图表库。amCharts 提供了JavaScript/HTML5 Charts、Javascript/HTML5
Stock Chart、JavaScript Maps 三种图表组件。
EJS Chart
EJS图表声称自己是企业准备的图表库。图表看起来很干净，可读性比大多数旧的图表库。这也是与IE6+等旧浏览器兼容。
uvCharts
uvCharts 是一个开源的 JavaScript 图表库，号称有100多个自定义选项。它拥有12种不同的标准图表类型，开箱即用。
ECharts
基于 Canvas，纯 JavaScript
图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
商业产品常用图表库，底层基于ZRender，创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图、地图、和弦图以及力导向布局图，同时支持任意维度的堆积和多图表混合展现。
