【文摘】

新近用开源的AdminLTE做框架感觉效用特别好,其针对性图表库Morris.js和flot都提供了未可厚非的协助,也都提供了那三头的例证。可是Morris.js是基于拉菲尔.js来的,约等于其使用SVG和VML来绘制图形,而flot则是应用Canvas实行绘图,在绘制作用和浏览器包容性等方面会有出入,同时双方须求的数额格式也不平等。本文中对两端的行使和总体性实行了相比。

 

【文章索引】

  1. Morris.js的使用
  2. flot的使用
  3. 属性相比

 

【一、Morris.js的使用】

Morris.js最新版本是0.5.1,使用BSD协议,能够从官方网站 http://morrisjs.github.io/morris.js/ 或
GitHub https://github.com/morrisjs/morris.js 下载。Morris.js使用卓殊简单,其仅提供了折线图、面积图、柱形图和饼图种种档次的图纸,可是也基本满足超越三分一须要。Morris.js基于拉菲尔,使用的是SVGVML绘图图表,直接协助IE
6+、FF 3+、Chrome 5+、Safari 3+和Opera
9.5+,但是在图片内容相比多时作用相比较低,那个今后再分析。除此之外Morris.js还亟需信赖jQuery。

其数额格式供给如下:

bathroomData = [
    { time: "2014-06-17T10:54:01", r2: 5 },
    { time: "2014-06-17T11:09:01", r0: 4, r1: 79, r2: 7, r3: 79 },
    { time: "2014-06-17T11:24:01", r0: 11, r1: 88, r2: 13, r3: 100 },
    { time: "2014-06-17T11:39:01", r0: 11, r1: 69, r2: 12, r3: 73 },
    ...
]

即按X轴对数据开始展览归类,X轴数据(如上的time)相同的具备连串(Series)的数码(如上的r0、r① 、r二 、r3)均放置于在同二个JS对象内,当该系列在该X轴数据上未曾多少时留空(如上第一个数据没有r0、r① 、r3)。之后需求内定X轴和Y轴的数量项,X轴只可以钦定三个数量项,而Y轴能够内定八个。除此之外,Morris.js自带日期型字符串的支撑,间接采取即可。例如那里钦赐time为X轴的数额,r0、r一 、r② 、r3为Y轴数据,默许效果如下:

jQuery 1

中间完全代码如下:

jQuery 2jQuery 3

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <body>
 4     <div id="bathroom-chart"></div>
 5     
 6     <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
 7     <script type="text/javascript" src="raphael-2.1.2.min.js"></script>
 8     <script type="text/javascript" src="morris-0.5.1.min.js"></script>
 9     <script type="text/javascript">
10         var bathroomData = [
11             { time: "2014-06-17T10:54:01", r2: 5 },
12             { time: "2014-06-17T11:09:01", r0: 4, r1: 79, r2: 7, r3: 79 },
13             { time: "2014-06-17T11:24:01", r0: 11, r1: 88, r2: 13, r3: 100 },
14             { time: "2014-06-17T11:39:01", r0: 11, r1: 69, r2: 12, r3: 73 }
15         ];
16         var bathroomIDs = [ "r0", "r1", "r2", "r3" ];
17         var bathroomNames = [ "校本部学生浴室(男)", "校本部学生浴室(女)", "XX校区学生浴室(男)", "XX校区学生浴室(女)" ];
18         
19         Morris.Line({
20             element: "bathroom-chart",
21             data: bathroomData,
22             xkey: "time",
23             ykeys: bathroomIDs,
24             labels: bathroomNames
25         });
26     </script>
27 </body>
28 </html>

View Code

内部element为绘制到钦命成分的要素ID,data为数据源,xKey为X轴的数量项名称,yKeys为Y轴的数量项名称数组,labels为每一种体系的称号数组,与yKeys的逐一对应。那样就足以兑现基本的图样,而且其自带鼠标悬停的法力,即鼠标在图上悬停时,图表下方会有各样体系当前相中的值。

除此之外还是能对各样连串的水彩举行设置(lineColors属性设置数组,与yKeys顺序对应)、线条粗细(lineWidth)、圆圈大小(pointSize)、Y轴最大值、最小值(ymax、ymin)、X轴数据间隔类型(xLabels)等等举办安装。别的仍是能够因此自定义函数来自定义X轴和Y轴的数额格式,或然自定义鼠标悬停时呈现的始末。

稍加修改能够调整为更赏心悦目的效率,如下所示:

jQuery 4

完全代码如下:

jQuery 5jQuery 6

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <body>
 4     <div id="bathroom-chart"></div>
 5     
 6     <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
 7     <script type="text/javascript" src="raphael-2.1.2.min.js"></script>
 8     <script type="text/javascript" src="morris-0.5.1.min.js"></script>
 9     <script type="text/javascript">
10         var bathroomData = [
11             { time: "2014-06-17T10:54:01", r2: 5 },
12             { time: "2014-06-17T11:09:01", r0: 4, r1: 79, r2: 7, r3: 79 },
13             { time: "2014-06-17T11:24:01", r0: 11, r1: 88, r2: 13, r3: 100 },
14             { time: "2014-06-17T11:39:01", r0: 11, r1: 69, r2: 12, r3: 73 }
15         ];
16         var bathroomIDs = [ "r0", "r1", "r2", "r3" ];
17         var bathroomNames = [ "校本部学生浴室(男)", "校本部学生浴室(女)", "XX校区学生浴室(男)", "XX校区学生浴室(女)" ];
18         var bathroomMaxs = [ 100, 100, 113, 137 ];
19         var bathroomMax = 137;
20         var bathroomColors = [ "#5B9BD5", "#ED7D31", "#A5A5A5", "#FFC000" ];
21         
22         Morris.Line({
23             element: "bathroom-chart",
24             data: bathroomData,
25             xkey: "time",
26             ykeys: bathroomIDs,
27             labels: bathroomNames,
28             lineColors: bathroomColors,
29             lineWidth: 3,
30             pointSize: 4,
31             ymax: bathroomMax,
32             ymin: 0,
33             hoverCallback: function (index, options, content) {
34                 var row = options.data[index];
35                 var result = '<div class="morris-hover-row-label">' + row.time.replace("T", " ") + '</div>';
36 
37                 for (var i = 0; i < bathroomNames.length; i++) {
38                     result += '<div class="morris-hover-point" style="color: ' + bathroomColors[i] + '">' +
39                         bathroomNames[i] + " : " + (row["r" + i] == undefined ? "-" : row["r" + i]) + " / " + bathroomMaxs[i] + "</div>";
40                 }
41 
42                 return result;
43             },
44             xLabels: "5min",
45             yLabelFormat: function (y) { return parseInt(y).toString(); }
46         });
47     </script>
48 </body>
49 </html>

View Code

 

【二、flot的使用】

flot也是卓殊普遍的图表库,最新版本是0.8.3,选拔MIT协议,能够从官方网站
http://www.flotcharts.org/ 或 GitHub https://github.com/flot/flot
下载。flot使用也很不难,其补助在2个图片中而且叠加折线图、面积图、柱形图/条形图等区其他花样,而且其帮忙扩大插件,通过扩展插件仍是能够帮忙堆积柱形图和饼图等以及辅助缩放和选区等效果。flot使用Canvas绘制图表,在借助excanvas的景观下,能够支持IE
6+、FF 2+、Chrome、Safari 3+和Opera 9.5+。

要么以上边的多少为例,flot的多少需要与Morris.js不相同,对于上述的多寡,flot供给如下:

bathroomData = [
    { data: [ [1402974541000, 4], [1402975441000, 11], [1402976341000, 11], ... ] },
    { data: [ [1402974541000, 79], [1402975441000, 88], [1402976341000, 69], ... ] },
    { data: [ [1402973641000, 5], [1402974541000, 7], [1402975441000, 13], [1402976341000, 12], ... ] },
    { data: [ [1402974541000, 79], [1402975441000, 100], [1402976341000, 73], ... ] }
]

能够看看,与Morris.js不相同首要有两点,第贰点是flot不协助日期型字符串的利用,需求更换为JavaScript的Date对象,然后选择getTime获取时间(距一九六七年二月1二日UTC时区的纳秒数)才可。第一点是Morris以X轴对数码实行分拣,而flot则以多重(Series)对数据实行归类,每三个多级为一个JS对象,包涵3个名为data的数组,在那之中该数组包蕴该种类的享有数据,每1个数组又选择3个二维数组表示,个中第1维表示X轴的数目,第②维为Y轴的数目。暗中认可效果如下:

jQuery 7

完整代码如下:

jQuery 8jQuery 9

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <style>
 5         .chart-container {
 6             height: 330px;
 7         }
 8         .bathroom-chart {
 9             width: 100%;
10             height: 100%;
11         }
12     </style>
13 </head>
14 <body>
15     <div class="chart-container">
16         <div id="bathroom-chart" class="bathroom-chart"></div>
17     </div>
18     
19     <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
20     <script type="text/javascript" src="jquery.flot-0.8.3.min.js"></script>
21     <script type="text/javascript" src="jquery.flot-0.8.3.time.min.js"></script>
22     <script type="text/javascript">
23         var bathroomData = [
24             { data: [ [1402974541000, 4], [1402975441000, 11], [1402976341000, 11] ], label: "校本部学生浴室(男)" },
25             { data: [ [1402974541000, 79], [1402975441000, 88], [1402976341000, 69] ], label: "校本部学生浴室(女)" },
26             { data: [ [1402973641000, 5], [1402974541000, 7], [1402975441000, 13], [1402976341000, 12] ], label: "XX校区学生浴室(男)" },
27             { data: [ [1402974541000, 79], [1402975441000, 100], [1402976341000, 73] ], label: "XX校区学生浴室(女)" }
28         ];
29         
30         $.plot("#bathroom-chart", bathroomData, {
31             xaxis: { mode: "time", timezone: "browser" }
32         });
33     </script>
34 </body>
35 </html>

View Code

里面多少里每一个体系还援救设置label参数,即设置这么些体系的名称。与Morris.js不一样的是,对于日期类型需求手动设置轴的系列,例如那里须求安装X轴的品类为time(设置为time类型时索要添加jquery.flot.time.js这么些插件),除了安装类型为时间外,还索要安装时区,要是服务器、客户端的时区均为同2个,那么能够将时区设置为“browser”(与浏览器同样)。

除开,flot暗许呈现图表的边框,能够通过grid参数里的borderWidth为0撤消;flot暗许的图样margin也过小,可以设置grid的marigin和labelMargin;仍可以够在series参数里对lines(折线)、points(点)以及bars(柱形)进行安装,每一项均可同时呈现或潜伏,具体设置格局能够参考文书档案,不再赘言。其它,Morris.js的图例暗许都在图片内,能够设置legend的container来将图例设置在别的的地方。此外,由于flot没有暗中认可的鼠标悬停效果,所以须要协调手动去定义,flot提供了叁个叫“plothover”和“plotclick”的风云,能够绑定那多少个事件完成悬停和点击的职能,当中事件处理函数包罗八个参数,分别是event、pos以及item,能够由此item.seriesIndex获取种类的目录,大概直接通过item.series.label直接得到种类的名称,可能通过item.datapoint[0]或[1]取安妥前X轴或Y轴的数量等等。最后兑现效益如下:

jQuery 10

全体代码如下:

jQuery 11jQuery 12

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <style>
 5         .chart-container {
 6             height: 330px;
 7         }
 8         .chart-tooltip {
 9             position: absolute;
10             display: none;
11             padding: 5px;
12             max-width: 200px;
13             font-size: 12px;
14             text-align: center;
15             color: #fff;
16             background-color: #000;
17             border-radius: 4px;
18             opacity: 0.8;
19         }
20         .bathroom-chart {
21             width: 100%;
22             height: 100%;
23         }
24     </style>
25 </head>
26 <body>
27     <div class="chart-container">
28         <div id="bathroom-chart" class="bathroom-chart"></div>
29     </div>
30     <div id="bathroom-chart-tooltip" class="chart-tooltip"></div>
31     <div id="bathroom-legend"></div>
32     
33     <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
34     <script type="text/javascript" src="jquery.flot-0.8.3.min.js"></script>
35     <script type="text/javascript" src="jquery.flot-0.8.3.time.min.js"></script>
36     <script type="text/javascript">
37         var bathroomData = [
38             { data: [ [1402974541000, 4], [1402975441000, 11], [1402976341000, 11] ], label: "校本部学生浴室(男)" },
39             { data: [ [1402974541000, 79], [1402975441000, 88], [1402976341000, 69] ], label: "校本部学生浴室(女)" },
40             { data: [ [1402973641000, 5], [1402974541000, 7], [1402975441000, 13], [1402976341000, 12] ], label: "XX校区学生浴室(男)" },
41             { data: [ [1402974541000, 79], [1402975441000, 100], [1402976341000, 73] ], label: "XX校区学生浴室(女)" }
42         ];
43         var bathroomMaxs = [ 100, 100, 113, 137 ];
44         var bathroomMax = 137;
45         var bathroomColors = [ "#5B9BD5", "#ED7D31", "#A5A5A5", "#FFC000" ];
46         
47         $.plot("#bathroom-chart", bathroomData, {
48             xaxis: { mode: "time", timezone: "browser", timeformat: "%H:%S", tickLength: 0 },
49             yaxis: { min: 0, max: bathroomMax, color: "#EAEAEA" },
50             legend: { container: "#bathroom-legend" },
51             colors: bathroomColors,
52             series: { 
53                 lines: { show: true, lineWidth: 3, fillColor: bathroomColors }, 
54                 points: { show: true } },
55             grid: { hoverable: true, borderWidth: 0, margin: 10, labelMargin: 10 }
56         });
57             
58         $("#bathroom-chart").bind("plothover", function(event, pos, item) {
59             if (item) {
60                 $("#bathroom-chart-tooltip").html(item.series.label + " : " + item.datapoint[1] + " / " + bathroomMaxs[item.seriesIndex])
61                     .css({ top: item.pageY + 8, left: item.pageX + 8 })
62                     .fadeIn(200);
63             } else {
64                 $("#bathroom-chart-tooltip").hide();
65             }
66         });
67     </script>
68 </body>
69 </html>

View Code

 

【③ 、品质相比较】

个性测试当然不是用上述的这样难得的数码了,实际的数码是从上午11点到晚上11点那10个钟头每四分钟一回的多少,展现出现大致如下图,其实也没多少。

jQuery 13

天性测试选拔在网页早先时记下当前岁月,全体代码均实施完后求当前岁月与初始时间的差,个中测试代码均使用上述提到的全体代码(即一种暗中认可样式、一种自定义样式),测试平台选取本身手下的多少个设备华硕Thinkpad T420(i5-2520 2.5Ghz/8GB/Win8.1
x64)、一台服务器虚拟机(E5-4650 2.7Ghz/4GB/Server 二零零一 x64)、戴尔Venue 8 Pro(Atom 3740D 1.33Ghz/2GB/Win8.1 x86)、小米1青春版(联发科MSM8260 1.2Ghz/768MB/MIUI on Android 4.1.2)、HUAWEI2S(Snapdragon 600
1.7Ghz/2GB/MIUI on Android
4.1.1),分辨率都以装备默许的全屏分辨率,其中服务器上选择IE8,使用excanvas完结Canvas效果。测试结果如下:

jQuery 14

总的看SVG相对Canvas还真不是形似的慢呢。

附,原始测试结果:

Morris 0.5.1 基本样式

配备项目

浏览器

第一次

第二次

第三次

第四次

第五次

平均

Thinkpad T420

IE11 桌面版

656

621

744

608

607

647.2

Thinkpad T420

搜狗浏览器(Webkit 537.36)

361

339

334

320

332

337.2

服务器虚拟机

IE8

2343

2421

2375

2391

2390

2384

Dell Venue 8 Pro

IE11 Metro版

1966

2151

2057

1978

2117

2053.8

小米1青春版

UC 9.7国际版(Webkit 533.1)

4407

4335

4233

4309

4442

4345.2

小米2S

UC 9.8(Webkit 533.1)

2892

2536

2481

2509

2558

2595.2

 

Morris 0.5.1 自定义样式

设施项目

浏览器

第一次

第二次

第三次

第四次

第五次

平均

Thinkpad T420

IE11 桌面版

1196

1139

1206

1113

1189

1168.6

Thinkpad T420

搜狗浏览器(Webkit 537.36)

602

585

631

632

620

614

服务器虚拟机

IE8

4468

4735

4797

4750

4703

4690.6

Dell Venue 8 Pro

IE11 Metro版

3897

4039

4207

4165

4380

4137.6

小米1青春版

UC 9.7国际版(Webkit 533.1)

8246

8472

8765

9003

8517

8600.6

小米2S

UC 9.8(Webkit 533.1)

5219

4920

5674

4727

5152

5138.4

 

Flot 0.8.1 基本样式

装备项目

浏览器

第一次

第二次

第三次

第四次

第五次

平均

Thinkpad T420

IE11 桌面版

67

52

48

52

50

53.8

Thinkpad T420

搜狗浏览器(Webkit 537.36)

63

34

32

38

42

41.8

服务器虚拟机

IE8

94

110

94

109

109

103.2

Dell Venue 8 Pro

IE11 Metro版

131

147

146

168

159

150.2

小米1青春版

UC 9.7国际版(Webkit 533.1)

351

471

379

393

409

400.6

小米2S

UC 9.8(Webkit 533.1)

349

260

201

221

195

245.2

 

Flot 0.8.1 自定义样式

配备档次

浏览器

第一次

第二次

第三次

第四次

第五次

平均

Thinkpad T420

IE11 桌面版

87

89

87

78

83

84.8

Thinkpad T420

搜狗浏览器(Webkit 537.36)

40

38

40

44

44

41.2

服务器虚拟机

IE8

1234

1219

1282

1234

1235

1240.8

Dell Venue 8 Pro

IE11 Metro版

256

290

269

352

312

295.8

小米1青春版

UC 9.7国际版(Webkit 533.1)

719

600

775

749

622

693

小米2S

UC 9.8(Webkit 533.1)

357

273

281

335

340

317.2

 

【相关链接】

  1. morris.js:http://morrisjs.github.io/morris.js/
  2. Flot:http://www.flotcharts.org/
  3. Flot API:https://github.com/flot/flot/blob/master/API.md

相关文章

网站地图xml地图