highCharts图表入门简介

一、Highcharts简介

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

二、Highcharts的构造

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对象和表格数据等,这些数据来源可以是本地、不同页面,甚至是不同网站。

上一篇:Flume 多个agent串联


下一篇:mac 快捷键拾遗