最近在做一个后台管理系统，其中有个统计分析模块，用到了图表插件highstock.js
关于配置在官网上也查看了好久，这是我封装好的一个js
Highcharts.setOptions({
global : {
useUTC : false
}
});
var lineStock=(function($){
_this={};
_this.drawLine=function(tipName,dateFormat,lineData){
$('#dateLineChart').highcharts('StockChart', {
colors: ['#61C6CF'],
rangeSelector : {
enabled : false
},
title : {
text : ' '
},
series : [{
name :tipName,
data:lineData,
tooltip: {
valueDecimals: 0,
xDateFormat:dateFormat
},
marker : {
enabled : true,
fillColor:"#FFF",
radius : 3,
lineWidth:1,
lineColor:"#61C6CF"
}
}],
navigation:{
buttonOptions:{
enabled:false
}
},
navigator:{
enabled:false,
adaptToUpdatedData:false,
maskInside:false
},
yAxis:{
gridLineWidth:1,
lineWidth:1
},
xAxis:{
tickWidth : 0,// 如果不加让刻度为0，浏览器会多出一块空白的刻度
formatter : function() {
var vDate = new Date(this.value);
return (vDate.getMonth() + 1) + "-" + vDate.getDate();
},
minorTickInterval: 'auto',
lineWidth: 1,
tickWidth: 1
},
credits:{
enabled: false
},
exporting:{
enabled: false
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
// 日期选择范围
rangeSelector : {
// 缩放选择按钮，是一个数组。
// 其中type可以是： 'millisecond', 'second', 'minute', 'day', 'week',
// 'month', 'ytd' (year to date), 'year' 和 'all'。
// 其中count是指多少个单位type。
// 其中text是配置显示在按钮上的文字
buttons : [ {
type : 'month',
count : 1,
text : '1月'
}, {
type : 'month',
count : 3,
text : '3月'
}, {
type : 'month',
count : 6,
text : '6月'
}, {
type : 'year',
count : 1,
text : '1年'
}, {
type : 'year',
count : 3,
text : '3年'
}, {
type : 'all',
text : '所有'
} ],
// 默认选择域：0（缩放按钮中的第一个）、1（缩放按钮中的第二个）……
selected : 0,
// 是否允许input标签选框
inputEnabled : false,
// inputDateFormat : '%Y-%m-%d',
buttonTheme : { // styles for the buttons
fill : 'none',
stroke : 'none',
'stroke-width' : 0,
r : 8,
style : {
// color: '#039',
color : '#048ee9',
fontWeight : 'bold',
display : 'none'
},
states : {
hover : {},
select : {
// fill: '#039',
fill : '#048ee9',
style : {
color : 'white'
}
}
}
},
// inputBoxBorderColor: 'gray',
inputBoxBorderColor : '#b4caf2',
inputBoxWidth : 120,
inputBoxHeight : 18,
inputStyle : {
// color: '#039',
color : '#048ee9',
// color: '#b4caf2',
fontWeight : 'bold'
},
labelStyle : {
color : '#b4caf2',
fontWeight : 'bold',
display : 'none'
}
}
});
};
return _this;
})(jQuery);