highCharts图表入门简介
一、Highcharts简介
Highcharts:功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库
Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种不同类型的图表,可以满足你对Web图表的任何需求 !
二、Highcharts的构造

三、名词解释
| 英文名 | 中文名 |
描述 |
|---|---|---|
| lang | 语言文字对象 | 所有Highcharts文字相关的设置 |
| chart | 图表 | 图表区、图形区和通用图表配置选项 |
| colors | 颜色 | 图表数据列颜色配置,是一个颜色数组 |
| credits | 版权信息 | Highcharts在图表的右下方放置的版权信息及链 |
| drilldown | 向下钻取 | 向下钻取数据,深入到其中的具体数据 |
| exporting | 导出模块 | 导出功能配置,导出即将图表下载为图片或打印图表 |
| labels | 标签 | 可以放置到图表区域内任何位置的HTML标签 |
| legend | 图例 | 用不同形状、颜色、文字等 标示不同数据列,通过点击标示可以显示或隐藏该数据列 |
| loading | 加载中 | 加载选项控制覆盖绘图区的加载屏的外观和文字 |
| navigation | 导航 | 导出模块按钮和菜单配置选项组 |
| noData | 没有数据 | 没有数据时显示的内容 |
| pane | 分块 | 针对仪表图和雷达图专用的配置,主要设置弧度及背景色 |
| plotOptions | 数据点配置 | 针对不同类型图表的配置。Highcharts所有图表类型请看下表 |
| series | 数据列 | 图表上一个或多个数据系列,比如图表中的一条曲线,一个柱形 |
| title | 标题 | 包括即标题和副标题,其中副标题为非必须的 |
| tooltip | 数据点提示框 | 当鼠标滑过某点时,以框的形式提示改点的数据,比如该点的值,数据单位等 |
| Axis | 坐标轴 | 包括x轴和y轴。多个不同的数据列可共用同一个X轴或Y轴,当然,还可以有两个X轴或Y轴,分别显示在图表的上下或左右。 |
四、Highcharts的优势
兼容性
Highcharts支持目前所有的现代浏览器,包括IE6 +、iPhone/iPad、Android。Highcharts在标准(W3C标准)浏览器中使用SVG技术渲染图形,在遗留的IE浏览器中使用VML技术来绘图。
开源免费
针对个人用户及非商业用途免费,并提供源代码下载,你可以任意的修改它。商业用途需要购买许可,个人及非商业用途须遵循CC BY-NC 3.0协议
纯Javascript
Highcharts完全基于本地浏览器技术,不需要任何插件(例如Flash、java),不需要安装任何服务器环境或动态语言库支持,只需要两个js文件即可运行。
图表类型丰富
Highcharts目前支持直线图、曲线图、面积图、曲线面积图、面积范围图、曲线面积范围图、柱状图、柱状范围图、条形图、饼图、散点图、箱线图、气泡图、误差线图、漏斗图、仪表图、瀑布图、雷达图,共18种类型图表,其中很多图表可以集成在同一个图形中形成综合图。
动态性
提供丰富的API接口,方便在创建图表后对图表的任意点、线和文字等进行增加、删除和修改操作。支持众多的Javascript事件,结合jQuery、MooTools、Prototype等javascript框架提供的Ajax接口,可以实时地从服务器取得数据并实时刷新图表。
多轴支持
对于需要比较的数据,Highcharts提供多轴支持。并且可以针对每个轴设置其位置、文字和样式等属性。
动态提示框
当鼠标悬停在图表上的数据点时,Highcharts会显示信息提示框,当然,显示的内容和样式可以自己指定和设置。
图表导出和打印功能
你可以将Highcharts图表导出为PNG、JPG、PDF和SVG格式文件或直接在网页上打印出来。
图表缩放
可以设置图表的缩放,让你更方便查看图表数据。
支持外部数据加载
Highcharts支持多种数据形式,可以是Javascript数组、json文件、json对象和表格数据等,这些数据来源可以是本地、不同页面,甚至是不同网站。
highCharts图表入门简介的更多相关文章
- highCharts图表入门实例
本文通过讲解Highcharts生成一个简单的3D柱状图实例来学习Highcharts的使用. JSP 页面 1.需要引入的js文件 <script src="<%=basePa ...
- [转]highcharts图表入门之:如何让highcharts图表自适应浏览器窗体的大小或者页面大小
本文转自: http://jsfiddle.net/vCZ8V/1/ http://www.stepday.com/topic/?740 http://blog.csdn.net/yueritian/ ...
- highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度
highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度 作者:highcharts | 时间:2014-6-11 14:07:05 | [小 大] | ...
- highcharts图表中级入门之xAxis label:X(横)坐标刻度值过长截断多行(换行)显示问题说明
在使用highcharts图表的过程中,总会碰到这样一个很是棘手的问题,横坐标刻度值太长,在不换行显示的情况下显得格外拥挤.虽然针对这一问题是可以对其刻度值进行旋转以此来避开显示拥挤问题[如何让hig ...
- highcharts图表中级入门:非histock图表的highcharts图表如何让图表产生滚动条
最近highcharts图表讨论群里面很多朋友都在问如何让highcharts图表在X轴数据多的情况下产生滚动条的问题,其实之前有一个解决办法是将装载图表的div容器用css样式表弄一个滚动条出来.这 ...
- jQuery HighchartsTableHTML表格转Highcharts图表插件
版权申明jQuery HighchartsTable 由 PMSIpilot 创建,中文使用文档由Highcharts中文网发布本文由Theo.红烧鸡翅膀.Mr.Zhang 翻译整理,版权归Highc ...
- 转:Highcharts图表控件的使用
摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...
- 关于Highcharts图表组件动态修改属性的方法(API)总结之Series
Highcharts图表组件内的Series很重要,如果说Categries是其大脑,那么Series就是其心脏.这两者才是Highcharts图表组件的重中之重啊.接下来就为大家介绍关于设置Seri ...
- 掌握 Ajax,第 1 部分: Ajax 入门简介
转:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html 掌握 Ajax,第 1 部分: Ajax 入门简介 理解 Ajax 及其工作 ...
随机推荐
- iOS主流机型更新
主流机型更新后,舍弃了原有的iPhone 4 ,iPhone 4s, iPhone 5 ,iPhone 5s.增加了iPhone X,iPhone 8和iPhone 8 plus. 总体上屏幕趋于一个 ...
- CocosCreator弹窗处理
目前我所用的也就两种方法, 放置一个几近透明的sprite,作为遮罩,防止弹窗出现后,作为背景的UI上的按钮类的响应: 2,将上述遮罩作为弹窗的背景或者弹窗的子对象[此时,需要作为子对象的第一个,防止 ...
- Codeforces Round #404 (Div. 2) D. Anton and School - 2 数学
D. Anton and School - 2 题目连接: http://codeforces.com/contest/785/problem/D Description As you probabl ...
- Spark MLlib 之 Vector向量深入浅出
Spark MLlib里面提供了几种基本的数据类型,虽然大部分在调包的时候用不到,但是在自己写算法的时候,还是很需要了解的.MLlib支持单机版本的local vectors向量和martix矩阵,也 ...
- 图文并茂 —— 基于Oozie调度Sqoop
利用大数据来做BI分析的时候,必不可少需要设置一些调度任务. 本篇就讲述一下如何利用hue来编辑shell操作,这里面的很多操作在其他的调度操作里面也是可以借鉴的. 如果是linux里面可以直接执行的 ...
- Go语言第一深坑:interface 与 nil 的比较
interface简介 Go 语言以简单易上手而著称,它的语法非常简单,熟悉 C++,Java 的开发者只需要很短的时间就可以掌握 Go 语言的基本用法. interface 是 Go 语言里所提供的 ...
- C#键盘事件处理父窗体子窗体
: : MessageBox.Show(, , Keys.F1); ...
- iOS:使用莱文斯坦距离算法计算两串字符串的相似度
Levenshtein:莱文斯坦距离 Levenshtein的经典算法,参考http://en.wikipedia.org/wiki/Levenshtein_distance的伪代码实现的,同时参考了 ...
- centos下mysql自动备份(亲测可用)
编写sh脚本如下: #!/bin/bash db_user="root" db_passwd="123456" db_name="test_db&qu ...
- Android Studio下加入百度地图的使用(二)——定位服务
上一章(http://www.cnblogs.com/jerehedu/p/4891216.html)中我们已经完成了环境的搭建,这一章我们来研究一下如何使用. 第一步:在xml文件中加入以下权限 & ...