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

  • 格式:doc
  • 大小:213.00 KB
  • 文档页数:14

下载文档原格式

  / 14
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

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

}, {