Highcharts网页图表制作实例详解 (Web开发典藏大系)
上QQ阅读APP看书,第一时间看更新

4.2 版权信息

版权信息可以帮助浏览者明确信息发布者和权利所属者。通常版权信息位于右下角。前面的实例中的右下角,都有Highcharts.com的版权信息标志,如图4.7所示。

图4.7 版权信息

Highcharts图表的版权信息是由组件credits实现的。其语法如下:

credits: {
    //配置项
}

下面讲解常见的版权信息配置项。

4.2.1 启用版权信息

默认情况下,显示版权信息功能是开启的。但很多时候,为了节省图表空间,需要禁用该功能。这时需要使用设置配置项enable。其语法如下:

enabled: Boolean

其中,enabled的值为布尔类型。如果值为true,显示版权信息;如果为false,则不显示版权信息。默认值为true。如果要禁用该功能,只需要将该配置项的值设置为false即可。

【实例4-7:creditsenabled】下面禁止图表的版权信息显示,修改代码如下:

credits: {
    enabled:false                                       //禁止显示版权信息
}

4.2.2 设置版权信息内容

默认图表中的版权信息内容是Highcharts.com,而单击后,会跳转到Highcharts的官网http://www.highcharts.com/。对于开发者来说,这都是需要修改的。用户可以通过配置项text和href来指定自己需要的版权信息。其语法如下:

text: String1
href: String2

其中,参数String1指定版权信息的文本内容,默认值为Highcharts.com;参数String2指定版权信息的超链接网址,默认值为http://www.highcharts.com/

【实例4-8:textandhref】下面修改图表默认的版权信息,修改代码如下:

credits: {
    text: '大学霸',                                    //设置版权信息文本
    href:'http://daxueba.net'                       //设置版权信息的超链接
}

执行代码后,运行结果如图4.8所示。从图中看到,版权信息已经修改为代码所设置的信息了。

图4.8 定制版权信息

4.2.3 设置版权信息位置和样式

除了能设置版权信息的内容外,用户还可以设置版权信息显示的位置和各种样式。这时,需要使用配置项position和style。其语法如下:

position: Object
style: CSSObject

其中,参数Object指定版权信息显示的位置信息,可以包含的项如下所示。

align:表示水平对齐方式,值可以为left、center和right。默认值为right。

verticalAlign:表示垂直对齐方式,值可以为top、center和bottom。默认值为bottom。

x:表示水平偏移位置,单位为px。默认值为-10。

y:表示垂直偏移位置,单位为px。默认值为-5。

所以,参数Object的默认值为:

{
    align:'right',
    verticalAlign:'bottom',
    x:-10,
    y:-5
}

参数CSSObject指定版权信息的CSS样式。默认值如下:

{
    cursor: 'pointer',
    color: '#909090',
    fontSize: '10px'
}