關於highstock外掛程式的使用心得

標籤：

最近在做一個後台管理系統，其中有個統計分析模組，用到了圖表外掛程式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);

 

關於highstock外掛程式的使用心得