利用Highcharts制作web图表学习(一)
通常情况下,Highcharts包含标题(Title)、坐标轴(Axis)、数据列(Series)、数据提示框(Tooltip)、图例(Legend)、版权信息(Credits)等,高级的还包括导出功能按钮(Exporting)、标示线(PlotLines)、标示区域(PlotBands)等。
Highcharts基本组成部分如下图所示
图2-1 Highcharts基本组成部分
Highcharts主要组成
Title
图表标题,包含标题和副标题(subTitle),其中副标题是非必须的。
Axis
坐标轴,包含x轴(xAxis)和y轴(yAxis)。通常情况下,x轴显示在图表的底部,y轴显示在图表的左侧。多个数据列可以共同使用同一个坐标轴,为了对比或区分数据,Highcharts提供了多轴的支持。
Series
数据列。图表上一个或多个数据系列,比如曲线图中的一条曲线,柱状图中的一个柱形。
Tooltip
数据提示框。当鼠标悬停在某点上时,以框的形式提示该点的数据,比如该点的值,数据单位等。数据提示框内提示的信息完全可以通过格式化函数动态指定。
Legend
图例。用不同形状、颜色、文字等 标示不同数据列,通过点击标示可以显示或隐藏该数据列。
Credits
图表版权信息。显示在图表右下方的包含链接的文字,默认是Highcharts官网地址。通过指定credits.enabled=false即可不显示该信息。
Exporting
导出功能按钮。通过引入exporting.js即可增加图表导出为常见文件功能。
PlotLines
标示线(或辅助线)。可以在图表上增加一条标示线,比如平均值线,最高值线等。
PlotBands
标示区域(分辨带)。可以在图表添加不同颜色的区域带,标示出明显的范围区域。
利用Highcharts制作web图表学习(一)的更多相关文章
- 利用Highcharts制作web图表学习(二)
最近中海油的项目需要用到图表展示数据,最近还是一直边学习边开发,今天做了一个展示,炼化厂加热炉效率展示的柱状图,把代码贴出来,大家指点一下互相学习,我是通过数组给Highcharts绑定的值, ...
- 使用highcharts 绘制Web图表
问题描述: 使用highcharts 绘制Web图表 Highcharts说明: 问题解决: (1)安装Highcharts 在这些图表中,数据源是一个典型的JavaScrip ...
- D3制作基础图表学习总结(part1)
一.基本的环境搭建(和使用其他框架或js库一样) 1.建立一个工程: 2.在html文件中引入D3的文件: 附上git地址:https://github.com/d3/d3/wiki 二.建立图表 ...
- Highcharts使用教程(1):制作简单图表
今天我们要使用JavaScript图表Highcharts制作简单的柱形图,我们已经安装好Highcharts,让我们开始制作图表吧. 步骤一 在网页中添加一个div.设置id,设置图表长.高.代码如 ...
- 风炫安全web安全学习第三十三节课 文件包含漏洞基础以及利用伪协议进行攻击
风炫安全web安全学习第三十三节课 文件包含漏洞基础以及利用伪协议进行攻击 文件包含漏洞 参考文章:https://chybeta.github.io/2017/10/08/php文件包含漏洞/ 分类 ...
- 风炫安全WEB安全学习第二十五节课 利用XSS键盘记录
风炫安全WEB安全学习第二十五节课 利用XSS键盘记录 XSS键盘记录 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源.所以xyz.com下的js脚本采用a ...
- 风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击
风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击 XSS钓鱼攻击 HTTP Basic Authentication认证 大家在登录网站的时候,大部分时候是通过一个表单提交登录信息. 但是有时候 ...
- 风炫安全WEB安全学习第二十三节课 利用XSS获取COOKIE
风炫安全WEB安全学习第二十三节课 利用XSS获取COOKIE XSS如何利用 获取COOKIE 我们使用pikachu写的pkxss后台 使用方法: <img src="http:/ ...
- web前端学习部落22群分享给需要前端练手项目
前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程, ...
随机推荐
- Esper系列(七)数据缓存、外部事件应用(静态方法)
LRU Cache 功能:最近最少使用策略. 数据库查询缓存应用配置: 1 ); 12 } 13 return bean; 14 } 15 } ...
- 问题-delphi在某电脑(win7)上是界面超乱 DPL
问题现象:本机运行正常,但是在WIN7或个别的XP上,界面显示控件大小不一,界面超乱 问题原因:可以百度“delphi dpi”或者“delphi 控件自适应分辨率” 问题处理:将窗体的Scaled设 ...
- 几乎每个文件里面都有 #ifdef __cplusplus extern "C" { #endif 可我没找到程序里那个地方定义了__cplusplus 啊?这又是怎么回事呢?
我们的C语言有个进化版,叫C++,这个想必楼主知道,Keil MDK是支持C++编程的,也就是说,你可以用C语言或者C++写你的程序,都可以. 但是,有一个问题,就是头文件的问题,C语言写的头文件C+ ...
- PHP 判断用户是否手机访问
$agent = check_wap(); if( $agent ) { header('Location: http://www.lewanau.com'); exit; } // check if ...
- Redis_基本类型介绍和指令___1
1.Key(键) 主要的方法: ->set key(设置) ->get key(得到) ->del key(删除) ->exitst key(存在) -> expires ...
- IOS开发之tableview只选中一行
场景:一个弹出层,包含一个Tableview,每一行为一个选择条件,且只能选择一个.选中后文体有颜色变化,后面还会有对勾.选择另一个后,前一个恢复成普通状态. 示例代码: -(void)tableVi ...
- C# 基础知识 protected 关键字
using System;using System.Collections.Generic;using System.Linq;using System.Text; namespace Console ...
- 解决div和父div不上对齐
加一个vertical-align: top;就好了.原因就是inline-block会使元素向下对齐.这和padding-top,margin-top没有关系的.使用浮动就不会有这种情况了,当然会带 ...
- SqlServer表中两条全然同样的记录,怎样删除当中1条
描写叙述:表无主键ID,误插入两遍数据,怎样删除内容同样的记录,而仅仅留下1条. SELECT DISTINCT * INTO #temp FROM grade; DROP TABLE grade; ...
- 深入浅出JMS(一)——JMS简单介绍
假设手机仅仅能进行实时通话,没有留言和短信功能会怎么样?一个电话打过来,正好没有来得及接上,那么这个电话要传递的信息肯定就收不到了.为什么不能先将信息存下来,当用户须要查看信息的时候再去获得信息呢?伴 ...