HighCharts使用文档小结及中文帮助文档

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

HighCharts 版本：Highcharts-3.0.1

HighStock 版本：Highstock-1.3.1

下载地址：/

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轴的样式（一）

/kf/201304/200094.html

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

/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区域图

/kf/201304/200072.html

Legend：图例选项

legend: {

layout: 'vertical',

align: 'right',

verticalAlign: 'top',

x: -10,

y: 100,

borderWidth: 0

}, //图例样式

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

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

/kf/201304/200066.html

Color 颜色选项

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

Title：标题选项

tooltip: {

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

return''+ this.x.toLowerCase() +'：'+this.y +' 人 ' ;

}

},

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

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

/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季度'

}, {