一、HighCharts开发说明:
HighCharts开发实际上配置HighCharts每个部分,比如配置标题(title),副标题(subtitle)等,其中每个部分又有更细的参数配置,比如标题下有对齐方式(align),标题文字(text)等。下图为整个图表的每个部分位置说明(请对照下面HighCharts整体结构)
二、HighCharts整体结构:
通过查看API文档我们知道HighCharts结构如下:(API文档在文章后面提供下载)
var chart = new Highcharts.Chart({
chart: {…} // 配置chart图表区
colors: [{...}] // 配置主体显示颜色(多个线条和柱体的颜色顺序的)
credits: {…} // 配置右下角版权链接
exporting: {…} // 配置导出及打印
global: {…} // Highcharts.SetOptions方法调用
labels: {…} // HTML标签,可以放置在绘图的任何位置
lang: {…} // 语言对象属性配置
legend: {…} // 配置图例选项
loading: {…} // 配置图表加载选项
navigation: {…} // 配置导出按钮属性
pane: {…} // 仅适用于极性图表和角仪表
plotOptions: {…} // 配置数据点选项
series: [{...}] // 配置数据列选项
subtitle: {…} // 配置副标题
title: {…} // 配置标题
tooltip: {…} // 配置数据点提示框
xAxis: {…} // 配置x轴选项
yAxis: {…} // 配置y轴选项
})
上面红色部分是图标完整性及美观必须自己配置的选项,其他选项无特殊需要默认就行,也就是不用配置,所以开发HighCharts是不是很简单,只需要配置简单的几个选项就行,下面详细讲解每个选项的配置。
三、HighCharts每部分详细配置:
1、chart :图表区选项
主要设置图表的类型,图表装载容器名,背景,高度,宽度等图表的整体属性。
参数 | 描述 | 默认值 |
backgroundColor | 设置图表区背景色 | #FFFFFF |
borderWidth | 设置图表边框宽度 | 0 |
borderRadius | 设置图表边框圆角角度 | 5 |
renderTo | 图表放置的容器,一般在html中放置一个DIV,获取DIV的id属性值 | null |
defaultSeriesType | 默认图表类型line, spline, area, areaspline, column, bar, pie , scatter |
0 |
width | 图表宽度,默认根据图表容器自适应宽度 | null |
height | 图表高度,默认根据图表容器自适应高度 | null |
margin | 设置图表与其他元素之间的间距,数组,如[0,0,0,0] | [null] |
plotBackgroundColor | 主图表区背景色,即X轴与Y轴围成的区域的背景色 | null |
plotBorderColor | 主图表区边框的颜色,即X轴与Y轴围成的区域的边框颜色 | null |
plotBorderWidth | 主图表区边框的宽度 | 0 |
shadow | 是否设置阴影,需要设置背景色backgroundColor | false |
reflow | 是否自使用图表区域高度和宽度,如果没有设置width和height时,会自适应大小 | true |
zoomType | 拖动鼠标进行缩放,沿x轴或y轴进行缩放,可以设置为:‘x’,'y’,'xy’ | ” |
events | 事件回调,支持addSeries方法,click方法,load方法,selection方法等的回调函数 |
、
2、colors :数据列颜色选项
主要是数据列颜色设置,比如多条线条中的每个线条颜色。
参数 | 描述 | 默认 |
color | 用于展示图表,折线/柱状/饼状等图的颜色,数组形式。 |
一组html颜色代码 |
colors: [ '#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4' ] |
说明:1、颜色代码为html标准,可通过DW等复制想要的代码 2、默认是从第一个数据列起调用第一个颜色代码,有多少个数 据列调用相应数量的颜色 3、当数据列大于默认颜色数量时,重复从第一个颜色看是调用 |
3、credits :版权链接选项
参数 | 描述 | 默认值 |
enabled | 是否显示版权及链接,布尔型,默认为显示 | true |
position | 位置。可用align调整对齐方式,x,y设置距离。 |
position: {align: ‘right’,x: -10, verticalAlign: ‘bottom’,y: -5 } |
href | 链接地址。String型,默认是highCharts官网 | www.highcharts.com |
style | 名片CSS模式 |
itemStyle : { cursor: ‘pointer’,color: ‘#909090′, fontSize: ’10px’ } |
text | 显示名字。 | highcharts.com |
4、exporting :导出及打印选项
参数 | 描述 | 默认值 |
buttons | 打印和导出按钮设置。其中两个按钮中又有很多样式等设置,如有需要可详细查看API文档 | 默认按钮样式 |
enableImages | 在导出的图片中添加logo水印。布尔型,默认是false | false |
enabled | 是否显示按钮(也就是启用打印导出功能),布尔型,默认显示 | true |
filename | 导出图片文件名,String型 | chart |
type | 导出图片的格式,有jpg和png可选,String型 | jpg/png |
url | 转换图片的服务器url,默认是用highcharts服务器 | http://export.highcharts.com |
width | 图片大小,数字型 | 800 |
5、global :Highcharts.SetOptions方法调用
全局选项,并不适用于每一个图表。这些选项,如lang选项,必须设置使用Highcharts.setOptions方法。一般用不到,详情请查看API文档。
6、labels :HTML标签(可放置在图表的任意地方)
参数 | 描述 | 默认值 |
items | 包含两个选项html和style,分别代表html语句及样式 | iteml :{
html : “”, style { } |
style | css样式 |
style:{ color : ‘#3E576F’} |
7、lang :语言配置选项,主要配置符号、导出时显示的语句、时间显示语言等。和上面的global参数有关,即调用Highcharts.SetOptions方法。下表列举常用的选项注意:lang选项其实就是配置一些显示语言,API中都有详细说明。
参数 | 描述 | 默认值 |
decimalPoint | 小数点 | . |
downloadJPEG | 导出显示的文字,下面还有downloadPDF等,都一样 | Download JPEG image等 |
months | 月份,字符串数组形式 |
['January' 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] |
numericSymbols | 数值单位,比如1000为1k | ['k', 'M', 'G', 'T', 'P', 'E'] |
8、legend :图例选项,即数据类标示。
参数 | 描述 | 默认值 |
layout | 显示形式,支持水平horizontal和垂直vertical | horizontal |
align | 对齐方式 | center |
backgroundColor | 背景颜色 | nulll |
borderColor | 图例边框颜色 | #909090 |
borderRadius | 图例边框角度 | 5 |
enabled | 是否显示图例 | true |
floating | 是否可以浮动,配合x,y属性 | false |
shadow | 是否显示阴影 | false |
style | 图例样式 | 详见API文档 |
9、loading: 图表加载选项
参数 | 描述 | 默认值 |
hideDuration | 淡出效果持续时间,以毫秒为单位 | 100 |
labelStyle | 标签样式,css形式 | 详见API文档 |
showDuration | 淡入效果持续时间,以毫秒为单位 | 100 |
style | 图表加载样式 | 详见API文档 |
10、navigation : 导出按钮选项,配置导出按钮及打印样式等,详见API文档。
11、pane :极性图表和角仪表选项配置(这两种表是在新版本2.0.1新增加的选项)
12、plotOptions :数据点选项。分不同图表类型配置不同,下面就常用的选项及spline选项列表如下
参数 | 描述 | 默认值 |
enable | 是否在数据点上直接显示数据 | false |
allowPointSelect | 是否允许使用鼠标选中数据点 | false |
formatter | 回调函数,格式化数据显示内容 | formatter: function() { return this.y; } |
marker | 对某个点标记,多种样式可选 |
13、series :数据列选项
参数 | 描述 | 默认值 |
data | 显示在图表中的数据列,可以为数组或者JSON格式的数据。如:data:[0, 5, 3, 5],或 data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}] |
‘’ |
name | 数据列名称 | ‘’ |
type | 数据列类型,支持 area, areaspline, bar, column, line, pie, scatter、spline | line |
14、subtitle : 副标题选项。和title配置一样,在title中详细讲解
15、title : 标题选项
参数 | 描述 | 默认值 |
text | 标题文本内容 | Chart title |
align | 水平对齐方式 | center |
verticalAlign | 垂直对齐方式 | top |
margin | 标题与副标题之间或者主图表区间的间距 | 15 |
floating | 是否浮动,如果为true,则标题可以偏离主图表区,可配合x,y属性使用 | false |
style | css样式 |
{ color: ‘#3E576F’, |
x | 按照水平对齐方式的距离 | 0 |
y | 按照垂直对齐方式的距离 | 15 |
16、tooltip :数据点提示框选项
参数 | 描述 | 默认值 |
enable | 是否显示提示框 | true |
backgroundColor | 设置提示框的背景色 | rgba(255, 255, 255, .85) |
borderColor | 提示框边框颜色,默认自动匹配数据列的 | auto |
borderRadius | 提示框圆角度 | 5 |
shadow | 设置提示框内容样式,如字体颜色等 | color:’#333′ |
formatter |
回调函数,用于格式化输出提示框的显示内容。 返回的内容支持html标签如:<b>, <strong>,<br/> |
|
17、xAxis :x轴选项
参数 | 描述 | 默认 |
categories |
设置X轴分类名称,数组,例如: categories: ['Apples', 'Bananas', 'Oranges'] |
[] |
title |
X轴名称,支持text、enabled、align、rotation、style等属性
|
|
labels |
设置X轴各分类名称的样式style,格式formatter,角度rotation等 |
|
max |
X轴最大值(categories为空时),如果为null, 则最大值会根据X轴数据自动匹配一个最大值
|
null |
min |
X轴最小值(categories为空时),如果为null, 则最小值会根据X轴数据自动匹配一个最小值
|
null |
gridLineColor |
网格(竖线)颜色
|
#C0C0C0 |
gridLineWidth |
网格(竖线)宽度 |
1 |
lineColor |
基线颜色 |
#C0D0E0 |
lineWidth |
基线宽度 |
0 |
18、yAxis :y轴选项
和x轴配置相同或类似。
注意:1、以上所有参数如果没特殊要求,及为默认是,可不用再代码中配置
2、API中还有更多的配置选项,可通过阅读API了解详细
3、红色部分为主要配置内容
四、实例说明HighCharts开发步骤
1、要求
1)绘制一个显示本站2012/9/22日访问统计,包括浏览量(pv),IP数的折线图。
2)x轴按每小时统计,y轴显示对应的数量
3)折线图上x轴对应的点显示数量,当鼠标经过改点时,用提示框形式显相关信息
4)要有图例显示每条折现代表什么数据信息
5)图表右下角加上“我爱物联网”字样并链接到www.52wulian.org
6)要有主标题和副标题
7)要能实现图表打印及导出常见格式的图片功能
2、开发步骤
1)新建一个文件夹名为“HighCharts”,并在该文件夹内新建一个名为“js”的文件夹,将所需的“jquery-2.1.1.min.js”、“highcharts.js”和“exporting.js”拷贝至“js”文件夹。
2)在“HighCharts”文件夹里新建一个html文件,随意命名,用文本编辑器写入如下内容:(html代码,相信大家都看的懂)
<!-- 加载jquery --> <script type="text/javascript" src="js/jquery-2.1.1.min.js"> </script> <!-- javascript代码 --> <script type="text/javascript"> $(function(){ var chart; $(document).ready(function(){ //定义一个HighCharts chart = new Highcharts.Chart({}); }); }); </script> <!-- 加载 highC主js文件 ,--> <script type="text/javascript" src="js/highcharts.js"> </script> <!-- 加载 exporting ,是highCharts实现打印,下载图片必须的js文件,如果不需要该功能,可不用--> <script type="text/javascript" src="js/exporting.js"> </script> <!-- 新建一个容器,存放在head部分定义的Chart内容 。这里的id一定是chart : {...}内的renderTo的值-->
3)配置chart中每个选项的属性,代码如下
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>highcharts 饼状图</title> <!-- 加载jquery --> <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> <!-- 加载 highcharts文件 --> <script type="text/javascript" src="js/highcharts.js"></script> <!-- 加载 exporting ,是highCharts实现打印,下载图片必须的js文件,如果不需要该功能,可不用--> <script type="text/javascript" src="js/exporting.js"></script> <!-- javascript代码 --> <script type="text/javascript"> $(function(){ //定义一个HighCharts var chart = new Highcharts.Chart({ //配置chart选项 chart: { renderTo: container,//容器名,和body部分的div id要一致 type: 'pie',// 图表类型 plotBackgroundColor: null, plotBorderWidth: 1,//null, plotShadow: false }, //配置版权链接及名称选项 credits: { enabled : true, href : "http://www.iteye.com", text : "我爱iteye" }, //配置标题 title: { text: 'Browser market shares at a specific website, 2014' }, //配置副标题 tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, //配置数据,使其点显示信息 plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } } } }, //配置数据列 series: [{ name: 'Browser share', data: [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ] }] }); }) </script> </head> <body> <!-- 新建一个容器,存放在head部分定义的Chart内容 。这里的id一定是chart : {...}内的renderTo的值--> <div id="container" style="min-width: 500px; height: 700px; max-width: 1000px; margin: 0 auto"></div> </body> </html>
HighCharts API文档下载:
本站下载:http://pan.baidu.com/share/link?shareid=63516&uk=3087605183
本站统一解压密码:www.52wulian.org
官方在线API:http://api.highcharts.com/highcharts
写在后面的话:其实HighCharts开发很简单,只需要配置几个简单的选项,填充数据即可,不要被这篇文章的诸多选项吓住了,这里只是为了详细说明每个配置,大多数的配置只需默认值就行,也就不用配置。
附件中有所需要的jar包,自己尝试做一下,效果会很好!
相关推荐
本篇文章将详细解析HighCharts的使用方法以及其API接口,帮助开发者更好地理解和运用这个强大的工具。 一、HighCharts基本使用 1. 引入HighCharts库:首先,你需要在HTML文件中引入HighCharts的JavaScript文件。...
`HighCharts API.zip`文件很可能是HighCharts的官方API文档,它将详细解释每个配置选项、函数和方法的用法,是开发过程中不可或缺的参考资料。通过阅读和理解API文档,开发者可以充分利用HighCharts的潜力,创造出...
需要注意的是,尽管文档提供了常用的选项配置信息,但对于更多详细配置和高级功能,建议参考官方API文档:***。在开发过程中,理解这些配置项背后的原理和作用能够帮助开发者更高效地利用Highcharts库,创建出既美观...
HighCharts 详细使用及API文档说明,附带小例子,包你物超所值!
Highcharts 最新3.0版离线API文档 网上能找到的都是2.X版本的,而且整理得也不怎么好 这个插件效果非常牛B,但官网API 文档不提供下载,而且访问也不怎么稳定,实在非常冒火 于是花了点时间把官网的相关资源扒下来,...
因官网不支持api文档下载,而在线访问的速度亲你是知道的,慢得要死。所以我花了一点时间扒下了文档,改了部分js,做了一个离线的API文档。(其中只有plotOptions里缺了errorbar和waterfall,感觉用不到就没抓这部分了...
**一、Highcharts结构及API文档** Highcharts的基本结构由一系列配置对象组成,这些配置对象定义了图表的各个方面,包括但不限于图表类型、颜色、图表标题、轴设置等。以下是Highcharts结构的基本组件: 1. **准备...
近期用到Highcharts,但公司上网不方便,网络上也没有找到其他的离线API。无奈只好自己决定制作一个,花了3个小时终于制作好了,现在放上来与大家分享,顺便也挣点辛苦积分。 需要放在web服务器上运行,如tomcat。
这个压缩包包含了关于HighCharts的一些关键资源,包括API文档、示例Demo和属性截图,对于理解和应用HighCharts非常有帮助。 首先,让我们详细了解一下HighCharts的API。API(Application Programming Interface)是...
这个压缩包"highcharts 中文API及DEMO"可能包含了Highcharts的中文版API文档和一些示例代码,对于学习和使用Highcharts的中文用户来说是非常有价值的资源。 首先,Highcharts的API文档是理解其功能和用法的关键。在...
Highcharts结构及API文档** - **准备工作**:Highcharts基于jQuery开发,因此,首先要在页面上引入jQuery库。其次,引入Highcharts.js文件。若需使用导出功能,则需额外引入位于`/Highcharts-X.X.X/js/modules/`...
Highcharts CHM文档包含了Highcharts图表库的详细API说明、配置选项、使用示例以及常见问题解答等内容。通过该文档,开发人员可以深入了解Highcharts的各个组件(如图表类型、坐标轴、图例、数据点提示框等)的配置...
中文API文档提供了详细的类、方法、属性和参数说明,例如: - `chart`对象是图表的核心,包含了大部分的公共方法和属性。 - `series`对象代表图表中的一个数据系列,可以设置颜色、类型、数据等。 - `xAxis`和`yAxis...
对于更复杂的配置和细节,可以参考Highcharts的官网API文档(***),其中包含了完整的配置项列表和详细的说明。由于文档内容来源于网络,并且部分信息可能由于OCR技术原因存在识别错误,建议用户在实践中对照官网API...
Highcharts-4.0.4含中文API,Highcharts 是一个用纯JavaScript编写的一个图表库,HighCharts特点:1.兼容性:HighCharts采用纯JavaScript编写,兼容当今大部分的浏览器,包括Safari、IE和火狐等等; 2.图表类型众多:...
API文档详细解释了每个函数、方法、属性以及配置选项,使得开发者可以精确地控制图表的显示效果和交互行为。 Highcharts API主要包含以下几个部分: 1. **Series**: 系列对象是图表的核心,代表了一组数据。你可以...
`Highcharts&Highstock中文API PDF`是这两个库的中文版官方文档,对于学习和使用Highcharts和Highstock非常有帮助。它详细介绍了各个API接口、配置项、方法和事件,以及如何通过这些实现各种图表和特效。PDF中包含...
每个选项都有详细的注释和用法说明,可以在Highcharts的官方文档中找到。 例如,对于轴的配置,你可以指定轴的标题、刻度、网格线等,例如: ```javascript xAxis: { title: { text: '时间' }, labels: { format...
1. **Highcharts_Options_Reference_帮助_说明.doc**:这是一份关于Highcharts 2.3.3的官方选项参考文档,详细介绍了如何配置图表的各种属性和选项,如图表类型、数据系列、轴、标题、图例、数据标签等。通过这份...