HighCharts 具体使用及API文档说明
一、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: {…} // 配置导出button属性
pane: {…} // 仅适用于极性图表和角仪表
plotOptions: {…} // 配置数据点选项
series: [{...}] // 配置数据列选项
subtitle: {…} // 配置副标题
title: {…} // 配置标题
tooltip: {…} // 配置数据点提示框
xAxis: {…} // 配置x轴选项
yAxis: {…} // 配置y轴选项
})
上面红色部分是图标完整性及美观必须自己配置的选项,其它选项无特殊须要默认即可,也就是不用配置,所以开发HighCharts是不是非常easy,仅仅须要配置简单的几个选项即可,以下具体解说每一个选项的配置。
三、HighCharts每部分具体配置:
、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 | 打印和导出button设置。当中两个button中又有非常多样式等设置,如有须要可具体查看API文档 | 默认button样式 |
enableImages | 在导出的图片中加入logo水印。布尔型,默认是false | false |
enabled | 是否显示button(也就是启用打印导出功能),布尔型,默认显示 | true |
filename | 导出图片文件名称,String型 | chart |
type | 导出图片的格式,有jpg和png可选,String型 | jpg/png |
url | 转换图片的serverurl,默认是用highchartsserver | 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 : 导出button选项,配置导出button及打印样式等,详见API文档。
11、pane :极性图表和角仪表选项配置(这两种表是在新版本号2.0.1新添加的选项)
、plotOptions :数据点选项。分不同图表类型配置不同,以下就经常使用的选项及spline选项列表例如以下
參数 | 描写叙述 | 默认值 |
enable | 是否在数据点上直接显示数据 | false |
allowPointSelect | 是否同意使用鼠标选中数据点 | false |
formatter | 回调函数,格式化数据显示内容 | formatter: function() { return this.y; } |
marker | 对某个点标记,多种样式可选 |
、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中具体解说
、title : 标题选项
參数 | 描写叙述 | 默认值 |
text | 标题文本内容 | Chart title |
align | 水平对齐方式 | center |
verticalAlign | 垂直对齐方式 | top |
margin | 标题与副标题之间或者主图表区间的间距 | 15 |
floating | 是否浮动,假设为true,则标题能够偏离主图表区,可配合x,y属性使用 | false |
style | css样式 |
{ color: ‘#3E576F’, |
x | 依照水平对齐方式的距离 | 0 |
y | 依照垂直对齐方式的距离 | 15 |
、tooltip :数据点提示框选项
參数 | 描写叙述 | 默认值 |
enable | 是否显示提示框 | true |
backgroundColor | 设置提示框的背景色 | rgba(255, 255, 255, .85) |
borderColor | 提示框边框颜色,默认自己主动匹配数据列的 | auto |
borderRadius | 提示框圆角度 | 5 |
shadow | 设置提示框内容样式,如字体颜色等 | color:’#333′ |
formatter |
回调函数,用于格式化输出提示框的显示内容。 返回的内容支持html标签如:<b>, <strong>,<br/> |
、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 |
、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”的目录,将所需的“highcharts.js”和“exporting.js”拷贝至“js”目录。
2)在“HighCharts”目录里新建一个html文件,任意命名,用文本编辑器写入例如以下内容:(html代码,相信大家都看的懂)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!--
载入jquery -->
<script
type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--
javascript代码 -->
<script
type="text/javascript">
$(function
() {
var
chart;
$(document).ready(function()
{
//定义一个HighCharts
chart
= new Highcharts.Chart({
});
});
});
</script>
<!--
载入 highC主js文件 ,-->
<script
src="js/highcharts.js"></script>
<!--
载入 exporting ,是highCharts实现打印,下载图片必须的js文件,假设不须要该功能,可不用-->
<script
src="js/exporting.js"></script>
<!--
新建一个容器,存放在head部分定义的Chart内容 。这里的id一定是chart : {...}内的renderTo的值-->
<div
id="highcharts1" style="min-width:400px;height:400px;margin:0 auto;"> |
3)配置chart中每一个选项的属性,代码例如以下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
<!--
载入jquery -->
<script
type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--
javascript代码 -->
<script
type="text/javascript">
$(function
() {
var
chart;
$(document).ready(function()
{
//定义一个HighCharts
chart
= new Highcharts.Chart({
//配置chart选项
chart:
{
renderTo:
'highcharts1', //容器名,和body部分的div id要一致
type:
'spline' //图表类型,这里选择折线图
},
//配置链接及名称选项
credits:
{
enabled
: true,
href
: "http://www.52wulian.org",
text
: "浏览总理:291,IP总数:74 -- 我爱物联网"
},
//配置标题
title:
{
text:
'我爱物联网 2012/09/22 訪问统计',
y:10 //默认对齐是顶部,所以这里代表距离顶部10px
},
//配置副标题
subtitle:
{
text:
'数据来源:百度统计',
y:30
},
//配置x轴
xAxis:
{
categories:
['0', '1', '2', '3', '4', '5','6', '7', '8', '9', '10', '11','12', '13','14','15','16','17','18','19','20','21','22','23/点']
},
//
配置y轴
yAxis:
{
title:
{
text:
'次数(次)'
},
labels:
{
formatter:
function() {
return
this.value +'次'
}
}
},
//配置数据点提示框
tooltip:
{
crosshairs:
true,
shared:
true
},
//配置数据使其点显示信息
plotOptions:
{
spline
: {
dataLabels:
{
enabled:
true
},
enableMouseTracking:
true
}
},
//配置数据列
series:
[{
name:
'浏览次数(PV)',
marker:
{
symbol:
'square'
},
data:
[16,10, 8, 0, 0, 0, 2, 1, 5,10,25,34,
8,12,38,22,13,14,11,
8, 8, 5, 8,33]},{
name:
'IP数',
marker:
{
symbol:
'diamond'
},
data:
[ 7, 2, 1, 0, 0, 0, 1, 1, 3, 5, 4, 2,
5,
5, 2, 1, 5, 3, 1, 4, 4, 4, 5, 9]
}]
});
});
});
</script>
<!--
载入 highC主js文件 ,-->
<script
src="js/highcharts.js"></script>
<!--
载入 exporting ,是highCharts实现打印,下载图片必须的js文件,假设不须要该功能,可不用-->
<script
src="js/exporting.js"></script>
<!--
新建一个容器,存放在head部分定义的Chart内容 。这里的id一定是chart : {...}内的renderTo的值-->
<div
id="highcharts1" style="min-width:400px;height:400px;margin:0 auto;"> |
4)本例演示地址:http://www.52wulian.org/test/HighCharts/HighCharts.html
5)本例源文件下载:http://pan.baidu.com/share/link?shareid=66439&uk=3087605183
本站统一解压password:www.52wulian.org
HighCharts API文档下载:
本站下载:http://pan.baidu.com/share/link?shareid=63516&uk=3087605183
本站统一解压password:www.52wulian.org
官方在线API:http://api.highcharts.com/highcharts
HighCharts 具体使用及API文档说明的更多相关文章
- HighCharts 详细使用及API文档说明
一.HighCharts开发说明: HighCharts开发实际上配置HighCharts每个部分,比如配置标题(title),副标题(subtitle)等,其中每个部分又有更细的参数配置,比如标题下 ...
- 【HighCharts系列教程】二、Highcharts结构及API文档
一.你必须知道的 1.首先,HighCharts是基于Jquery框架开发的,所以需要在页面引入Jquery,具体代码是: <script type="text/javascript& ...
- Java在DOS命令下的运行及其API文档制作过程
该文档主要描述java程序在DOS命令下的运行,以及一些常用的命令 常用DOS命令: d: 回车 盘符切换 dir(directory):列出当前目录下的文件以及文件夹 md (make direct ...
- 在ASP.NET Core Web API上使用Swagger提供API文档
我在开发自己的博客系统(http://daxnet.me)时,给自己的RESTful服务增加了基于Swagger的API文档功能.当设置IISExpress的默认启动路由到Swagger的API文档页 ...
- 利用sphinx为python项目生成API文档
sphinx可以根据python的注释生成可以查找的api文档,简单记录了下步骤 1:安装 pip install -U Sphinx 2:在需要生成文档的.py文件目录下执行sphinx-apido ...
- 如何使 WebAPI 自动生成漂亮又实用在线API文档
1.前言 1.1 SwaggerUI SwaggerUI 是一个简单的Restful API 测试和文档工具.简单.漂亮.易用(官方demo).通过读取JSON 配置显示API. 项目本身仅仅也只依赖 ...
- Android多媒体--MediaCodec 中文API文档
*由于工作需要,需要利用MediaCodec实现Playback及Transcode等功能,故在学习过程中翻译了Google官方的MediaCodec API文档,由于作者水平限制,文中难免有错误和不 ...
- 新手如何查看API文档?
Java API文档为例: 1:知道包名,可以在Overview里直接找到这个包,然后去查这个包下面的类和方法.2:知道类名和方法名,可以在Index.html里直接去找这个类或方法,然后查看.3:如 ...
- Bullet的学习资源(用Doxygen生成API文档)
Bullet 全称 Bullet Physics Library,是著名的开源物理引擎(可用于碰撞检测.刚体模拟.可变形体模拟),这里将bullet的学习资源整理一下,希望能帮助入门者少走弯路. 看下 ...
随机推荐
- 第六篇、WebSphere8.5 (商业级服务器)大规模集群
一.前言 上一篇中讲述了WebSphere的安装与应用,该版本的WAS一般都用于开发测试(有些小应用生产环境下也会用到),在生产中绝大部份使用的WebSphere Application Server ...
- removing right click context menu options on recycle bin
Humpty is correct as always First you might want to make a backup of the reg key then remove the Wa ...
- sql语句复制表
1.复制表结构及数据到新表CREATE TABLE 新表 SELECT * FROM 旧表 这种方法会将oldtable中所有的内容都拷贝过来,当然我们可以用delete from newtable; ...
- IE 6最小最大宽度与高度的写法
最小最大宽度,最小最大高度,这是CSS很常见的一个要求.在现代浏览器中,一个 min-height,min-width 就可以解决问题,但是在IE系列,比如IE6则比较繁琐一点.下面总结一些IE 6下 ...
- python中去掉空行的问题
在python中处理空行时,经常会遇到一些问题.现总结经验如下: 1.遇到的空行如果只有换行符,直接使用=='\n'或者 len(line)==line.count('\n') 2.有多个空格+换行符 ...
- HDU 1995
Problem Description 用1,2,...,n表示n个盘子,称为1号盘,2号盘,....号数大盘子就大.经典的汉诺塔问题经常作为一个递归的经典例题存在.可能有人并不知道汉诺塔问题的典故. ...
- SignalTap II应用小实例之触发位置
概述 SignalTap II一直以来都是笔者调试Altera FPGA设计的利器,最近比较有时间静下心来研究SignalTap II某些细节,虽然笔者有过不少关于SignalTap的使用,且也发表过 ...
- sublime text3入门笔记以及屏蔽sublime自动升级检测更新
两个月前学习python的时候,有人推荐这个程序员最好用的编辑器,我下载了之后,发现比notepad++要好用很多,目前来说,网上成熟的版本是sublime text2简体中文版,插件也是很兼容,我用 ...
- 【Java】Web 服务编程技巧与窍门: 在 UDDI 注册中心为 Web 服务注册开发 UDDI Java 应用程序
本技巧建立了一个使用统一描述.发现和集成 (Universal Description, Discovery, and Integration,UDDI) 来注册应用程序级消费的 Web 服务实例.作 ...
- Catenyms
poj2337:http://poj.org/problem?id=2337 题意:给定一些单词,如果一个单词的尾字母与另一个的首字母相同则可以连接.问是否可以每个单词用一次,将所有单词连接,可以则输 ...