网页图表Highcharts实践教程之标签组与载入动画

网页图表Highcharts实践教程之标签组与载入动画

Highcharts标签组

在图表的大部分元素都提供了标签功能。但很多时候,我们需要额外说明一些信息。这个时候借助原有的图表元素的标签功能就不是很方便。Highcharts为用户提供了标签组功能。使用该功能可以在图表区的任意位置添加一个或者多个标签,如图3.9所示。该图表中在副标题前面增加一个标签,用以说明数据列展现的年份。

 

图3.9  标签组的应用

Highcharts标签组的结构

在Highcharts中,标签组使用labels组件实现。其语法形式如下:

 

  • labels:{
  •     //相关配置项
  • }

 

由于标签组不隶属于任何图表元素,所以它不作为其他图表元素的子项,而直接包含在图表选项中。

Highcharts构建标签

顾名思义,标签组是由一组标签构成。在使用的时候,用户可以定义一个,也可以定义多个标签。标签组中标签使用items组件构成。其语法如下:

 

  • items: [{
  •     //配置项
  • },
  • {
  •     //配置项
  • }
  • .........          //可以是很多项
  • ]

 

其中,每个标签都由一个花括号括起来;多个标签使用逗号分隔,然后用[]括起来。

构建标签,主要使用配置项html和style来设定标签内容和位置。其语法如下:

 

  • html:String1
  • style:CSSObject

 

其中,参数String指定标签内容,该值可以是HTML代码,也可以是纯文本内容。参数CSSObject指定标签的显示位置,包含left和top配置项。其语法如下:

 

  • left:Number1
  • top:Number2

 

其中,参数Number1表示标签的水平方向偏移距离,单位为px,默认值为0;参数Number2表示标签的垂直方向偏移距离,单位为px,默认值为0。

注意:必须设置style,包括其中两个配置项left和top中的一个,这样才能显示标签。否则,光有配置项html是无法显示标签的。

【实例3-9:items】下面实现图3.9的标签效果。修改代码如下:

 

  •                 labels: {
  •                     items: [{                                                          //添加标签
  •                         html: '2013年-2015年',                      //设置标签内容
  •                         style: {                                                    //设置标签位置
  •                             left: 10,                                           //设置水平位置
  •                             top:-25                                           //设置垂直位置
  •                         }
  •                     }]
  •                 }

 

执行后,效果如图3.9所示。从图中可以看到,标签默认以绘图区的左上角作为原点。配置项x和y都是相对该点计算的。

Highcharts设置标签的样式

在组件items中,可以通过配置项html指定HTML脚本的方式来设定每个标签的文本样式。为了设置方便,Highcharts还为组件labels提供配置项style来设定所有的的标签样式。其语法如下:

 

  • style:CSSObject

 

其中,参数CSSObject用来指定所有标签共同的CSS样式。其默认值为{color: '#3E576F'}。

用户可以根据自己的需要添加特定的样式。

Highcharts载入动画

载入动画是一个过渡动画。当图表加载数据需要时间较长,而无法展现图表数据,可以使用加载动画。其效果如图3.10所示。加载动画位于绘图区,会覆盖绘图区原有内容,并中心显示提示内容Loading...。

 

图3.10  载入动画

Highcharts显示载入动画

输入动画和前面的图表元素不同,它并不会自动显示。它需要使用图表对象来显式调用。这时需要使用方法showloading()。其语法如下:

 

  • chart.showloading(String str)

 

其中,chart必须是图表对象;参数str指定组件loading的配置项。该方法返回值为null。

载入动画除了在方法showloading的参数指定,还可以在图表选项中指定。其语法形式如下:

 

  • loading:{
  •     //相关配置项
  • }

 

【实例3-10:showloading】下面在图表中显示载入动画,修改代码如下:

 

  •     <script type="text/javascript">
  •         $(document).ready(function () {
  •             var options = {
  •                 chart: {
  •                     type: 'line',
  •                     zoomType: 'x'
  •                 },
  •                 title: {
  •                     text: '北京一周最高温度'
  •                 },
  •                 series: [{
  •                     name: '2015最高温度',
  •                     data: [6, 6, 7, 4, 5, 6, 8]
  •                 }
  •                 ],
  •                 credits: {
  •                     text: '大学霸',
  •                     href: 'http://daxueba.net'
  •                 }               
  •             };
  •             var chart;                                                                       //定义图表变量
  •             $('#container').highcharts(options);                         //创建图表动画
  •             chart = $('#container').highcharts();                         //获取图表对象
  •             chart.showLoading();                                                //显示载入动画
  •            
  •         });
  •     </script>

 

执行后,效果如图3.11所示。

 

图3.11  显示载入动画

载入动画并不会自动消失。如果取消载入动画,需要再使用图表对象的hideloading()方法。其语法如下:

 

  • chart.hideloading()

 

其中,chart表示图表对象;该方法没有参数,返回值为null。

Highcharts本地化载入动画

从图3.11中可以看到,载入动画默认的提示内容是Loading...。对于国内使用者,这并不友好。用户可以对提示内容本地化。需要使用到组件lang的配置项loading。其语法如下:

 

  • loading: String

 

其中,参数String用来指定载入动画显示的提示内容。默认值为loading...。

【实例3-11:customloading】下面对载入动画的提示内容实现本地化,将其修改为“数据载入中...”。修改代码如下:

 

  •         Highcharts.setOptions({
  •             lang: {
  •                 loading: '数据载入中...'                                                        //设置载入动画的提示内容
  •             }
  •         });

 

执行后,效果如图3.12所示。

 

图3.12  本地化载入动画

注意:对载入动画实施本地化,并不是设置组件loading的配置项,而是组件lang中设置。

Highcharts设置动画效果

为了使载入动画更符合当前图表的需要,用户可以借助Highcharts提供的配置项对动画进行定制。下面依次讲解常用的几种定制方式。

1.设置动画区域的样式

载入动画的区域覆盖了绘图区。这样,显示载入动画的时候,就可以遮挡绘图区的显示,起到提示用户的作用。该区域可以使用组件loading的配置项style进行设置。其语法如下:

 

  • style: CSSObject

 

其中,参数CSSObject指定载入动画区域的CSS样式。默认值如下:

 

  • {
  •          position: 'absolute',
  •          backgroundColor: 'white',
  •          opacity: 0.5,
  •          textAlign: 'center'
  • }

 

2.设置提示内容样式

虽然提示提示内容支持一定的HTML的标签,但更好的方式是使用配置项labelStyle。其语法如下:

 

  • labelStyle: CSSObject

 

其中,参数CSSObject指定动画提示内容的CSS样式。默认值如下:

 

  • {
  •          "fontWeight": "bold",
  •          "position": "relative",
  •          "top": "45%"
  • }

 

3.设置动画效果

除了设置各种CSS样式外,用户还可以设置动画的淡入、淡出效果的持续时间。这时,需要使用配置项showDuration和hideDuration。其语法如下:

 

  • showDuration: Number1
  • hideDuration: Number2

 

其中,参数Number1指定淡入动画持续时间,单位为毫秒ms,默认值为100;参数Number2指定淡出动画持续时间,单位为毫秒ms,默认值为100。

【实例3-12:loading】下面重新设定载入动画的淡入效果持续时间,修改代码如下:

 

  •                 loading: {
  •                     showDuration: 1000,                       //设置淡入效果持续时间
  •                     hideDuration: 1000                           //设置淡出效果持续时间
  •                 }

 

注意:淡入效果只有在显示载入动画时候才有效;反之,淡出效果只在隐藏载入动画时有效。

本文选自:网页图表Highcharts实践教程基础篇大学霸内部资料,转载请注明出处,尊重技术尊重IT人!

转载于:https://www.cnblogs.com/daxueba-ITdaren/p/4568432.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/459311.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

有趣的C语言面试题

1、gets() 和 fgets()函数 问题&#xff1a;找出下面代码的问题 #include<stdio.h> int main(void) { char buff[10]; memset(buff,0,sizeof(buff)); gets(buff); printf("\n The buffer entered is [%s]\n",buff); return 0; }答&#xff1a;上面代码里的…

Android 4.4 Kitkat Phone工作流程浅析(八)__Phone状态分析

本文来自http://blog.csdn.net/yihongyuelan 转载请务必注明出处本文代码以MTK平台Android 4.4为分析对象。与Google原生AOSP有些许差异。请读者知悉。前置文章&#xff1a; 《Android 4.4 Kitkat Phone工作流程浅析(一)__概要和学习计划》《Android 4.4 Kitkat Phone工作流程浅…

米家对讲机_对前面两代产品不断总结和完善的产物,米家对讲机2代开箱体验...

4月1日&#xff0c;小米终于发布了旗下对讲机产品的2代&#xff1a;米家对讲机2。憋了两年后&#xff0c;可见米家对讲机团队针对前期米家对讲机一代以及1S很多用户反应的问题还是非常重视的&#xff0c;所以这次的米家对讲机2代基本上改进了前期存在的不足&#xff0c;补齐了前…

【MFC】vs2013_MFC使用文件之15.mfc 按钮CBitmapButton的使用

本文是基于对话框的 博文基于 无幻 的博文为基础写的 http://blog.csdn.net/akof1314/article/details/4951836 笔者使用mfc撑死2个星期&#xff0c;不过这是有c基础的前提下接触mfc&#xff0c;昨天看到了网上对qt creator的评论&#xff0c;感觉好高大上&#xff0c;回去试了…

C语言存储空间布局以及static解析

本文我将采用Linux环境测试C语言存储空间布局&#xff0c;以及采用VC6.0来测试static的常见用法。采用linux环境来测试c语言存储空间布局&#xff0c;是因为Linux很容易利用shell命令中的size命令查看到进程存储区各段的大小。采用VC6.0来测试static的常见用法&#xff0c;是因…

老李推荐:第6章6节《MonkeyRunner源码剖析》Monkey原理分析-事件源-事件源概览-命令队列...

老李推荐&#xff1a;第6章6节《MonkeyRunner源码剖析》Monkey原理分析-事件源-事件源概览-命令队列事件源在获得字串命令并把它翻译成对应的MonkeyEvent事件后&#xff0c;会把这些事件排队放入一个由事件源维护的队列&#xff0c;然后其他地方如Monkey类的runMonkeyCycles方法…

华为手机怎么设置应用不全屏显示_手机投屏智能电视画面比例不合适怎么办?...

手机投屏到电视的比例不对怎么办知乎上有网友私下&#xff1a;“苹果手机屏幕镜像投屏到电视上&#xff0c;画面不能全屏&#xff0c;然后在网上查了一下是因为显示比例的问题&#xff0c;请问怎么解决&#xff1f;”这个问题说简单也简单&#xff0c;说难也难。说简单是因为想…

手把手教你使用CocoaPods管理你的iOS第三方开源类库

手把手教你使用CocoaPods管理你的iOS第三方开源类库 本文转载自&#xff1a;http://kittenyang.com/cocoapods 鉴于我开这个博客的初衷是记录自己平时的技术积累&#xff0c;而我平时又属研究iOS最多&#xff0c;因此这个博客在一定程度上可以说是以iOS技术为主的博客。既然研究…

alt复制选区就会卡 ps_PS入门视频教程笔记整理(二)工具栏介绍一

这几期会慢慢的更&#xff0c;工具栏的相关介绍还有一些简单有趣的应用~1、移动工具和画板工具 (1)移动工具选择相应的图层进行拖拽移动的操作■自动选择&#xff1a;不勾选的话——只有一个图层被选中(移动当前所选择的图层里的内容)勾选的话——无论你点击哪一个地方进行拖拽…

测试Markdown

一级标题 二级标题 四级标题 这是高阶标题&#xff08;和一级标题效果一样&#xff09; 这是次阶标题&#xff08;等同二阶标题&#xff09; 无序列表 *1 *2 *3 无序列表 -1 -2 -3 有序列表 1.你大爷 2.你大伯 3.你叔 4、你哥 这是一个引用 第二个引用 第三个…

MyBatis collection的两种形式——MyBatis学习笔记之九

与association一样&#xff0c;collection元素也有两种形式&#xff0c;现介绍如下&#xff1a; 一、嵌套的resultMap 实际上以前的示例使用的就是这种方法&#xff0c;今天介绍它的另一种写法。还是以教师映射为例&#xff0c;修改映射文件TeacherMapper.xml如下&#xff08;点…

int linux 原子操作_linux c++编程之多线程:原子操作如何解决线程冲突

在多线程中操作全局变量一般都会引起线程冲突&#xff0c;为了解决线程冲突&#xff0c;引入原子操作。1.线程冲突#include #include #include #include int g_count 0;void count(void *p){Sleep(100); //do some work//每个线程把g_count加1共10次for (int i 0; i < …

python查询斐波那契数列通项公式_分享一个神奇的操作系统——斐波那契+MACD,每一波都有20%以上的收益!...

斐波那契数列&#xff0c;又称兔子数列&#xff0c;或者黄金分割数列。指的是这样一个数列&#xff1a;0、1、1、2、3、5、8、13、21……从第三项起&#xff0c;它的每一项都等于前两项的和。为什么是兔子数列?我们假设兔子在出生两个月后&#xff0c;就有繁殖能力&#xff0c…

FPGA 状态机设计

数字系统有两大类有限状态机&#xff08;Finite State Machine&#xff0c;FSM&#xff09;&#xff1a;Moore状态机和Mealy状态机。 Moore状态机 其最大特点是输出只由当前状态确定&#xff0c;与输入无关。Moore状态机的状态图中的每一个状态都包含一个输出信号。这是一个典型…

WCF 初识(一)

WCF的前世今生 在.NETFramework 2.0以及前版本中&#xff0c;微软发展了Web Service&#xff08;SOAP with HTTP communication&#xff09;&#xff0c;.NET Remoting&#xff08;TCP/HTTP/Pipeline communication&#xff09;以及基础的Winsock等通信支持。 由于各个通信方法…

C/C++关键字解析

2、C/C分别有多少个关键字&#xff1f; 假如别人问某一个关键字是否属于C/C&#xff0c;要能正确的答出来。 1&#xff09;由ANSI标准定义的C语言关键字共32个 auto double int struct break else long switch case enum register typedef char extern return union const flo…

Linux系统:软链接与硬链接的原理分析

1、相关概念 1、索引节点inode(index node)&#xff1a;inode就是索引节点&#xff0c;它用来存放档案及目录的基本信息&#xff0c;包含时间、档名、使用者及群组等。 inode 是 UNIX/Linux 操作系统中的一种数据结构&#xff0c;其本质是结构体它包含了与文件系统中各个文件相…

操作系统:虚拟页式存储管理(缺页中断、页面置换算法)

1、基本工作原理 1、基本工作原理 在进程开始运行之前&#xff0c;不是全部装入页面&#xff0c;而是装入一个或者零个页面&#xff0c;之后根据进程运行的需要&#xff0c;动态装入其他页面&#xff1b;当内存已满&#xff0c;而又需要装入 新的页面时&#xff0c;则根据某种…

小程序 长按api_高质量的微信小程序样式模板应该长什么样?

现在不懂技术的小白若想快速制作自己的小程序&#xff0c;一般是通过小程序模板来实现。通过在模板上添加自己的图片、文字、商品等等&#xff0c;可以很简单地生成一个小程序。不过要想把小程序做得好看&#xff0c;你得找高质量的小程序样式模板才行。那么高质量的微信小程序…

web安全测试-AppScan使用分享

这里主要分享如何使用AppScan对一大项目的部分功能进行安全扫描。 ------------------------------------------------------------------------ 其实&#xff0c;对于安全方面的测试知道的甚少。因为那公司每个月要求对产品进行安全扫描。掌握了一人点使用技巧&#xff0c;所…