highcharts基本介绍
转自:http://www.cnblogs.com/jyh317/p/4189773.html
一、highcharts简介
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基本介绍的更多相关文章
- 《Learning Highcharts》中文翻译
在highcarts的官方网站上推荐了一本书,由于highchart在平时工作中会用到,所以我们尝试将其翻译成中文,仅作为学习highchart工具的一种方式,以方便日后查阅. 翻译图书作为学习笔记, ...
- 基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts
在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件Highcharts,其强大的功能和丰富的互动效果,令人难以忘怀.本篇主要介绍在Web开发中使用 ...
- 使用Highcharts实现图表展示
本篇随笔记录的是本人2011年做广州地铁协同办公项目时,图表需求的解决方案.(Demo中只是虚拟的测试数据) 关键技术点: 使用Highcharts实现图表展示: 另外使用Highslide弹窗.使用 ...
- (转)基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts
http://www.cnblogs.com/wuhuacong/p/3736564.html 在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件 ...
- JS图表组件 highcharts 简单的介绍
把highcharts拿来做个简单的介绍,希望更多的朋友可以用到这个用来做图表的js插件. preparation Highcharts Highcharts是一个制作图表的纯Javascript类库 ...
- highcharts
preparation Highcharts Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对个人用 ...
- 在AngularJS中的使用Highcharts图表控件
一.Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 如果你的项目是基于jquer ...
- Highcharts 总结
一.Highcharts series属性 1.下面是一个基本曲线图的例子: <html> <head> <meta charset="UTF-8" ...
- Highcharts使用
Highcharts图表控件是使用比较广泛的图表控件.本文将介绍如何配置Highcharts和动态生成Highcharts图表.可参考Highcharts官网:http://www.highchart ...
随机推荐
- iOS开发探索-图片压缩处理
介绍: 压: 指文件体积变小,但是像素数不变,长宽尺寸不变,那么质量可能下降.缩: 指文件的尺寸变小,也就是像素数减少,而长宽尺寸变小,文件体积同样会减小. 应用: 在实际开发中,我们经常会对图片进行 ...
- UITabelViewCell自定义(zhuan)
很多时候,我们需要自定义UITableView来满足我们的特殊要求.这时候,关于UITableView和cell的自定义和技巧太多了,就需要不断的总结和归纳. 1.添加自定义的Cell. 这个 ...
- 360 网络攻防 hackgame 解题报告(通关)
地址:http://challenge.onebox.so.com/ 1.referrer or host 2.js decode 3.urldecode, ASCII 4.JFIF * 2 5.go ...
- Cassandra第一次使用
在FreeBSD上安装Cassandra: # pkg install cassandra2找了半天Cassandra的配置文件,原来安装位置是在这: /usr/local/share/cassand ...
- Hibernate标准查询语言
Hibernate标准(Criteria)查询语言(HCQL)用于根据具体条件获取记录.Criteria接口提供了应用标准的方法,例如检索薪水大于50000的表的所有记录. HCQL的优势 HCQL提 ...
- To Be a Dog Man
作为一个多年的篮球爱好者,多年保持者对于足球的偏见. 也许不了解也是偏见開始的地方. 直到我最终看到了那个男人---梅西 梅西:一个犬人,一个病人 视频作者是阿根廷专栏作家Hernam Casciar ...
- Win7机器上安装Ubuntu 14.0.4
折腾了两天,分享一下经历. 我须要在已经安装了win7的机器上安装Ubuntu 14.0.4 (两者共存),研究下来有例如以下几种方案, 都折腾了一遍.分享一下经验: 方式1: wubi.exe, 把 ...
- mysql 年龄计算(根据生日)
生日(DATE) 计算方法1: ))) 计算方法2: year( from_days( datediff( now( ), birthdate))) now() 当前时间,精确到秒 datediff( ...
- react import改为绝对路径
最近在使用react时发现路径用../../很不方便,特别是修改项目结构时,加减../都能改到吐血, 所有在网上找了半天webpack的配置,特此记录下 module.exports = (webpa ...
- 多个 python的pip版本选择
如果你电脑里面装了多个版本的python python3 -m pip instatll xlutilspython2 -m pip instatll xlutils 加载新的pippython -m ...