Highcharts中文帮助文档

Highcharts中文帮助文档
Highcharts 简介：

Highcharts 是一个制作图表的 Javascript 类库，可以制作的图表有：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散状图等等。主要特性：

1、 提示功能：鼠标移动到图表的某一点上有提示信息

2、 放大功能：选中图表部分放大，近距离观察图表

3、 对个人用户完全免费，这一点很重要的

4、 兼容性：兼容当今所有的浏览器，包括 iPhone 、 IE 和火狐等等

5、 跨语言：不管是 PHP 、 Asp.net 还是 Java 都可以使用，它只需要三个文件：一个是 Highcharts 的核心文件 highcharts.js ， 还有 a canvas emulator for IE 和 Jquery 类库或者 MooTools 类库

6、 支持大部分的图表类型： 直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图

7、 易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表

8、 时间轴：可以精确到毫秒

9、 Ajax 支持：使用数组接受 Ajax 传值

官方网站：
http://www.highcharts.com/demo/

http://api.highcharts.com/highcharts

为了大家更好的学习highcharts，特地整理了highcharts的中文帮助文档。
文档主要翻译常用的选项配置，如果想看详细配置请看官网API:http://api.highcharts.com/highcharts
部分内容来源于网络，感谢月光光整理http://www.helloweba.com/view-blog-156.html
由于个人能力有限，如有翻译错误的地方还请不吝赐教.

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']
});

Credits 名片

参数 描述 默认值
enabled 是否启用名片 True
href 点击名片跳转的链接 http://www.highchart.com
position 设置名片的位置 position: {
align: 'right',
x: -10,
verticalAlign: 'bottom',
y: -5
}
style 设置名片的样式
text 设置名片显示的值 "Highcharts.com"

exporting 导出

参数 描述 默认值
enabled 是否显示导出打印的按钮 true
url 设置点击导出按钮连接的地址，默认是官网的地址，可自己定义
filename 保存的文件名 chart
type 保存的文件类型 Image/png
buttons 设置导出或打印按钮的样式、事件等具体配置请看官网
width 宽度 800
enableImages 是否启用图像的出口。包括图像的点标记，背景图片等，默认为false。应该是是否添加背景图http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/exporting/enableimages/
false

Global 全局设置
（Google翻译的）
全球设置并不适用于每个图表的选项。像lang选项，这些选项，必须设置使用Highcharts.setOptions方法。
参数 描述 默认值
canvasToolsURL 设置延迟加载的Android2.x设备的附加文件的URL。这些设备不支持SVG，所以需要下载一个帮助文件，其中包含canvg，的依赖关系rbcolor，和CanVG Renderer类。可以自己安装canvas-tools.js到自己的服务器上，相应地更改此选项。默认值的“http://www.highcharts.com/js/canvas-tools.js”。
useUTC 是否使用UTC时间，为轴缩放，刻度标记的位置和时间在Highcharts.dateFormat显示。

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}]
如果想对不同的列显示不同的颜色请对该列使用color属性,如data: [148.5, { y: 216.4,color: '#BF0B23'},54.4] ''
name 显示数据列的名称。 ''
type 数据列类型，支持 area, areaspline, bar, column, line, pie, scatter or spline line

plotOptions：数据点选项
plotOptions用于设置图表中的数据点相关属性。plotOptions根据各种图表类型，其属性设置略微有些差异，以下是部分选项。
参数 描述 默认值
enableMouseTracking 启用或禁用鼠标跟踪一个特定的列。这包括点提示和图上点的单击事件。对于大型数据集，它可以提高性能。如果这个禁用了event事件将无法执行 true
events 可以设置对整个图形的click事件、单击图例显示和隐藏图形,还有mouseOut、mouseOver等。具体详细信息请看官网
point 每个单点的属性,该属性下面可以这个单个点的click、mouseOut、mouseOver、remove、select(选中是触发)、unselect(失去选中时触发),update(对某个点更新时触发)
zIndex 设置图形的zIndex值，值相对大的显示在顶层
pointPadding 设置每列之间填充的大小，只对column和bar有效。
pointWidth 设置每列之间一个固定的宽度，只对column和bar有效。

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 设置图例内容样式 ''

Navigation按钮和图例选项
参数 描述 默认值
buttonOptions 设置导出,打印按钮的选项，如显示的位置，样式，是否启用等
menuItemHoverStyle 悬停在图例上面的样式
menuItemStyle
mentStyle

Loading
在图形上显示一个loading文字,可能是用于增加用户体验
参数 描述 默认值
hideDuration 设置loading标签淡出的时间 100
showDuration 设置loading标签淡入的时间 100
labelStyle Loading标签样式
style loading标签的样式，涵盖了绘图区