HighCharts使用文档小结及中文帮助文档
- 格式:doc
- 大小:213.00 KB
- 文档页数:14
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季度'
}, {