此文档是本人在开发过程图形报表时使用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图表区选项用于设置图表区相关属性。

Color 颜色选项

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

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

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

Credits 名片

exporting 导出

Global 全局设置

（Google翻译的）

全球设置并不适用于每个图表的选项。像lang选项，这些选项，必须设置使用Highcharts.setOptions方法。

Title：标题选项

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

Subtitle：副标题选项

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

xAxis：X轴选项

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

yAxis：Y轴选项

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

Series：数据列选项

数据列选项用于设置图表中要展示的数据相关的属性。

plotOptions：数据点选项

plotOptions用于设置图表中的数据点相关属性。plotOptions根据各种图表类型，其属性设置略微有些差异，以下是部分选项。

Tooltip：数据点提示框

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

Legend：图例选项

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

Navigation按钮和图例选项

Loading

在图形上显示一个loading文字,可能是用于增加用户体验