Morris.js和flot绘制折线图的比较【彩民之家高手论

2019-10-13 04:26 来源:未知

 

第五次

(3)然后就足以当做OC的类一样选取charts举办创建对象,使用方法等等。

 

IE11 桌面版

return data;

在配置文件中yAxes>ticks>callback 中装置你供给在Y轴体现的多少格式。

168

xAxis.drawLimitLinesBehindDataEnabled = NO;

 

631

}

label是你的数目,index是下表,labels数组,小编那边传过来的是小数所以选用Math.floor取值然后增进"%"符号。

361

WYTioModel *model  = [WYTioModel tioModelWithDic:_dataArray[i]];

若是想看增进什么遵守,也许地点的设置都是什么的,能够友善调治,终究本人看出数据就懂了

269

float a = model.BRATIO.floatValue;

终极附上一张效果图:

159

leftAxis.gridColor = [UIColor clearColor];//网格线颜色

新手一枚,化解的难点喜欢记录,大概刚刚有人在英特网不明的百度着。-0-

89

_lineView.dragEnabled = NO;//启用拖拽图标

彩民之家高手论坛 1

335

leftAxis.gridAntialiasEnabled = NO;//开启抗锯齿

备注:如若多条数据想行使同二个Y轴的话不要加 `stacked: true `````

2481

ChartXAxis *xAxis = _lineView.xAxis;

彩民之家高手论坛 2

52

set1.valueFormatter = [[SetValueFormatter alloc]initWithArr:yVals];

上面tooltips 使用呈现你鼠标悬浮彰显数据,对应着你下面的数码也亟需做修改。。。。

1206

_lineView.noDataText = @"暂无数据";

 

656

LineChartData *data = (LineChartData *)_lineView.data;

新近接纳Chart.js做折线图的表格展现,直接呈现整数啥的很好弄毕竟例子直接在哪儿能够用,百分比就不能了。百度逐步吸取粗纤维,尽管三番五次几篇作品复制粘贴,但还会有有得到,然后自身捣鼓半天总算是弄出来了。。。

第一次

return data;

第一参谋: 引用js,学习为主等等。。。

2390

}

 

设施档案的次序

_lineView = [[LineChartView alloc] initWithFrame:CGRectMake(0, 50,screenWidth-100 , screenHeight-200)];

 

351

- (LineChartView *)lineView {

第一是上学,所以希望观察的有更加好方法的求教导。。。谢谢!

小米2S

leftAxis.axisMinValue = -84;//设置Y轴的最小值

下一场数据什么的就遮盖了直说怎么显得,

110

leftAxis.labelPosition = YAxisLabelPositionOutsideChart;//label位置

Morris.js最新版本是0.5.1,使用BSD左券,能够从官方网站  或 GitHub  下载。Morris.js使用非常轻巧,其仅提供了折线图、面积图、柱形图和饼图三种类型的图样,然而也基本满意抢先53%供给。Morris.js基于拉菲尔,使用的是SVGVML绘制图表,直接帮衬IE 6 、FF 3 、Chrome 5 、Safari 3 和Opera 9.5 ,然则在图片内容相当多时成效好低,那些今后再分析。除外Morris.js还亟需信赖jQuery。

(3)画每种轴上的label,以至落实折现点的连日

Flot 0.8.1 自定义样式

xAxis.labelPosition= XAxisLabelPositionBottom;//设置x轴数据在尾部

109

1.Charts的导入,使用Cocoapod的直白pod search一下Charts,直接放到podfile,再立异一下库,使用过cocoapod得应该都会,话十分的少说,当然绝不cocoapod的也可以一直下载Charts导入工程。

393

leftAxis.forceLabelsEnabled = YES;//不强制绘制钦赐数量的label

第三次

图例1

150.2

//设置折线的样式

2057

如今,朋友让自身给她做个demo,首就算兑现贰个期货走向的数据的来得效果,所谓智囊当借力而行,直接百度查寻到了比较好用的图表类的第三方叫Charts,话非常少说,下边介绍部分基本的运用办法。

44

}

 

[data setValueTextColor:[UIColor clearColor]];//文字颜色

2558

set1 = [[LineChartDataSet alloc]initWithValues:yVals label:nil];

621

leftAxis.valueFormatter = [[SymbolsValueFormatter alloc]init];

彩民之家高手论坛 3

xAxis.enabled = YES;

Dell Venue 8 Pro

//创建 LineChartData 对象, 此对象便是lineChartView供给最后数额对象

632

(2)然后再须求动用charts的公文里疑似引进普通的头文件一律引进那一个桥接文件,当然也能够归入项目标PCH里。

602

set1.valueColors = @[[UIColor clearColor]];//折线拐点处显示数据的颜色

搜狗浏览器(Webkit 537.36)

xAxis.labelTextColor = [UIColor blackColor];//文字颜色

195

//折线拐点样式

38

//加多其次个LineChartDataSet对象

40

leftAxis.labelTextColor = [UIColor redColor];//文字颜色

第一次

实现后的竖屏效果图

608

依靠DEMO:(上传后改为超链接)

第三次

2.是因为Charts使用的是swift来兑现的,很几个人利用OC相当多(满含自家)所以在OC项目中动用Charts就必要动用桥接:

第三次

set1.values = yVals;

其数额格式供给如下:

leftAxis.labelCount = 8;//Y轴label数量

UC 9.8(Webkit 533.1)

set1.valueFormatter = [[SetValueFormatter alloc]initWithArr:yVals];

67

xAxis.granularityEnabled = NO;//设置双重的值不显得

 

xAxis.axisLineColor = [UIColor grayColor];

IE11 桌面版

set2.values = yVals2;

2509

[data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:11.f]];//文字字体

52

LineChartDataSet *set2 = [set1 copy];

53.8

最后完结效果与利益

1234

leftAxis.axisLineColor = [UIColor blackColor];//Y轴颜色

搜狗浏览器(Webkit 537.36)

NSMutableArray *dataSets = [[NSMutableArray alloc] init];

Morris 0.5.1 自定义样式

leftAxis.inverted = NO;//是不是将Y轴进行上下翻转

而外,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轴的数据等等。最后兑现效益如下:

ChartDataEntry *entry = [[ChartDataEntry alloc] initWithX:i y:a];

浏览器

[yVals2 addObject:entry];

只怕以上面包车型客车数码为例,flot的数额需要与Morris.js差异,对于上述的数额,flot须求如下:

set2.drawValuesEnabled = NO;

平均

_lineView.scaleXEnabled = NO;

1240.8

//将 LineChartDataSet 对象放入数组中

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

if (!_lineView) {

Thinkpad T420

彩民之家高手论坛 4

Morris 0.5.1 基本样式

set1.drawCirclesEnabled = NO;//是不是绘制拐点

2053.8

[set1 setColor:[UIColor blueColor]];//折线颜色

 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>

NSMutableArray *yVals2 = [[NSMutableArray alloc] init];

357

xAxis.forceLabelsEnabled = YES;

337.2

(1)具体步骤,在工程里创造贰个swift的类,随意起名字随后文件也得以去除,之后XCode会自动提示是还是不是创建桥接文件,点击是,然后再在桥接文件之中@import charts

38

[dataSets addObject:set2];

693

一、关于怎么着导入Charts到OC项目中

器材项目

如图所示,大家须要贯彻四个折线图,呈现两组数据,具体步骤和方法。

  1. morris.js:
  2. Flot:
  3. Flot API:

set1 = (LineChartDataSet *)data.dataSets[0];

4442

ChartYAxis *leftAxis = _lineView.leftAxis;//获取左侧Y轴

Dell Venue 8 Pro

for (int i = 0; i <  xVals_count; i ) {

312

- (LineChartData *)setData{        NSInteger xVals_count = _dataArray.count;//X轴上要来得多少条数据    //X轴下面需求出示的数码    NSMutableArray *xVals = [[NSMutableArray alloc] init];        for (int i= 0; i0) {

第一次

彩民之家高手论坛 5

50

leftAxis.labelFont = [UIFont systemFontOfSize:10.0f];//文字字体

【小说索引】

//创建LineChartDataSet对象

IE8

set1.lineWidth = 2.0/[UIScreen mainScreen].scale;//折线宽度

1139

LineChartData *data = [[LineChartData alloc]initWithDataSets:dataSets];

特性测验选择在网页最早时记下当前时刻,全数代码均施行完后求当前时刻与最早时间的差,当中测验代码均运用上述提到的总体代码(即一种暗中认可样式、一种自定义样式),测量检验平台选取本身手下的多少个设施ASUSThinkpad T420(i5-2520 2.5Ghz/8GB/Win8.1 x64)、一台服务器设想机(E5-4650 2.7Ghz/4GB/Server 二零零三 x64)、DellVenue 8 Pro(Atom 3740D 1.33Ghz/2GB/Win8.1 x86)、OPPO1青春版(QualcommMSM8260 1.2Ghz/768MB/MIUI on Android 4.1.2)、索尼爱立信2S(Snapdragon 600 1.7Ghz/2GB/MIUI on Android 4.1.1),分辨率都是器械暗许的全屏分辨率,在那之中服务器上运用IE8,使用excanvas完成Canvas效果。测量试验结果如下:

初步化对象以致有关安插

8600.6

_lineView.delegate = self;//设置代理

147

xAxis.axisLineColor = [UIColor blackColor];

Thinkpad T420

}else{

小米1青春版

set1.drawValuesEnabled = NO;//是不是在拐点处突显数据

IE11 Metro版

xAxis.avoidFirstLastClippingEnabled = YES;

服务器虚构机

leftAxis.axis马克斯Value = 210;//设置Y轴的最大值

339

set1.drawFilledEnabled = NO;//是或不是填充颜色

8517

_lineView.doubleTapToZoomEnabled = NO;//撤消双击缩放

2391

(1)达成了导入Charts之后,绘制折线图的类叫做LineChartView

UC 9.8(Webkit 533.1)

(2)绘制坐标轴及相关安顿

1235

[set2 setColor:[UIColor colorWithRed:207/255.0 green:174 /255.0 blue:152/255.0 alpha:1.0]];

84.8

[dataSets addObject:set1];

里面完全代码如下:

二、具体应用

彩民之家高手论坛 6彩民之家高手论坛 7

 

_lineView.scaleYEnabled = NO;//取消Y轴缩放

服务器虚构机

_lineView.chartDescription.enabled = YES;

1196

set1.drawSteppedEnabled = NO;//是还是不是展开绘制阶梯样式的折线图

彩民之家高手论坛 8彩民之家高手论坛 9

xAxis.gridColor = [UIColor clearColor];

【二、flot的使用】

_lineView.backgroundColor =  [UIColor whiteColor];

除去还足以对种种体系的水彩进行安装(lineColors属性设置数组,与yKeys顺序对应)、线条粗细(lineWidth)、圆圈大小(pointSize)、Y轴最大值、最小值(ymax、ymin)、X轴数据间距类型(xLabels)等等举办设置。其余还是可以透过自定义函数来自定义X轴和Y轴的数量格式,或许自定义鼠标悬停时展现的原委。

set1.highlightColor = [UIColor colorWithRed:146/255.0 green:175 /255.0 blue:194/255.0 alpha:1.0];

Thinkpad T420

xAxis.axisLineColor = [UIColor blackColor];

5674

xAxis.labelCount = 4;

48

1282

2421

317.2

1966

 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>

在那之中element为绘制到钦定成分的因素ID,data为数据源,xKey为X轴的数码项名称,yKeys为Y轴的数码项名称数组,labels为各类体系的称谓数组,与yKeys的顺序对应。那样就足以兑现宗旨的图纸,并且其自带鼠标悬停的职能,即鼠标在图上悬停时,图表下方会有各类连串当前当选的值。

平均

4137.6

349

  1. Morris.js的使用
  2. flot的使用
  3. 天性比较

9003

平均

配备项目

 

IE8

View Code

里头多少里每种体系还帮助设置label参数,即设置这么些体系的名号。与Morris.js不相同的是,对于日期类型须求手动设置轴的门类,比如这里供给安吹捧轴的门类为time(设置为time类型时索要增多jquery.flot.time.js那几个插件),除了安装类型为时间外,还供给设置时区,若是服务器、顾客端的时区均为同二个,那么能够将时区设置为“browser”(与浏览器同样)。

260

彩民之家高手论坛 10彩民之家高手论坛 11

浏览器

彩民之家高手论坛 12

42

647.2

471

131

完全代码如下:

彩民之家高手论坛 13

第五次

搜狗浏览器(Webkit 537.36)

83

2384

彩民之家高手论坛 14彩民之家高手论坛 15

IE11 Metro版

334

87

IE11 桌面版

5219

4233

第二次

View Code

41.2

UC 9.7国际版(Webkit 533.1)

2343

Thinkpad T420

749

Thinkpad T420

【文摘】

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], ... ] }
]

221

设施档期的顺序

Thinkpad T420

能够看看,与Morris.js不一样主要有两点,第一点是flot不援助日期型字符串的选拔,须求改换为JavaScript的Date对象,然后采取getTime获取时间(距1970年7月1日 UTC时区的阿秒数)才可。第二点是Morris以X轴对数码实行分拣,而flot则以多元(Series)对数据开展归类,每二个文山会海为三个JS对象,包蕴二个名称叫data的数组,个中该数组包涵该连串的全体数据,每三个数组又选用多少个二维数组表示,此中第一维表示X轴的数量,第二维为Y轴的数目。私下认可效果如下:

94

【相关链接】

340

IE11 桌面版

flot也是老大分布的图表库,最新版本是0.8.3,选拔MIT公约,可以从官网  或 GitHub  下载。flot使用也很简短,其援救在三个图纸中还要叠合折线图、面积图、柱形图/条形图等不等的样式,并且其援助扩展插件,通过扩大插件仍能协理堆成堆柱形图和饼图等乃至扶持缩放和选区等效果。flot使用Canvas绘制图表,在依据excanvas的景况下,能够扶助IE 6 、FF 2 、Chrome、Safari 3 和Opera 9.5 。

78

Flot 0.8.1 基本样式

4735

Dell Venue 8 Pro

620

4335

IE11 Metro版

273

即按X轴对数码举办分拣,X轴数据(如上的time)同样的保有种类(Series)的数量(如上的r0、r1、r2、r3)均放置于在同贰个JS对象内,当该体系在该X轴数据上尚未多少时留空(如上率先个数据尚未r0、r1、r3)。之后须要钦命X轴和Y轴的多少项,X轴只可以内定三个数目项,而Y轴能够钦赐多少个。除外,Morris.js自带日期型字符串的协助,直接采取就可以。比方这里钦定time为X轴的数量,r0、r1、r2、r3为Y轴数据,默许效果如下:

600

103.2

8472

622

1189

2375

775

UC 9.8(Webkit 533.1)

IE11 Metro版

第四次

View Code

服务器设想机

第三次

44

281

63

1168.6

浏览器

第五次

4703

256

1234

109

332

290

4309

小米1青春版

2892

 

第二次

完整代码如下:

4797

【一、Morris.js的使用】

彩民之家高手论坛 16

146

87

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

IE8

34

2595.2

614

第五次

第二次

平均

IE8

2536

属性测验当然不是用上述的如此难得的数量了,实际的数目是从上午11点到夜幕11点那十三个钟头每5分钟二回的数码,展现出现大概如下图,其实也不多。

一体化代码如下:

4727

5152

4407

第四次

4750

4380

小米2S

4039

UC 9.7国际版(Webkit 533.1)

352

379

2151

3897

32

彩民之家高手论坛 17

2117

UC 9.7国际版(Webkit 533.1)

400.6

第二次

4920

1113

小米1青春版

搜狗浏览器(Webkit 537.36)

 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>

1219

4165

4345.2

201

744

View Code

8765

Thinkpad T420

295.8

附,原始测量试验结果:

245.2

41.8

719

4468

8246

4690.6

Thinkpad T420

Dell Venue 8 Pro

5138.4

 

40

小米2S

第一次

服务器虚构机

浏览器

 

彩民之家高手论坛 18

 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>

1978

第四次

585

UC 9.8(Webkit 533.1)

4207

小米1青春版

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 },
    ...
]

409

小米2S

607

320

UC 9.7国际版(Webkit 533.1)

 

【三、品质相比】

第四次

前不久用开源的AdminLTE做框架感到功用相当好,其针对性图表库Morris.js和flot都提供了准确的帮忙,也都提供了那四头的例证。然而Morris.js是基于Raphael.js来的,也正是其选择SVG和VML来绘制图形,而flot则是利用Canvas实行绘图,在绘制效能和浏览器包容性等地点会有出入,同偶尔间双方需求的多少格式也不雷同。本文中对双边的应用和总体性举办了比较。

94

版权声明:本文由彩民之家高手论坛发布于前端知识,转载请注明出处:Morris.js和flot绘制折线图的比较【彩民之家高手论