HighCharts/Highstock使用小结,使用汉化及中文帮助文档

   此文档是本人在开发过程图形报表时使用HighCharts所遇到的问题及解决方案 。最后附上有HighCharts中文帮助文档

HighCharts  版本：Highcharts-3.0.1

HighStock   版本：Highstock-1.3.1

下载地址：http://www.highcharts.com/

xAxis x轴的样式

xAxis: {

categories: ['Apples', 'Bananas', 'Oranges']], //X轴数据data

abels: {//X轴坐标值样式

rotation: -30,   //字体倾斜的角度

align: 'right',    //字体倾斜的方向

style: {         //字体样式

font: 'normal 14px Verdana, sans-serif'

}

},

title:{

text: '单位(类型)'  //X轴上的标题

}

}

X轴其它属性值：

tickPixelInterval: 150,//x轴上的间隔

type: 'datetime', //定义x轴上数据类型（此处以日期为例）

labels: {        //设置X轴各分类名称的样式style

formatter: function() {

var vDate=new Date(this.value);

return vDate.getFullYear()+"-"+(vDate.getMonth()+1)+"-"+vDate.getDate();

}     //定义x轴上数据显示格式（此处以日期格式为例）

align: 'center'   //显示位置

allowDecimals：true   //轴上的刻度是否允许使用小数 默认值为true

如果使用到其它属性可参照以下信息

Highcharts翻译系列之十七：xAxis x轴的样式（一）

http://www.2cto.com/kf/201304/200094.html

Highcharts 翻译系列之十八：x轴样式（二）

http://www.2cto.com/kf/201304/200096.html

yAxis y轴的样式

Y轴选项与上述xAxis选项基本一致，请参照上面xAxis x轴的样式

Exporting 导出

exporting :{

enabled:true

},   //隐藏打印按钮 （右上角，默认为true）

Credits 名片

credits:{

enabled:false

},  //Credits 名片   (右下角，默认为true。)

plotOptions数据点选项

plotOptions: {      //此处主要是以柱状图为例

column: {

dataLabels: {

enabled: true,     //是否显示

style: {           //字体样式

fontWeight: 'bold'

},

formatter: function() {    //显示信息的内容和格式（此处可以做超链接）

return   this.y+' 人';

}

}

}

}

如果使用到其它属性可参照以下信息

Highcharts翻译系列九：PlotOptions之area区域图

http://www.2cto.com/kf/201304/200072.html

Legend：图例选项

legend: {

layout: 'vertical',

align: 'right',

verticalAlign: 'top',

x: -10,

y: 100,

borderWidth: 0

},  //图例样式

如果使用到其它属性可参照以下信息

Highcharts翻译系列六：legend 图例选项

http://www.2cto.com/kf/201304/200066.html

Color 颜色选项

此处请参照HighCharts中文帮助文档

Title：标题选项

tooltip: {

formatter: function() {    //在此处可以自定义提示信息显示的样式

return '<b>'+ this.x.toLowerCase() +'： '+this.y +' 人</b> ' ;

}

},

如果使用到其它属性可参照以下信息

Highcharts翻译系列之十六：tooltip工具提示

http://blog.csdn.net/qiqingli/article/details/8725572

Lang  语言选项 （英译汉）

lang:{

printChart: '打印图表',

downloadPNG: '下载JPEG 图片',

downloadJPEG: '下载JPEG文档',

downloadPDF: '下载PDF 图片',

downloadSVG: '下载SVG 矢量图',

contextButtonTitle: '下载图片'

}

HighStock  顶部按钮和时间格式汉化

（Zoom,From,To   highstock.js---308行）

rangeSelector: {

buttons: [{//定义一组buttons,下标从0开始

type: 'week',

count: 1,

text: '1周'

},{

type: 'month',

count: 1,

text: '1月'

}, {

type: 'month',

count: 3,

text: '3月'

}, {

type: 'month',

count: 6,

text: '6月'

}, {

type: 'ytd',

text: '1季度'

}, {

type: 'year',

count: 1,

text: '1年'

}, {

type: 'all',

text: '全部'

}],

buttonTheme: {

width: 36,

height: 16,

padding: 1,

r: 0,

stroke: '#68A',

zIndex: 7

},

inputDateFormat: '%Y-%m-%d',

inputEditDateFormat: '%Y-%m-%d',

selected: 1//表示以上定义button的index,从0开始

},

语言对象。语言对象是全局的，而且不能在图表初始化的时候设置。它必须使用Highcharts.setOptions在图表初始化之间设置

Highcharts.setOptions({

global: {

useUTC: false

},

lang:{

months:[ 'Janvier', 'Fevrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août','Septembre',  'Octobre','Novembre', 'Decembre'],

weekdays:[ 'Sunday',  'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

}

});

汉化后:

Highcharts.setOptions({

global: {

useUTC: false

},

lang:{

months:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月','九月',  '十月','十一月', '十二月'],

weekdays:['星期日',  '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']

}

});

其他汉化信息科参照

highcharts 页面导出按钮汉化

http://www.kaifajie.cn/wangyezhizuo/5628.html

Column, line and pie 三图组合

tooltip: {

formatter: function() {

var s;

if (this.point.name) { // 当为饼状图时

s = ''+

this.point.name +': <br/>总户数 '+ this.y +' 户';

}else {

s = ''+

+this.series.name +'('+this.x +'): '+ this.y+' 户’;

}

return s;

},

positioner:null

},

size: 120,    //Pie大小

allowPointSelect: true, //扇区是否可以点击

cursor: 'pointer',  //鼠标的样式

showInLegend: false,  //图例

dataLabels: {

enabled: false//是否显示信息

}

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

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标签的样式，涵盖了绘图区