Highcharts中文版是一款开源的JavaScript交互式图表工具,具有完美支持移动端、图表类型丰富、方便快捷的html5交互性图标库等功能。软件完美兼容IE6+,让数据可视化变得更简单。对于做java开发的朋友来说十分实用,欢迎下载!
软件特性
兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等;
对个人用户完全免费;
纯JS,无BS;
支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图;
跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTools类库;
提示功能:鼠标移动到图表的某一点上有提示信息;
放大功能:选中图表部分放大,近距离观察图表;
易用性:无需要特殊的开发技能,只需要设置一下选项就可以制作适合自己的图表;
时间轴:可以精确到毫秒
安装说明
通过 NPM 安装
通过下面的命令即可安装我们提供的 npm 包(包含 Highcharts、Highstock、Highmaps)
npm install highcharts --save
通过 Bower 安装
通过下面的命令即可安装我们提供的 Bower 包(包含 Highcharts、Highstock、Highmaps)
bower install highcharts --save
Highcharts目录结构说明:
|-- examples 例子
|-- gfx 例子用到的图片资源
|-- graphics 例子用到的图片资源
|-- code 所有 js 文件及源代码
|-- css Highcharts css 文件(只用于 CSS 版本 Highcharts)
|-- lib 相关的库文件
|-- modules 功能模块文件目录
|-- themes 主题文件目录
|-- highcharts.js highcharts 主文件
|-- highcharts.src.js highcharts 主文件源码
|-- highcharts-3d.js highcharts 3d 功能文件
|-- highcharts-3d.src.js highcharts 3d 功能文件源码
|-- highcharts-more.js highcharts 增加功能文件
|-- highcharts-more.src.js highcharts 增加功能文件源码
|-- readme.txt 源代码目录说明文件
|-- index.htm 例子入口文件
|-- license.pdf 使用协议文档
|-- readme.txt 说明文件
Highcharts基本介绍
Highcharts 基本组成
名词解释
lang:语言文字对象,所有Highcharts文字相关的设置
chart:图表区、图形区和通用图表配置选项
colors:图表数据列颜色配置,是一个颜色数组
credits: 版权信息,Highcharts在图表的右下方放置的版权信息及链
drilldown:钻取,向下钻取数据,深入到其中的具体数据
exporting:导出模块,导出功能配置,导出即将图表下载为图片或打印图表
legend:图例,用不同形状、颜色、文字等 标示不同数据列,通过点击标示可以显示或隐藏该数据列
loading:加载中,加载选项控制覆盖绘图区的加载屏的外观和文字
navigation:导航,导出模块按钮和菜单配置选项组
noData:没有数据,没有数据时显示的内容
pane:分块,针对仪表图和雷达图专用的配置,主要设置弧度及背景色
plotOptions:针对不同类型图表的配置
series:数据列,图表上一个或多个数据系列,比如图表中的一条曲线,一个柱形
title:标题,包括即标题和副标题,其中副标题为非必须的
tooltip:数据点提示框,当鼠标滑过某点时,以框的形式提示改点的数据,比如该点的值,数据单位等
Axis:坐标轴,包括x轴和y轴。多个不同的数据列可共用同一个X轴或Y轴,当然,还可以有两个X轴或Y轴,分别显示在图表的上下或左右
图表类型介绍
line:直线图
spline:曲线图
area:面积图
areaspline:曲线面积图
arearange:面积范围图
areasplinerange:曲线面积范围图
column:柱状图
columnrange:柱状范围图
bar:条形图
pie:饼图
scatter:散点图
boxplot:箱线图
bubble:气泡图
errorbar:误差线图
funnel:漏斗图
gauge:仪表图
waterfall:瀑布图
polar:雷达图
pyramid:金字塔
更新日志
新增配置 treemap.events.setRootNode。
新增配置 xAxis.margin 用来给同一侧的多个坐标轴添加间距。