Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,目前官网只提供英文版的开发配置说明文档,而中文版的文档网上甚少,且零散不全。这里,我把Highcharts常用的最核心的参数选项配置整理成文档,与大家分享。

Chart:图表区选项

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方法等的回调函数。

Color:颜色选项

Color颜色选项用于设置图表的颜色方案。

参数

描述

默认值

color

用于展示图表,折线/柱状/饼状等图的颜色,数组形式。

array

Highcharts已经默认提供了多种颜色方案,当要显示的图形多于颜色种类时,多出的图形会自动从第一种颜色方案开始选取。自定义颜色方案的方法:

Highcharts.setOptions({ 
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', 
'#FFF263', '#6AF9C4'] 
});

Title:标题选项

Title标题选项用于设置图表的标题相关属性。

参数

描述

默认值

text

标题文本内容。

Chart title

align

水平对齐方式。

center

verticalAlign

垂直对齐方式。

top

margin

标题与副标题之间或者主图表区间的间距。

15

floating

是否浮动,如果为true,则标题可以偏离主图表区,可配合x,y属性使用。

false

style

设置CSS样式。

{color: '#3E576F',
fontSize: '16px'}

Subtitle:副标题选项

副标题提供的属性选项与标题title大致相同,可参照上述标题选项,值得一提的是副标题的text选项默认为'',即空的,所以默认情况下副标题不显示。

xAxis:X轴选项

X轴选项用于设置图表X轴相关属性。

参数

描述

默认值

categories

设置X轴分类名称,数组,例如:categories: ['Apples', 'Bananas', 'Oranges']

[]

title

X轴名称,支持text、enabled、align、rotation、style等属性

labels

设置X轴各分类名称的样式style,格式formatter,角度rotation等。

array

max

X轴最大值(categories为空时),如果为null,则最大值会根据X轴数据自动匹配一个最大值。

null

min

X轴最小值(categories为空时),如果为null,则最小值会根据X轴数据自动匹配一个最小值。

array

gridLineColor

网格(竖线)颜色

#C0C0C0

gridLineWidth

网格(竖线)宽度

1

lineColor

基线颜色

#C0D0E0

lineWidth

基线宽度

0

yAxis:Y轴选项

Y轴选项与上述xAxis选项基本一致,请参照上表中的参数设置,不再单独列出。

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 or spline

line

plotOptions:数据点选项

plotOptions用于设置图表中的数据点相关属性。plotOptions根据各种图表类型,其属性设置略微有些差异,现将常用选项列出来。

参数

描述

默认值

enabled

是否在数据点上直接显示数据

false

allowPointSelect

是否允许使用鼠标选中数据点

false

formatter

回调函数,格式化数据显示内容

formatter: function() {return this.y;}

Tooltip:数据点提示框

Tooltip用于设置当鼠标滑向数据点时显示的提示框信息。

参数

描述

默认值

enabled

是否显示提示框

true

backgroundColor

设置提示框的背景色

rgba(255, 255, 255, .85)

borderColor

提示框边框颜色,默认自动匹配数据列的颜色

auto

borderRadius

提示框圆角度

5

shadow

是否显示提示框阴影

true

style

设置提示框内容样式,如字体颜色等

color:'#333'

formatter

回调函数,用于格式化输出提示框的显示内容。返回的内容支持html标签如:<b>, <strong>, <i>, <em>, <br/>, <span>

2

Legend:图例选项

legend用于设置图例相关属性。

参数

描述

默认值

layout

显示形式,支持水平horizontal和垂直vertical

horizontal

align

对齐方式。

center

backgroundColor

图例背景色。

null

borderColor

图例边框颜色。

#909090

borderRadius

图例边框角度

5

enabled

是否显示图例

true

floating

是否可以浮动,配合x,y属性。

false

shadow

是否显示阴影

false

style

设置图例内容样式

''

网页图表控件Highcharts选项配置参数的更多相关文章

  1. 网页图表控件Highcharts如何详细设置参数

    在下载了Highcharts范例之后,按照如下所示第一步第二步操作.在第二步中,默认并没有提供很多参数设置,比如如何去掉右下角的水印,如何自定义图标的高度宽度,背景颜色等等. 在我的另一篇文章中(Hi ...

  2. 基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts

    在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件Highcharts,其强大的功能和丰富的互动效果,令人难以忘怀.本篇主要介绍在Web开发中使用 ...

  3. (转)基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts

    http://www.cnblogs.com/wuhuacong/p/3736564.html 在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件 ...

  4. echart图表控件配置入门(二)常用图表数据动态绑定

    上一节 <echart图表控件配置入门(一)>介绍了echarts图表控件的入门配置,使开发人员可以快速搭建出一个静态的图表.但是在实际开发过程这还是不够的,不可能所有的图表控件都是静态数 ...

  5. Echarts图表控件使用总结1(Line,Bar)

    问题篇(详解):http://www.cnblogs.com/hanyinglong/p/4708337.html 1.前言 a.在系统开发过程中可能会使用到图表控件,一个好的图标控件可以使我们的网站 ...

  6. 转:Highcharts图表控件的使用

    摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...

  7. 在AngularJS中的使用Highcharts图表控件

    一.Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 如果你的项目是基于jquer ...

  8. HighCharts选项和参数详细配置查询表

    概述:作为一款出色的交互图表制作工具,HighCharts有着全面的选项.参数等配置信息.为了帮助大家进一步掌握HighCharts,今天我们为大家整理了HighCharts的所有配置信息和说明,将其 ...

  9. echart图表控件配置入门(一)

    现在主流的web图表控件主要有hightchart.fusionchart.echart: echart作为百度前端部门近期推出的一个基于html5的免费图表控件,以其丰富图表类型和良好的兼容性速度得 ...

随机推荐

  1. Maven实用总结

    使用Maven还是推荐IDEA,以前用eclipse总是喜欢出现乱七八糟的问题,具体错误和解决方案也记不清楚了. 下面总结下IDEA中遇到的问题和解决方法: 与IDEA搭配的相关问题 如何根据模板快速 ...

  2. Why Did the Cow Cross the Road III(树状数组)

    Why Did the Cow Cross the Road III 时间限制: 1 Sec  内存限制: 128 MB提交: 65  解决: 28[提交][状态][讨论版] 题目描述 The lay ...

  3. 【tomcat】tomcat远程调试

    修改tomcat bin目录下的catalina.sh,增加下面这行: CATALINA_OPTS="-agentlib:jdwp=transport=dt_socket,address=9 ...

  4. Spring的消息 Java Message Service (JMS)

     Spring有两种方法提供对EJB的支持: Spring能让你在Spring的配置文件里,把EJB作为Bean来声明.这样,把EJB引用置入到其他Bean的属性里就成为可能了,好像EJB就是另一个P ...

  5. [NOIP2016]天天爱跑步(树上差分+线段树合并)

    将每个人跑步的路径拆分成x->lca,lca->y两条路径分别考虑: 对于在点i的观察点,这个人(s->t)能被观察到的充要条件为: 1.直向上的路径:w[i]=dep[s]-dep ...

  6. JZYZOJ1544 [haoi2016T2]放棋子 错排公式 组合数学 高精度

    http://172.20.6.3/Problem_Show.asp?ID=1544&a=ProbNF 看了题解才意识到原题有错排的性质(开始根本不知道错排是什么). 十本不同的书放在书架上. ...

  7. python基础之序列化 time random os

    序列化与反序列化 json  pickle 1.什么是序列化与反序列化? 序列化就是将内存中的数据结构转成一种中间格式储存到硬盘或者基于网络传输 反序列化是网络,硬盘将被序列化的对象重新读到内存 2. ...

  8. Problem I: 零起点学算法104——Yes,I can!

    #include<stdio.h> int main() { ]; while(gets(a)!=NULL) { printf("I am "); printf(&qu ...

  9. 十二. 网络与数据库编程1.IP地址和InetAddress类

    Java语言的优势之一是Java程序能访问网络资源.Java提供一系列的类支持Java程序访问网络资源. TCP/IP协议和IP地址 为了进行网络通信,通信双方必须遵守通信协议.目前最广泛使用的是TC ...

  10. BUG:upstream timed out (10060: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected

    更换Apache扑向Nginx,刚搭建完WNMP,nginx能访问php页面 但是访问现有开发项目报错 [error] 4112#3724: *9 upstream timed out (10060: ...