Morris.js和flot绘制折线图的比

【文章摘要】

放数据协议(OData)凡是一个询问与翻新数据的Web协议。OData是因诸如HTTP和AtomPub的国际标准创建的,它提供了一个跨平台的多少通信的方案。OData以了web技术如果HTTP、Atom发布协议(AtomPub)和JSON等来供对不同应用程序,服务及储存的信息看。SharePoint
2010, SQL Server 2008 R2, PowerPivot, Windows Azure Table Storage,
和老三着的出品像 IBM’s WebSphere eXtreme
Scale都使用OData。

最近因故开源之AdminLTE做框架感觉功能特别好,其针对性图表库Morris.js和flot都提供了不错的支撑,也都提供了立两头的例证。不过Morris.js是基于Raphael.js来之,也不怕是彼利用SVG和VML来绘制图形,而flot则是使用Canvas进行绘图,在绘制效率和浏览器兼容性等地方会有出入,同时双方需要的数目格式为未一致。本文中对两岸的使和性进行了比较。

第一,WCF Data
Services是WCF服务,所以若可采取具有现有的WCF知识。其次,WCF Data
Services已经实现了OData拓扑,于是你得从为公的多寡格式在公的次序中之代表,而不是AtomPub/JSON这些真正以网络上传递的数目格式。再有,WCF
Data
Services致力为数据传,而未是数存储。你的数额可以存放于另位置:本地的数据库,云端的数据库,外部的web
services,xml文件,等等。无论数额是怎么来的,你还可以用平等的主意来揭晓/使用其。

 

行使Visual Studio 2010里头用WCF Data
Service,就是采用OData发布之Restful服务,下面的例证演示2010里头的WCF
Data Service.

【文章索引】

1、创建一个数据库,使用SQL Server Management Studio并运行
其一本子.

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

图片 1

 

创办了数据库,包含两单表Categories和Products,两单表里头分别插入了2漫长记下。

【一、Morris.js的使用】

2、创建一个Web Application,然后创建一个Entity Data Model,如下图所示

Morris.js最新版本是0.5.1,使用BSD协议,可以从官方网站 http://morrisjs.github.io/morris.js/ 或
GitHub https://github.com/morrisjs/morris.js 下充斥。Morris.js使用非常简单,其只提供了折线图、面积图、柱形图和饼图四栽档次的图形,不过呢基本满足大部分需要。Morris.js基于Raphael,使用的是SVGVML制图图表,直接支持IE
6+、FF 3+、Chrome 5+、Safari 3+和Opera
9.5+,不过以图纸内容比较多时效率比较没有,这个以后再分析。除此之外Morris.js还亟需依赖jQuery。

图片 2

其二数据格式要求如下:

3、创建一个Data Service暴露我们的型:

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

using System;
using System.Collections.Generic;
using System.Data.Services;
using System.Data.Services.Common;
using System.Linq;
using System.ServiceModel.Web;
using System.Web;

不畏按照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轴数据,默认效果如下:

namespace MyWebsite
{
    public class ProductService :
DataService<GettingStartedWithUpdateEntities>
    {
        // This method is called only once to initialize service-wide
policies.
        public static void InitializeService(DataServiceConfiguration
config)
        {
            // TODO: set rules to indicate which entity sets and service
operations are visible, updatable, etc.
            // Examples:
            config.SetEntitySetAccessRule(“*”,
EntitySetRights.AllRead);
            config.SetServiceOperationAccessRule(“*”,
ServiceOperationRights.All);
            config.DataServiceBehavior.MaxProtocolVersion =
DataServiceProtocolVersion.V2;
        }
    }
}

图片 3

4、验证ProductService服务,在浏览器中查看ProductService.svc,如下图所示:

里完全代码如下:

图片 4

图片 5图片 6

落得图的始末就是是AtomPub协议,首先,您于服务器的Atom链接发起带验证的GET请求(authenticated
GET),以抱有关当前可用服的叙述。服务器返回了一个(描述)Atom服务的XML文件,其中列有了有列workspace,每个workspace包含相应的collection集合。一个workspace可能是一个博客,wiki命名空间要内容聚合齐通过公用户名/密码可以拜的资源。

 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>

每个workspace可含蓄五种类型的聚合:条目(entries),类别(categories),模板(templates),用户(users)和集成资源(generic
resources)。

View Code

既然如此一个workspace是一个活,那麽产品一般还包含一多级之条条框框,产品等等这样的成团。所有这些聚集都经与HTTP谓词所指代的平等的法门(GET,POSTD,ELETE,PUT)处理和作出响应。所有这些(集合)支持分页,因此,服务器可以拿collections以一个便于处理的数据片方式回。同时还支持以日期查询(集合),因此,您可经过开与了结日期过滤器来过滤collections。

其中element为绘制到指定元素的因素ID,data为数据源,xKey为X轴的数项名称,yKeys为Y轴的数目项名称数组,labels为每个系列之称谓数组,与yKeys的逐一对应。这样就得兑现核心的图片,而且其打带鼠标悬停的功用,即鼠标在图上悬停时,图表下方会发各个系列时当选的值。

为了拿走一个collection,可以向网址(就是服务文档collection的’ href
‘列有底地方)
发起一个GET请求。服务文档为每个collection都指定了一个URI。如果你往一个URI
发出GET请求,你会获取一个蕴含Atom
Collection的XML文件,其中列有了前面X个该collection中之积极分子。如果collection中的积极分子多于X只,那么该文件还拿富含对下一致批成员的URI,您可以使用它来取得下一样批成员。您也足以当HTTP的脑壳通过Range来指定一日期限,这样可以界定返回的collection只含那些以初步同终止日期里的条款。

除此之外还可以对每个系列之水彩进行设置(lineColors属性设置数组,与yKeys顺序对应)、线条粗细(lineWidth)、圆圈大小(pointSize)、Y轴最充分价值、最小值(ymax、ymin)、X轴数据间隔类型(xLabels)等等进行安装。此外还足以经过自定义函数来自定义X轴和Y轴的多寡格式,或者从定义鼠标悬停时显得的始末。

 

微加修改好调动呢再次好看的效果,如下所示:

 

图片 7

咱俩已经持有了一个暴露V2 本子的OData
Protocol的服务ProductService.svc,下面我创建一个WPF应用程序来花费这个服务。

完整代码如下:

5、创建一个WPF应用程序,并丰富ProductService.svc的劳动引用。

图片 8图片 9

图片 10

 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>

得用一个插件Open Data Protocol
Visualizer
查服务返回的OData数据数据,这个家伙的博和装好参照VS2010的扩展。可以通过劳务引用的“View
in Diagram”进行查看。

View Code

图片 11 

 

下图是ProductService.svc的的OData Model Brower:

【二、flot的使用】

图片 12

flot也是坏普遍的图表库,最新版本是0.8.3,采用MIT协议,可以打官方网站
http://www.flotcharts.org/ 或 GitHub https://github.com/flot/flot
下充斥。flot使用呢蛮粗略,其支持在一个图形中而且叠加折线图、面积图、柱形图/条形图等不同之花样,而且该绷扩大插件,通过扩大插件还好支持堆积柱形图和饼图等以及支持缩放和选区等功能。flot使用Canvas绘制图表,在借助excanvas的情下,可以支撑IE
6+、FF 2+、Chrome、Safari 3+和Opera 9.5+。

6、添加一个ViewModel,封装DataServiceContext,充当WPF表单和Data
Service交互的中介。

抑或以上给之多少吧例,flot的多寡要求及Morris.js不同,对于上述的数据,flot要求如下:

public class ViewModel
{
       private GettingStartedWithUpdateEntities _ctx;
       private Category[] _categories;
       private DataServiceCollection<Product> _products;

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

       public ViewModel()
       {
           _ctx = new GettingStartedWithUpdateEntities(
               new
Uri(“http://localhost:1812/ProductService.svc/%22));))
           Load();
       }

可以看出,与Morris.js不同主要发生三三两两沾,第一沾是flot不支持日期型字符串的行使,需要转移为JavaScript的Date对象,然后利用getTime获取时间(距1970年1月1日
UTC时区的毫秒数)才不过。第二沾是Morris以X轴对数据进行分类,而flot则因为多重(Series)对数据开展分拣,每一个文山会海也一个JS对象,包括一个名叫也data的屡屡组,其中该数组包含该系列的拥有数据,每一个数组又采用一个二维数组表示,其中第一维表示X轴的数码,第二维为Y轴的数码。默认效果如下:

       public DataServiceCollection<Product> Products
       {
           get
           {
               return _products;
           }
       }

图片 13

       public Category[] Categories
       {
           get
           {
               return _categories;
           }
       }

完代码如下:

       public void SaveChanges()
       {
           _ctx.SaveChanges();
           Load();
       }

图片 14图片 15

       public void Load()
       {
           _categories = _ctx.Categories.ToArray();
           _products = new
DataServiceCollection<Product>(_ctx);
           _products.Load(from p in _ctx.Products.Expand(“Category”)
                          select p);
       }
   }

 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>

7、制作WPF表单

View Code

<Window x:Class=”MyClientapp.MainWindow”
       
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation%22
        xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml%22
        Title=”Products Catalog” Height=”400″ Width=”425″>
    <Grid>
        <StackPanel Orientation=”Horizontal”>
            <Grid Margin=”0,0,0,0″ Name=”grid1″ Width=”140″ >
                <ListBox ItemsSource=”{Binding Path=Products}”
                         Name=”Products”
                         IsSynchronizedWithCurrentItem=”True”>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel
Orientation=”Horizontal”>
                                <TextBlock Text=”{Binding Path=Name}”
FontWeight=”Bold”/>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </Grid>
            <StackPanel Orientation=”Vertical” Width=”260″>
                <StackPanel Orientation=”Horizontal”>
                    <Label Name=”lblName” Width=”100″>
                        <TextBlock
Width=”150″>Name:</TextBlock>
                    </Label>
                    <TextBox Name=”txtName”
                             Text=”{Binding ElementName=Products,
Path=SelectedItem.Name, Mode=TwoWay}”
                             Width=”150″/>
                </StackPanel>
                <StackPanel Orientation=”Horizontal”>
                    <Label Name=”lblCost” Width=”100″>
                        <TextBlock Width=”150″
>Cost:</TextBlock>
                    </Label>
                    <TextBox Name=”txtCost”
                             Text=”{Binding ElementName=Products,
Path=SelectedItem.Cost, Mode=TwoWay}”
                             Width=”150″/>
                </StackPanel>
                <StackPanel Orientation=”Horizontal”>
                    <Label Name=”lblCategory” Width=”100″>
                        <TextBlock>Category:</TextBlock>
                    </Label>
                    <ComboBox   Name=”cmbCategory”
                                ItemsSource=”{Binding
Path=Categories}”
                                DisplayMemberPath=”Name”
                                SelectedValuePath=”.”
                                SelectedValue=”{Binding
ElementName=Products, Path=SelectedItem.Category, Mode=TwoWay}”
                                Width=”140″ />
                </StackPanel>
                <Button Height=”23″
                        HorizontalAlignment=”Right”
                        Name=”btnSaveChanges”
                        VerticalAlignment=”Bottom”
                        Width=”136″
                        Click=”btnSaveChanges_Click”>Save
Changes</Button>
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

内部多少里每个系列还支持设置label参数,即设置是系列之名目。与Morris.js不同的凡,对于日期类型需要手动设置轴的档次,例如这里需要安装X轴的种类为time(设置也time类型时需补充加jquery.flot.time.js这个插件),除了安装类型为日外,还需安装时区,如果服务器、客户端的时区均为跟一个,那么可将时区设置为“browser”(与浏览器同样)。

编辑如下codebehind代码:

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

namespace MyClientapp
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        ViewModel viewmodel = new ViewModel();

图片 16

        public MainWindow()
        {
            InitializeComponent();
            this.cmbCategory.DataContext = viewmodel;
            this.grid1.DataContext = viewmodel;
        }

总体代码如下:

        private void btnSaveChanges_Click(object sender,
RoutedEventArgs e)
        {
            viewmodel.SaveChanges();
            this.grid1.DataContext = viewmodel;
        }

图片 17图片 18

    }
}

 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

 

 

运行程序结果如下:

【三、性能比】

图片 19

属性测试当然不是故上述的这么难得的多寡了,实际的数据是由上午11沾到晚上11沾就12只钟头每5分钟一坏的数目,显示出现约如下图,其实呢并未小。

 

图片 20

本文代码下载:http://files.cnblogs.com/shanyou/MyWebsite.zip

性能测试用以网页开始时记下时日,所有代码都实行完毕后呼吁即时空以及初始日之不比,其中测试代码均运用上述涉的完好代码(即一律种植默认样式、一种从定义样式),测试平台选用自己手下的几乎独设备Lenovo
Thinkpad T420(i5-2520 2.5Ghz/8GB/Win8.1
x64)、一令服务器虚拟机(E5-4650 2.7Ghz/4GB/Server 2003 x64)、Dell
Venue 8 Pro(Atom 3740D 1.33Ghz/2GB/Win8.1 x86)、小米1青春版(Qualcomm
MSM8260 1.2Ghz/768MB/MIUI on Android 4.1.2)、小米2S(Snapdragon 600
1.7Ghz/2GB/MIUI on Android
4.1.1),分辨率都是设备默认的全屏分辨率,其中服务器上应用IE8,使用excanvas实现Canvas效果。测试结果如下:

 

图片 21

参考资源:

看来SVG相对Canvas还确确实实不是一般的款款也。

  • Breaking Down ‘Data Silos’ – The Open Data Protocol
    (OData)
  • Getting Started with the Data Services Update for .NET 3.5 SP1 –
    Part
    1
  • Getting Started with the Data Service Update for .NET 3.5 SP1 –
    Part
    2
  • Introducing the Microsoft Open Data Protocol Visualizer
    (CTP1)
  • http://weblogs.asp.net/cazzu/archive/2010/06/08/wcf-data-service-pipeline.aspx

紧贴,原始测试结果:

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

Leave a Comment.