HighCharts学习笔记(二)HighCharts结构及详细配置

HighCharts结构及详细配置

一、HighCharts整体结构:

通过查看API文档我们知道HighCharts结构如下:(API文档在文章后面提供下载)

var chart = new Highcharts.Chart({

       chart: {…}             // 配置chart图表区

       colors: [{…}]         // 配置主体显示颜色(多个线条和柱体的颜色顺序的)

       credits: {…}          // 配置右下角版权链接

       exporting: {…}        // 配置导出及打印

       global: {…}           // Highcharts.SetOptions方法调用

       labels: {…}           // HTML标签,可以放置在绘图的任何位置

       lang: {…}             // 语言对象属性配置

       legend: {…}           // 配置图例选项

       loading: {…}          // 配置图表加载选项

       navigation: {…}       // 配置导出按钮属性

       pane: {…}             // 仅适用于极性图表和角仪表

       plotOptions: {…}      // 配置数据点选项

       series: [{…}]        // 配置数据列选项

       subtitle: {…}         // 配置副标题

       title: {…}            // 配置标题

       tooltip: {…}          // 配置数据点提示框

       xAxis: {…}            // 配置x轴选项

       yAxis: {…}            // 配置y轴选项

})

、HighCharts详细配置

1、chart :图表区选项

              主要设置图表的类型,图表装载容器名,背景,高度,宽度等图表的整体属性。

参数

描述

默认值

backgroundColor

设置图表区背景色

#FFFFFF

borderWidth

设置图表边框宽度

0

borderRadius

设置图表边框圆角角度

5

renderTo

图表放置的容器,一般在html中放置一个DIV,获取DIV的id属性值

null

defaultSeriesType

默认图表类型line, spline, area, areaspline,
column, bar, pie , scatter

0

width

图表宽度,默认根据图表容器自适应宽度

null

height

图表高度,默认根据图表容器自适应高度

null

margin

设置图表与其他元素之间的间距,数组,如[0,0,0,0]

[null]

plotBackgroundColor

主图表区背景色,即X轴与Y轴围成的区域的背景色

null

plotBorderColor

主图表区边框的颜色,即X轴与Y轴围成的区域的边框颜色

null

plotBorderWidth

主图表区边框的宽度

0

shadow

是否设置阴影,需要设置背景色backgroundColor

false

reflow

是否自使用图表区域高度和宽度,如果没有设置width和height时,会自适应大小

true

zoomType

拖动鼠标进行缩放,沿x轴或y轴进行缩放,可以设置为:‘x’,’y’,’xy’

events

事件回调,支持addSeries方法,click方法,load方法,selection方法等的回调函数

 

 

2、colors :数据列颜色选项

    主要是数据列颜色设置,比如多条线条中的每个线条颜色。

参数

描述

默认

color

用于展示图表,折线/柱状/饼状等图的颜色,数组形式。

一组html颜色代码

        

colors: [
                 ‘#058DC7’,
                 ‘#50B432’,
                 ‘#ED561B’,
                  ‘#DDDF00’,
                 ‘#24CBE5’, 
                 ‘#64E572’,
                 ‘#FF9655’,
                 ‘#FFF263’,
                 ‘#6AF9C4’
    ]

说明:1、颜色代码为html标准,可通过DW等复制想要的代码

2、默认是从第一个数据列起调用第一个颜色代码,有多少个数

据列调用相应数量的颜色

3、当数据列大于默认颜色数量时,重复从第一个颜色看是调用

 

3、credits :版权链接选项

参数

描述

默认值

enabled

是否显示版权及链接,布尔型,默认为显示

true

position

位置。可用align调整对齐方式,x,y设置距离。

position: {align: ‘right’,x: -10,
         verticalAlign:
‘bottom’,y: -5 }

href

链接地址。String型,默认是highCharts官网

www.highcharts.com

style

名片CSS模式

itemStyle : {

cursor: ‘pointer’,color: ‘#909090′,

fontSize: ’10px’ }

text

显示名字。

highcharts.com

 

 

4、exporting :导出及打印选项

参数

描述

默认值

buttons

打印和导出按钮设置。其中两个按钮中又有很多样式等设置,如有需要可详细查看API文档

默认按钮样式

enableImages

在导出的图片中添加logo水印。布尔型,默认是false

false

enabled

是否显示按钮(也就是启用打印导出功能),布尔型,默认显示

true

filename

导出图片文件名,String型

chart

type

导出图片的格式,有jpg和png可选,String型

jpg/png

url

转换图片的服务器url,默认是用highcharts服务器

http://export.highcharts.com

width

图片大小,数字型

800

5、global :Highcharts.SetOptions方法调用

    全局选项,并不适用于每一个图表。这些选项,如lang选项,必须设置使用Highcharts.setOptions方法。一般用不到,详情请查看API文档。

6、labels :HTML标签(可放置在图表的任意地方)

参数

描述

默认值

items

包含两个选项html和style,分别代表html语句及样式

iteml :{

 

 

 

 

    html : “”,

    style {
            left:
’100px’,top: ’100px’}

  }

style

css样式

style:{ color : ‘#3E576F’}

7、lang :语言配置选项,主要配置符号、导出时显示的语句、时间显示语言等。和上面的global参数有关,即调用Highcharts.SetOptions方法。下表列举常用的选项注意:lang选项其实就是配置一些显示语言,API中都有详细说明。

参数

描述

默认值

decimalPoint

小数点

.

downloadJPEG

导出显示的文字,下面还有downloadPDF等,都一样

Download JPEG image等

months

月份,字符串数组形式

[‘January’ ‘February’, ‘March’, ‘April’,
‘May’, ‘June’, ‘July’,

‘August’, ‘September’, ‘October’,
‘November’, ‘December’]

numericSymbols

数值单位,比如1000为1k

[‘k’, ‘M’, ‘G’, ‘T’, ‘P’, ‘E’]

8、legend :图例选项,即数据类标示。

参数

描述

默认值

layout

显示形式,支持水平horizontal和垂直vertical

horizontal

align

对齐方式

center

backgroundColor

背景颜色

nulll

borderColor

图例边框颜色

#909090

borderRadius

图例边框角度

5

enabled

是否显示图例

true

floating

是否可以浮动,配合x,y属性

false

shadow

是否显示阴影

false

style

图例样式

详见API文档

9、loading: 图表加载选项

参数

描述

默认值

hideDuration

淡出效果持续时间,以毫秒为单位

100

labelStyle

标签样式,css形式

详见API文档

showDuration

淡入效果持续时间,以毫秒为单位

100

style

图表加载样式

详见API文档

10、navigation : 导出按钮选项,配置导出按钮及打印样式等,详见API文档。

11、pane :极性图表和角仪表选项配置(这两种表是在新版本2.0.1新增加的选项)

12、plotOptions :数据点选项。分不同图表类型配置不同,下面就常用的选项及spline选项列表如下

参数

描述

默认值

enable

是否在数据点上直接显示数据

false

allowPointSelect

是否允许使用鼠标选中数据点

false

formatter

回调函数,格式化数据显示内容

formatter: function() 
{ return this.y; }

marker

对某个点标记,多种样式可选

 

13、series :数据列选项

参数

描述

默认值

data

显示在图表中的数据列,可以为数组或者JSON格式的数据。如:data:[0, 5, 3, 5],或
data: [{name: ‘Point 1’,y: 0}, {name: ‘Point 2’,y: 5}]

‘’

name

数据列名称

‘’

type

数据列类型,支持 area,
areaspline, bar, column, line, pie, scatter、spline

line

14、subtitle : 副标题选项。和title配置一样,在title中详细讲解

15、title : 标题选项

参数

描述

默认值

text

标题文本内容

Chart title

align

水平对齐方式

center

verticalAlign

垂直对齐方式

top

margin

标题与副标题之间或者主图表区间的间距

15

floating

是否浮动,如果为true,则标题可以偏离主图表区,可配合x,y属性使用

false

style

css样式

{ color: ‘#3E576F’, 
          fontSize: ’16px’}

x

按照水平对齐方式的距离

0

y

按照垂直对齐方式的距离

15

16、tooltip :数据点提示框选项

参数

描述

默认值

enable

是否显示提示框

true

backgroundColor

设置提示框的背景色

rgba(255, 255, 255, .85)

borderColor

提示框边框颜色,默认自动匹配数据列的

auto

borderRadius

提示框圆角度

5

shadow

设置提示框内容样式,如字体颜色等

color:’#333′

formatter

回调函数,用于格式化输出提示框的显示内容。

返回的内容支持html标签如:, ,

 

17、xAxis :x轴选项

参数

描述

默认

categories

设置X轴分类名称,数组,例如:

categories: [‘Apples’, ‘Bananas’,
‘Oranges’]

[]

title

X轴名称,支持text、enabled、align、rotation、style等属性

 

 

labels

设置X轴各分类名称的样式style,格式formatter,角度rotation等

 

max

X轴最大值(categories为空时),如果为null,

则最大值会根据X轴数据自动匹配一个最大值

 

null

min

X轴最小值(categories为空时),如果为null,

则最小值会根据X轴数据自动匹配一个最小值

 

null

gridLineColor

网格(竖线)颜色

 

#C0C0C0

gridLineWidth

网格(竖线)宽度

1

lineColor

基线颜色

#C0D0E0

lineWidth

基线宽度

0

18、yAxis :y轴选项

      和x轴配置相同或类似。

 

注意:1、以上所有参数如果没特殊要求,及为默认是,可不用再代码中配置

 
  2、API中还有更多的配置选项,可通过阅读API了解详细

   3、红色部分为主要配置内容

HighCharts学习笔记(一)HighCharts入门

一、HighCharts简介

Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

 

二、ighCharts的主要特性包括:[1]

1.兼容性:HighCharts采用纯JavaScript编写,兼容当今大部分的浏览器,包括Safari、IE和火狐等等;

2.图表类型:HighCharts支持图表类型,包括曲线图、区域图、柱状图、饼状图、散状点图和综合图表等等,可以满足各种需求。

3.不受语言约束:HighCharts可以在大多数的WEB开发中使用,并且对个人用户免费,支持ASP,PHP,JAVA,.NET等多种语言中使用。

4.提示功能:HighCharts生成的图表中,可以设置在数据点上显示提示效果,即将鼠标移动到某个数据点上,可以显示该点的详细数据,并且可以对显示效果进行设置。

5.放大功能:HighCharts可以大量数据集中显示,并且可以放大某一部分的图形,将图表的精度增大,进行详细的显示,可以选择横向或者纵向放大。

6.时间轴:可以精确到毫秒。

三、Highcharts 基本组成

四、HighCharts整体结构:

通过查看API文档我们知道HighCharts结构如下:(API文档在文章后面提供下载)

var chart = new Highcharts.Chart({

       chart: {…}             // 配置chart图表区

       colors: [{…}]         // 配置主体显示颜色(多个线条和柱体的颜色顺序的)

       credits: {…}          // 配置右下角版权链接

       exporting: {…}        // 配置导出及打印

       global: {…}           // Highcharts.SetOptions方法调用

       labels: {…}           // HTML标签,可以放置在绘图的任何位置

       lang: {…}             // 语言对象属性配置

       legend: {…}           // 配置图例选项

       loading: {…}          // 配置图表加载选项

       navigation: {…}       // 配置导出按钮属性

       pane: {…}             // 仅适用于极性图表和角仪表

       plotOptions: {…}      // 配置数据点选项

       series: [{…}]        // 配置数据列选项

       subtitle: {…}         // 配置副标题

       title: {…}            // 配置标题

       tooltip: {…}          // 配置数据点提示框

       xAxis: {…}            // 配置x轴选项

       yAxis: {…}            // 配置y轴选项

})

五、HighCharts 实例

HtmlCode:

 

 

 

 

 

 

JavaScript Code

$(function () {

    $(‘#container’).highcharts({

        title: {

            text: ‘Monthly Average Temperature’,

            x: -20 //center

        },

        subtitle: {

            text: ‘Source: WorldClimate.com’,

            x: -20

        },

        xAxis: {

            categories: [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’,’Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’]

        },

        yAxis: {

            title: {

                text: ‘Temperature (°C)’

            },

            plotLines: [{

                value: 0,

                width: 1,

                color: ‘#808080’

            }]

        },

        tooltip: {

            valueSuffix: ‘°C’

        },

        legend: {

            layout: ‘vertical’,

            align: ‘right’,

            verticalAlign: ‘middle’,

            borderWidth: 0

        },

        series: [{

            name: ‘Tokyo’,

            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

        }, {

            name: ‘New York’,

            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]

        }, {

            name: ‘Berlin’,

            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]

        }, {

            name: ‘London’,

            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

        }]

    });

});

                           

六、HighCharts相关资料

1.下载地址:http://www.hcharts.cn/product/download.php

2.API文档:http://www.hcharts.cn/api/index.php

setTimeout 导致的浏览器假死

 问题

   前几天,同事遇到一个浏览器假死的问题。就是浏览器在响应一个请求的时候,就突然不响应时间,进入假死状态,Cup也飙升到100%. 但是这个问题只出现在IE浏览器,chrome和Firefox等其他浏览器正常。

原因

  Js 代码里面,看着也没有什么耗时的操作和后台异步调用。没办法,只能从响应事件的最开始一步一步调查。经过一番调试之后,问题定位在setTimeout 函数。当把setTimeout 里面执行的函数去掉之后,立马就不会出现这种情况。查看setTimeout 里面调用的函数,发现里面JS中有一些的DOM操作,函数里面还进行了html的拼接。难道是这个原因导致的。于是网上查原因:当一段JS脚本长时间占用着处理机就会挂起浏览器的GUI更新,而后面的事件响应也被排在队列中得不到处理,从而造成了浏览器被锁定进入假死状态。说白了就是:浏览器无法在渲染页面的同时执行js。在setTimeout 函数里面,确实有一些拼接html 和操作dom 的情况。可能就是js在执行的时候,js代码里面又有一些拼接html 的操作。导致浏览器无法渲染页面,而js 里面在操作这个页面的内容。导致浏览器卡死。

浏览器的内核处理方式:

  浏览器的内核是多线程的,它们在内核制控下相互配合以保持同步,一个浏览器至少实现三个常驻线程:javascript引擎线程,GUI渲染线程,浏览器事件触发线程。

  1. JavaScript引擎是基于事件驱动单线程执行的,JS引擎一直等待着任务队列中任务的到来然后加以处理,浏览器无论再什么时候都只有一个JS线程在运行JS程序。
  2. GUI 渲染线程负责渲染浏览器界面,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意 GUI渲染线程与JS引擎是互斥的,当JS引擎执行时GUI线程会被挂起,GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
  3. 事件触发线程,当一个事件被触发时该线程会把事件添加到待处理队列的队尾,等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等,但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。

 

  明白了浏览器内核处理方式,就可以理解浏览器为什么会进入假死状态了,当一段JS脚本长时间占用着cpu 时间时,就会挂起浏览器的GUI更新,而后面的事件响应也被排在队列中得不到处理,从而造成了浏览器被锁定进入假死状态。另外JS脚本中进行了DOM操作,一旦JS调用结束就会马上进行一次GUI渲染,然后才开始执行下一个任务,所以JS中大量的DOM操作也会导致事件响应缓慢甚至卡死浏览器。

 

  这个文章写得更加透彻:http://www.nowamagic.net/librarys/veda/detail/787

分享一个控制JS 浏览器缓存的解决办法。

    JS 缓存的问题一直都是我们又爱又恨的东西。也是我们比较头痛的问题,

         一方面为了提高网站响应速度,减少服务器的负担,和节省带宽,将需要将静态资源缓存在客户端,

         但是另一方面,当js 文件有改动的时候,如何快速的将客户端缓存的js文件都失效,这是非常头痛的问题。

         以至于每次客户反馈问题的时候,我们第一个解决办法都是清理浏览器缓存。

 

         那么如何解决呢。

 

         1. 直接禁止全部的静态文件缓存

                   在html 头部加上如下代码:

                  

                  

                  

 

         这样所有的js 文件都不会被缓存。这显然是不可取的。

        

         2.加版本号,在每个js的后面,都加上js 的版本号,

        

        

         当某个js文件有变动时,则修改该js文件的版本号。这样就能解决js 没有更新时,能够缓存js文件,有变动的时,也能更新到最新的js的问题。

        

         但是每次js 有变动时,所有引用到改js的地方都得改一遍,这太麻烦了吧。

        

         有办法:

         1.创建公共js文件,将所有需要控制的js文件加入到JSHash 里面

         //// js files map 本文件可独立运行,无需依赖于其他文件

         var strSite = window.location.protocol + “//” + window.location.host + “/”; //// 网站主机头

        

         var JSHash = { 

                   test: { url: strSite + “test.js”,type:”javascript”, version: “v0001” },

         }

        

         function loadJS(keys) {

                   if (keys) {

                            for (var i = 0; i < keys.length; i++) {

                                     var jsnode = JSHash[keys[i]];

                                     if(jsnode.type=”javascript”)

                                     {

                                               document.writeln(““);

                                     }

                                     else

                                     {

                                               document.writeln(““);

                                     }

                            }

                   }

         }

        

         2. 在相关页面引用js 的方改为:loadJS([“test”]);  

        

         这样每一次更新的时候,只需要调整相关JS的版本号即可。

        

        

 

说一说浏览器缓存

  缓存的问题一直都是我们比较头痛的问题,为了提高网站响应速度,减少服务器的负担,和节省带宽,将需要将静态资源缓存在客户端,

但是有些时候,当这些文件有更新的时候,我们又希望这些缓存能够尽快失效。所以怎么很好的利用缓存功能,而又不影响我们的正常更新。
了解这些缓存机制,就非常有必要。

  浏览器通过URL地址访问一个网页时,浏览器会自动缓存用户访问过网站的网页,当用户下一次在访问这个页面的时候,浏览器就会跟自己本地缓存的页面进行比较
如果网页没有更新的话,浏览器就不会再次下载网页,而是直接使用本地缓存的网页。只有当网站明确标识资源已经更新,浏览器才会再次下载网页。

  HTTP 缓存相关的几个重要的Header

  Cache-Control

  Cache-Control 这是HTTP缓存最重要的头部字段,用于指定所有缓存机制在整个请求 / 响应 中必须服从的命令。
  cache-control 的定义是:Cache-Control = “Cache-Control”

  public 所有内容都将被缓存
  private 内容只缓存到私有缓存中
  no-cache 所有内容都不会被缓存
  no-store 所有内容都不会被缓存到缓存或 Internet 临时文件中
  must-revalidation/proxy-revalidation 如果缓存的内容失效,请求必须发送到服务器 / 代理以进行重新验证
  max-age=xxx (xxx is numeric) 缓存的内容将在 xxx 秒后失效 , 这个选项只在 HTTP 1.1 可用 , 并如果和 Last-Modified 一起使用时 , 优先级较高

  Cache-Control 是关于浏览器缓存的最重要的设置,因为它覆盖其他设置,比如 Expires 和 Last-Modified 。另外,由于浏览器的行为基本相同,这个属性是处理跨浏览器缓存问题的最有效的方法。

  Expires
  Expires 头部字段提供一个日期和时间,响应在该日期和时间之后被认为缓存失效。失效的缓存条目通常不会被浏览器返回。
  Expires 的定义是 “Expires: Sun, 08 Nov 2009 03:37:26 GMT”。如果查看内容时的日期在给定的日期之前,则认为该内容没有失效并从缓存中提取出来。反之,则认为该内容失效,缓存将采取一些措施。
  注意:cache-control max-age 和 s-maxage 将覆盖 Expires 头部。

  Last-Modified/E-Tag
  Last-Modified 实体头部字段值通常用作一个缓存验证器。简单来说,在浏览器第一次请求某一个URL时,服务器端的返回状态会是200,
内容是你请求的资源,同时有一个Last-Modified的属性标记此文件在服务期端最后被修改的时间,格式类似这样:Last-Modified: Fri, 12 May 2006 18:53:33 GMT ,当第二次请求此URL时,根据 HTTP 协议的规定,浏览器会向服务器传送 If-Modified-Since 报头,询问该时间之后文件是否有被修改过:如果服务器端的资源没有变化,则返回 HTTP 304 (Not Changed.)状态码。而不是响应的文件。

  ETag 是根据web资源生成的一段hash字符串。服务器单独负责判断记号是什么及其含义,并在HTTP响应头中将其传送到客户端,当资源发送改变时,ETag也随之发生变化
以下是服务器端返回的格式:
  ETag: “50b1c1d4f775c61:df3”
  客户端的查询更新格式是这样的:
  If-None-Match: W/”50b1c1d4f775c61:df3″
  如果ETag没改变,则返回状态304,这也和Last-Modified一样。

 

robots.txt的介绍和写作

  目前很多网站管理者似乎对robots.txt并没有引起多大重视,甚至不知道这么一个文件的作用。
本来应该保密的信息被爬虫抓取了,公布在公网上,本应该发布到公网的信息却迟迟不被搜索引擎收录。所以下面这篇文章,就来介绍robots.txt的作用和写作

robots.txt基本介绍
  robots 是一个纯文本文件,是用来告诉搜索引擎:当前这个网站上哪些部分可以被访问、哪些不可以,robots文件是存放在网站根目录下的一个纯文本文件。当搜索引擎访问一个网站时,它首先会检查该网站根目录下是否存在robots文件。robots文件必须放置在一个网站的根目录下,而且文件名必须全部小写。
我们做的网站肯定希望被收录,因为网站流量的一部分或者是大部分都是来自搜索,所以对网站来说是很重要的。问题是:我们有的网站内容不希望杯搜索到,那么怎么办呢?在这种情况下,我们就有必要会用到robots文件,来与搜索引擎沟通。所有的搜索引擎蜘蛛自动在网站根目录中寻找这个文件,所以你只需创建它并上传,然后等待蜘蛛来阅读。
  另外,robots.txt必须放置在一个站点的根目录下,而且文件名必须全部小写。当需要完全屏蔽文件时,需要配合meta的robots属性。

robots.txt写作语法
首先,我们来看一个robots.txt范例:

# All robots will spider the domain
User-agent: *
Disallow:

以上文本表达的意思是允许所有的搜索机器人访问当前站点下的所有文件。

具体语法分析:其中#后面文字为说明信息;User-agent:后面为搜索机器人的名称,后面如果是*,则泛指所有的搜索机器人;Disallow:后面为不允许访问的文件目录。

下面,我将列举一些robots.txt的具体用法:

1.允许所有的robot访问
User-agent: *
Disallow:
或者也可以建一个空文件 “/robots.txt” file

2.禁止所有搜索引擎访问网站的任何部分
User-agent: *
Disallow: /

3.只允许某个搜索引擎的访问,我用e来代替
User-agent: e
Disallow:
在Disallow:后面不加任何东西,意思是仅允许e访问该网站。

4.禁止所有搜索引擎访问网站的几个部分(下例中的01、02、03目录)
User-agent: *
Disallow: /01/
Disallow: /02/
Disallow: /03/

5.禁止某个搜索引擎的访问(下例中的BadBot)
User-agent: BadBot
Disallow: /

6.使用”$”限制访问url
User-agent: *
Allow: .htm$
Disallow: /
意思是仅允许访问以”.htm”为后缀的URL

7禁止访问网站中所有的动态页面
User-agent: *
Disallow: /*?*

8.禁止搜索引擎F抓取网站上所有图片
User-agent: F
Disallow: .jpg$
Disallow: .jpeg$
Disallow: .gif$
Disallow: .png$
Disallow: .bmp$
意思是只允许引擎抓取网页,禁止抓取任何图片(严格来说,是禁止抓取jpg、jpeg、gif、png、bmp格式的图片。)

9.只允许搜索引擎E抓取网页和.gif格式图片
User-agent: E
Allow: .gif$
Disallow: .jpg$
Disallow: .jpeg$
Disallow: .png$
Disallow: .bmp$
意思是只允许抓取网页和gif格式图片,不允许抓取其他格式图片

10.Sitemap:sitemap是给搜索引擎爬虫指路的地图,引导搜索引擎爬虫去抓取相应的地址
sitemap在robots文件的写法如下:
Sitemap:http://***.com/sitemap.txt
切记S是大写的!

 

注意事项
1.网站应该要有一个robot.txt文件,
2.绝大多数的搜索引擎机器人都遵守robots文件的规则,
3.文件名是小写字母。
4.要提醒大家的是:robots.txt文件一定要写对,如果不太会写,还是要先了解再写,以免给网站的收录带来麻烦。

 

asp.net 中的app_offline.htm的使用

前段时间,系统升级,由于系统更新发布时间较长,所以必须停掉站点进行更新。导致很多用户都来反馈系统无法访问,还认为站点被黑掉了。

所以经过那件事我们也在思考,如何做到不停机,进行热部署。
单机环境下(双机或是分布式系统不用考虑这个问题),app_offline.htm是个不错的选择,

当asp.net看到应用程序中app_offline.htm文件时,它会关闭应用程序的app-domain,然后将请求发给app_offline的内容。

所以,在维护,升级的时候,就不必停止你的WEB应用程序,而是一个友好的方式提示给用户,本网站正在更新的提示,这样体验会更友好。

 

1. 创建一个app_offline.htm的HTM页面文件,



"Content-Type"
content="text/html; charset=gb2312">
站点更新中



站点更新中

站点更新中,请稍后访问。

 

2. 将app_offline.htm放在你的网站根目录下。这样,任何外部的请求的话,都会马上被转移到该页面了。

需要注意的是:
(1)app_offline.htm 不能小于 512 字节。
(2)IIS 站点和进程池不需要停止。
(3)只有对.aspx文件的请求才自动转到app_offline.htm文件;如果请求的是.htm, .asp等文件,则不会转到app_offline.htm